createStore

import { createStore } from "effector";


const $store = createStore();

Метод для создания стора.

Формула

createStore(
  defaultState: State, // Исходное состояние стора
  config?: { // Объект конфигурации с дополнительными опциями
    skipVoid?: boolean; // Контролирует обновления со значением undefined
    name?: string; // Имя стора для отладки
    sid?: string // Стабильный идентификатор для SSR
    updateFilter?: (update: State, current: State) => boolean // Функция фильтрации обновлений
    serialize?: // Конфигурация сериализации для SSR
    | 'ignore'
    | {
        write: (state: State) => SerializedState
        read: (json: SerializedState) => State
      }
    domain?: Domain; // Домен, к которому принадлежит стор
  },
): StoreWritable<State>
  • Аргументы

  1. defaultState: Исходное состояние

  2. config: Опциональный объект конфигурации

    • skipVoid: Опциональный аргумент. Определяет пропускает ли стор undefined значения. По умолчанию true. В случае если передать в стор, у которого skipVoid:true, значение undefined, тогда вы получите ошибку в консоль.

    • name: Опциональный аргумент. Имя стора. Babel-plugin может определить его из имени переменной стора, если имя не передано явно в конфигурации.

    • sid: Опциональный аргумент. Уникальный идентификатор стора. Он используется для различения сторов между разными окружениями. При использовании Babel-plugin проставляется автоматически.

    • updateFilter: Опциональный аргумент. Чистая функция, которая предотвращает обновление стора, если она возвращает false. Следует использовать для случаев, когда стандартного запрета на обновление (если значение, которое предполагается записать в стор, равняется undefined или текущему значению стора) недостаточно. Если вызывать юниты внутри, то можно столкнуться с ошибкой.


    • serialize: Опциональный аргумент отвечающий за сериализацию стора.

      • 'ignore': исключает стор из сериализации при вызовах serialize.
      • Объект с методами write и read для кастомной сериализации. write вызывается при вызове serialize и приводит состояние стор к JSON-значению – примитив или простой объект/массив. read вызывается при fork, если предоставленные values – результат вызова serialize.
  • Возвращаемое значение

Возвращает новый стор.

Примеры

Базовое использование стора:

import { createEvent, createStore } from "effector";


const addTodo = createEvent();
const clearTodos = createEvent();


const $todos = createStore([])
  .on(addTodo, (todos, newTodo) => [...todos, newTodo])
  .reset(clearTodos);


const $selectedTodos = $todos.map((todos) => {
  return todos.filter((todo) => !!todo.selected);
});


$todos.watch((todos) => {
  console.log("todos", todos);
});

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

Пример с кастомной конфигурацией serialize:

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


const saveDate = createEvent();
const $date = createStore<null | Date>(null, {
  // Объект Date автоматически приводится в строку ISO-даты при вызове JSON.stringify
  // но не приводится обратно к Date при вызове JSON.parse – результатом будет та же строка ISO-даты
  // Это приведет к расхождению состояния стора при гидрации состояния на клиенте при серверном рендеринге
  //
  // Кастомная конфигурация `serialize` решает эту проблему
  serialize: {
    write: (dateOrNull) => (dateOrNull ? dateOrNull.toISOString() : dateOrNull),
    read: (isoStringOrNull) => (isoStringOrNull ? new Date(isoStringOrNull) : isoStringOrNull),
  },
}).on(saveDate, (_, p) => p);


const serverScope = fork();


await allSettled(saveDate, { scope: serverScope, params: new Date() });


const serverValues = serialize(serverScope);
// `serialize.write` стор `$date` был вызван


console.log(serverValues);
// => { nq1e2rb: "2022-11-05T15:38:53.108Z" }
// Объект Date из стора сохранен как ISO-дата


const clientScope = fork({ values: serverValues });
// `serialize.read` стор `$date` был вызван


const currentDate = clientScope.getState($date);
console.log(currentDate);
// => Date 11/5/2022, 10:40:13 PM
// Строка ISO-даты приведена обратно к объекту Date

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

Типичные ошибки

Ниже приведен список возможных ошибок, с которыми вы можете столкнуться при работе со сторами:

Перевод поддерживается сообществом

Документация на английском языке - самая актуальная, поскольку её пишет и обновляет команда effector. Перевод документации на другие языки осуществляется сообществом по мере наличия сил и желания.

Помните, что переведенные статьи могут быть неактуальными, поэтому для получения наиболее точной и актуальной информации рекомендуем использовать оригинальную англоязычную версию документации.

Соавторы
Commits