README
Seducer
React.useReducer
is an awesome hook but more often than not it is overshadow by its relative React.useState
which is easier and simpler to use.
Personally, I think is mostly by some of the following reasons:
- Reducers are not the bread and butter of all react-developers unlike
React.useState
making it harder to memorize. - Apart from simple examples
React.useReducer
requires some boilerplate to make it "functional". - To make it consumable across different components you need to pair it with the
React.createContext
and you will need more boilerplate to use it. - And because all above, our beloved
React.useState
is picked first thanReact.useReducer
each time
To mitigate some of these reasons, Seducer (simple reducer) borned which is a wrapper on top of React.useReducer
, making it easier to use and with a more friendly API.
Seducer
provides two hooks that you can consume useSeducer
and useSeducerWithContext
.
useSeducer example
import { useSeducer } from "@paprika/seducer";
export default function App() {
function up(state) {
return state + 1;
}
function down(state) {
return state - 1;
}
const [state, dispatch, action] = useSeducer({ up, down }, 0);
return (
<>
{/** alternative you can dispatch("up") directly */}
<Button onClick={() => dispatch(action.up)}>+</Button>
<Button onClick={() => dispatch(action.down)}>-</Button>
{state}
</>
);
}