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
-
defaultState
: Initial state -
config
: Optional configuration object-
skipVoid
: Optional argument. Determines whether the store skipsundefined
values. Default istrue
. If you pass anundefined
value to a store withskipVoid: 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 returnsfalse
. Should be used when the standard update prevention (if the value to be written to the store equalsundefined
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
andread
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 providedvalues
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);});
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
Common Errors
Below is a list of possible errors you may encounter when working with stores:
store: undefined is used to skip updates. To allow undefined as a value provide explicit { skipVoid: false } option
.serialize: One or more stores dont have sids, their values are omitted
.unit call from pure function is not supported, use operators like sample instead
.
Related API and Articles
- API
- Articles