import { fork, type Scope } from "effector";

Методы

fork()

Создает изолированный экземпляр приложения. Основные цели этого метода — SSR и тестирование.

Формула

fork(): Scope

Возвращает

Scope: Новый чистый scope

Примеры

Создание двух экземпляров с независимым состоянием счетчика

import { createStore, createEvent, fork, allSettled } from "effector";

const inc = createEvent();
const dec = createEvent();
const $counter = createStore(0);

$counter.on(inc, (value) => value + 1);
$counter.on(dec, (value) => value - 1);

const scopeA = fork();
const scopeB = fork();

await allSettled(inc, { scope: scopeA });
await allSettled(dec, { scope: scopeB });

console.log($counter.getState()); // => 0
console.log(scopeA.getState($counter)); // => 1
console.log(scopeB.getState($counter)); // => -1

Попробовать

fork(options)

Позволяет задать значения для stores в scope и заменить обработчики для effects.

Формула

fork(options: { values?, handlers? }): Scope

Аргументы

1. options: { values?, handlers? } — Объект с необязательными значениями и обработчиками

values

Опция для предоставления начальных состояний для stores.

Может использоваться тремя способами:

1. Массив кортежей со stores и значениями:

fork({
  values: [
    [$user, "alice"],
    [$age, 21],
  ],
});

2. Map со stores и значениями:

fork({
  values: new Map().set($user, "alice").set($age, 21),
});

3. Обычный объект: {[sid: string]: value}

fork({
  values: {
    [$user.sid]: "alice",
    [$age.sid]: 21,
  },
});

handlers

Опция для предоставления обработчиков для effects.

Может использоваться по-разному:

1. Массив кортежей с effects и обработчиками:

fork({
  handlers: [
    [getMessageFx, (params) => ({ id: 0, text: "message" })],
    [getUserFx, async (params) => ({ name: "alice", age: 21 })],
  ],
});

2. Map с effects и обработчиками:

fork({
  handlers: new Map()
    .set(getMessageFx, (params) => ({ id: 0, text: "message" }))
    .set(getUserFx, async (params) => ({ name: "alice", age: 21 })),
});

3. Обычный объект: {[sid: string]: handler}

fork({
  handlers: {
    [getMessageFx.sid]: (params) => ({ id: 0, text: "message" }),
    [getUserFx.sid]: async (params) => ({ name: "alice", age: 21 }),
  },
});

Возвращает

Scope: Новый чистый scope

Примеры

Задание начального состояния для store и изменение обработчика для effect

Это пример теста, который проверяет, что после запроса к серверу значение $friends заполняется.

import { createEffect, createStore, fork, allSettled } from "effector";

const fetchFriendsFx = createEffect<{ limit: number }, string[]>(async ({ limit }) => {
  /* получение данных на стороне клиента */
  return [];
});
const $user = createStore("guest");
const $friends = createStore([]);

$friends.on(fetchFriendsFx.doneData, (_, result) => result);

const testScope = fork({
  values: [[$user, "alice"]],
  handlers: [[fetchFriendsFx, () => ["bob", "carol"]]],
});

/* запускаем вычисления в scope и ожидаем завершения всех вызванных effects */
await allSettled(fetchFriendsFx, {
  scope: testScope,
  params: { limit: 10 },
});

/* проверяем значение store в scope */
console.log(testScope.getState($friends));
// => ['bob', 'carol']

Попробовать

fork(domain, options?)

Формула

fork(domain: Domain, options?: { values?, handlers? }): Scope

Аргументы

1. domain (Domain): Необязательный domain для fork.
2. options: { values?, handlers? } — Объект с необязательными values и handlers

Возвращает

Scope: Новый чистый scope

Примеры

TBD