@solid-primitives/reducer v0.0.101
@solid-primitives/reducer
Provides a createReducer primitive for updating state in a predictable way. SolidJS equivalent of React's useReducer.
Installation
npm install @solid-primitives/reducer
# or
yarn add @solid-primitives/reducer
When to use it
createReducer
is useful for:
- DRY the code of the
set
s of a signal - Ensure the signal is always in a valid state
- Make it easier to understand for what a signal is used
How to use it
const [accessor, dispatch] = createReducer<State>(
dispatcher: (state: State, ...args) => State,
initialState: State
);
dispatcher
is the reducer, it's 1st parameter always is the current state of the reducer and it returns the new state of the reducer.
accessor
can be used as you use a normal signal: accessor()
. It contains the state of the reducer.
dispatch
is the action of the reducer, it is a sort of setSignal
that does NOT receive the new state, but instructions to create it from the current state.
For example:
function Counter() {
const [count, double] = createReducer(c => c * 2, 1);
return <button onClick={double}>{count()}</button>;
}
The reducer also can receive other arguments:
const dispatcher = (c: number, type: "double" | "increment") => {
if (type == "double") {
return c * 2;
} else {
return c + 1;
}
};
function Counter() {
const [count, handleClick] = createReducer(dispatcher, 1);
return (
<div>
<span>{count()}</span>
<button onClick={() => handleClick("double")}>Double</button>
<button onClick={() => handleClick("increment")}>Increment</button>
</div>
);
}
React allows a 3rd argument:
const fib = (n: number) => (n < 2 ? n : fib(n - 1) + fib(n - 2));
const nextFib = (n: number) => Math.round((n * (1 + sqrt(5))) / 2);
const [fibonacci, nextFibonacci] = useReducer(nextFib, 1, fib);
You need to convert that to the following format:
const [fibonacci, nextFibonacci] = createReducer(nextFib, fib(1));
Demo
https://codesandbox.io/s/solid-primitives-reducer-demo-7nrfs2?file=/index.tsx
Changelog
See CHANGELOG.md