React store for straightforward shared state management
Dealing with shared state similarly to React's useState()
.
import {Store, useStore} from 'idst';
-
Wrap up shared data into
new Store(data)
, put it into a React Context; -
Pick the store from the context with the React's
useContext()
hook from within a component; -
Read the store state and subscribe to its updates:
let [state, setState] = useStore(store);
Alternatively, uselet [state, setState] = useStore(store, false);
(with the hook's second parameter) to turn off the subscription to store state updates; -
Update parts of the shared data:
setState({x: 10});
orsetState(state => ({x: state.x + 5}));
-
Have as many stores as needed.
See also idstm, an immutable store with a mutable interface of setState()
.
(idstm's setState()
is handier when it comes to changing nested properties in the state and it generally results in a more concise code, but it comes with an extra dependency.)
The package name is the initialism for immutable data store.