createStore

import { createStore } from "effector";


const $store = createStore();

Method for creating stores.

Formula

createStore(
  defaultState: State, // Initial store state
  config?: { // Configuration object with additional options
    skipVoid?: boolean; // Controls updates with undefined values
    name?: string; // Store name for debugging
    sid?: string // Stable identifier for SSR
    updateFilter?: (update: State, current: State) => boolean // Update filtering function
    serialize?: // Serialization configuration for SSR
    | 'ignore'
    | {
        write: (state: State) => SerializedState
        read: (json: SerializedState) => State
      }
    domain?: Domain; // Domain to which the store belongs
  },
): StoreWritable<State>
  • Arguments

  1. defaultState: Initial state

  2. config: Optional configuration object

    • skipVoid: Optional argument. Determines whether the store skips undefined values. Default is true. If you pass an undefined value to a store with skipVoid: true, youโ€™ll get an error in the console.

    • name: Optional argument. Store name. Babel-plugin can determine it from the store variable name if the name is not explicitly passed in the configuration.

    • sid: Optional argument. Unique store identifier. Itโ€™s used to distinguish stores between different environments. When using Babel-plugin, itโ€™s set automatically.

    • updateFilter: Optional argument. A pure function that prevents store updates if it returns false. Should be used when the standard update prevention (if the value to be written to the store equals undefined or the current store value) is insufficient.


    • serialize: Optional argument responsible for store serialization.

      • 'ignore': excludes the store from serialization when calling serialize.
      • Object with write and read methods for custom serialization. write is called when serialize is invoked and converts the store state to a JSON value โ€“ a primitive or simple object/array. read is called during fork if the provided values are the result of calling serialize.
  • Return value

Returns a new store.

Examples

Basic store usage:

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);
});

Run example

Example with custom serialize configuration:

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


const saveDate = createEvent();
const $date = createStore<null | Date>(null, {
  // Date objects are automatically converted to ISO date strings when calling JSON.stringify
  // but are not converted back to Date when calling JSON.parse โ€“ the result will be the same ISO date string
  // This will cause state mismatch when hydrating state on the client during server-side rendering
  //
  // Custom `serialize` configuration solves this problem
  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` for store `$date` was called


console.log(serverValues);
// => { nq1e2rb: "2022-11-05T15:38:53.108Z" }
// Date object from store saved as ISO date


const clientScope = fork({ values: serverValues });
// `serialize.read` for store `$date` was called


const currentDate = clientScope.getState($date);
console.log(currentDate);
// => Date 11/5/2022, 10:40:13 PM
// ISO date string converted back to Date object

Run example

Common Errors

Below is a list of possible errors you may encounter when working with stores:

Contributors
Commits