The store can be updated using the
setAppStatefunction from thecreatefunction.
The React components expects the state updates must be immutable.
This lib lets you update the state in a mutable way to avoid manual merging like using the ... spread opertor.
The store can be updated in two ways:
Passing an object
You can pass an object for flat updates. The values will be merged into the store.
const { setAppState } = create({ a: 1, b: 2, c: 3 });
<button onClick={() => setAppState({ b: 5 })}>
Change
</button> Passing a function
You can pass a function to update the state deeply.
The function can be Sync or Async.
const { setAppState } = create({ some: { deep: { obj: { count: 0 } } } });
<button onClick={() => setAppState((s) => { s.some.deep.obj.count++ })}>
Increment
</button> Internally, the deep state updates are done with the help of immer (opens in a new tab) lib.
The deep updates must follow the immer Update Patterns (opens in a new tab) and should be aware of these pitfals (opens in a new tab).
Replacing the state
To replace an object instead of merging, pass true value to the second argument of the setAppState().
const { useAppState, setAppState } = create({ a: 1, b: 2, c: 3 });
const keys = useAppState(s => Object.keys(s))
console.log(keys); //=> ['a', 'b', 'c']
<button onClick={() => setAppState({ a: 0, c: 5 }, true)}>
Replace
</button>
console.log(keys); //=> ['a', 'c']