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

Методы

serialize(scope, params)

Сопутствующий метод для fork. Позволяет получить сериализованное значение всех сторов в пределах scope. Основная цель — сериализация состояния приложения на стороне сервера во время SSR.

Формула

serialize(scope: Scope, { ignore?: Array<Store<any>>; onlyChanges?: boolean }): {[sid: string]: any}

Аргументы

1. scope Scope: объект scope (форкнутый экземпляр)
2. ignore Опциональный массив Store, который будет пропущен при сериализации (добавлено в 20.14.0)
3. onlyChanges Опциональный флаг, чтобы игнорировать сторы, которые не изменились в форке (предотвращает передачу значений по умолчанию по сети)

Возвращает

Объект со значениями сторов, использующий sid в качестве ключей.

Примеры

Сериализация состояния форкнутого экземпляра

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

const inc = createEvent();
const $store = createStore(42);
$store.on(inc, (x) => x + 1);

const scope = fork();

await allSettled(inc, { scope });

console.log(serialize(scope)); // => {[sid]: 43}

Запустить пример

Использование с onlyChanges

С onlyChanges этот метод будет сериализовать только те сторы, которые были изменены каким-либо триггером во время работы или определены в поле values с помощью fork или hydrate(scope). После изменения стор останется помеченным как измененное в данном scope, даже если оно вернется к состоянию по умолчанию во время работы, иначе клиент не обновит этот стор на своей стороне, что является неожиданным и непоследовательным. Это позволяет нам гидрировать состояние клиента несколько раз, например, во время смены маршрутов в next.js.

import { createDomain, fork, serialize, hydrate } from "effector";

const app = createDomain();

/** стор, который мы хотим гидрировать с сервера */
const $title = app.createStore("dashboard");

/** стор, который не используется сервером */
const $clientTheme = app.createStore("light");

/** скоуп в клиентском приложении */
const clientScope = fork(app, {
  values: new Map([
    [$clientTheme, "dark"],
    [$title, "profile"],
  ]),
});

/** scope на стороне сервера для страницы чатов, созданный для каждого запроса */
const chatsPageScope = fork(app, {
  values: new Map([[$title, "chats"]]),
});

/** этот объект будет содержать только данные $title
 * так как $clientTheme никогда не изменялся в server scope */
const chatsPageData = serialize(chatsPageScope, { onlyChanges: true });
console.log(chatsPageData);
// => {'-l644hw': 'chats'}

/** таким образом, заполнение значений с сервера затронет только соответствующие сторы */
hydrate(clientScope, { values: chatsPageData });

console.log(clientScope.getState($clientTheme));
// => dark

Запустить пример