import { type Store, type StoreWritable } from "effector";
Store is an object that holds the state value. Store gets updates when it receives a value that is not equal (!==
) to the current one and to undefined
. Store is a Unit. Some stores can be derived.
Methods
.map(fn)
Creates a derived store. It will call a provided function with the state when the original store updates, and will use the result to update the derived store.
Formulae
const $second = $first.map(fn);
Arguments
fn
(Function): Function that receivesstate
and returns a new state for the derived store.config
(Object): Optional configuration.
Returns
DerivedStore: New derived store.
Examples
Basic
import { createEvent, createStore } from "effector";
const changed = createEvent();
const $title = createStore("").on(changed, (_, newTitle) => newTitle);
const $length = $title.map((title) => title.length);
$length.watch((length) => {
console.log("new length", length);
});
changed("hello");
changed("world");
changed("hello world");
SkipVoid
const $length = $title.map((title) => title.length, { skipVoid: false });
.on(trigger, reducer)
Updates state when trigger
is triggered by using a reducer.
Formulae
$store.on(trigger, reducer);
Arguments
trigger
: Event, Effect, or another Store.reducer
: Reducer: Function that receivesstate
andparams
and returns a new state.
Returns
Store: Current store.
Examples
Basic
import { createEvent, createStore } from "effector";
const $store = createStore(0);
const changed = createEvent();
$store.on(changed, (value, incrementor) => value + incrementor);
$store.watch((value) => {
console.log("updated", value);
});
changed(2);
changed(2);
.watch(watcher)
Calls watcher
function each time when the store is updated.
Formulae
const unwatch = $store.watch(watcher);
Arguments
watcher
: Watcher: Watcher function that receives the current store state as the first argument.
Returns
Subscription: Unsubscribe function.
Examples
Basic
const add = createEvent();
const $store = createStore(0).on(add, (state, payload) => state + payload);
$store.watch((value) => console.log(`current value: ${value}`));
add(4);
add(3);
.reset(...triggers)
Resets store state to the default value.
Formulae
$store.reset(...triggers);
Arguments
triggers
: ((Event | Effect | Store)[]): any number of Events, Effects, or Stores.
Returns
Store: Current store.
Examples
Basic
import { createEvent, createStore } from "effector";
const increment = createEvent();
const reset = createEvent();
const $store = createStore(0)
.on(increment, (state) => state + 1)
.reset(reset);
$store.watch((state) => console.log("changed", state));
increment();
increment();
reset();
.off(trigger)
Removes reducer for the given trigger
.
Formulae
$store.off(trigger);
Arguments
trigger
: Event, Effect, or Store.
Returns
Store: Current store.
Examples
Basic
import { createEvent, createStore, merge } from "effector";
const changedA = createEvent();
const changedB = createEvent();
const $store = createStore(0);
const changed = merge([changedA, changedB]);
$store.on(changed, (state, params) => state + params);
$store.off(changed);
Properties
.updates
Returns
Event: Event that represents updates of the given store.
Example
import { createStore, is } from "effector";
const $clicksAmount = createStore(0);
is.event($clicksAmount.updates);
$clicksAmount.updates.watch((amount) => {
console.log(amount);
});
.reinit
Returns
Event: Event that can reinitialize a store with a default value.
Example
import { createStore, createEvent, sample, is } from "effector";
const $counter = createStore(0);
is.event($counter.reinit);
const increment = createEvent();
$counter.reinit();
console.log($counter.getState());
.shortName
Returns
(string
): ID or short name of the store.
.defaultState
Returns
(State
): Default state of the store.
Example
const $store = createStore("DEFAULT");
console.log($store.defaultState === "DEFAULT");
Utility methods
.getState()
Returns the current state of the store.
Returns
(State
): Current state of the store.
Example
import { createEvent, createStore } from "effector";
const add = createEvent();
const $number = createStore(0).on(add, (state, data) => state + data);
add(2);
add(3);
console.log($number.getState());
Readonly store
TBD
Types
import { type StoreValue } from "effector";
StoreValue<S>
Extracts type of Store
or StoreWritable
value.
const $store: Store<Value>;
type Value = StoreValue<typeof $store>;