UNPKG

@paprika/seducer

Version:

Seducer (simple reducer) is a wrapper on top of React.useReducer, making it easier to use

39 lines (30 loc) 1.47 kB
# 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 than `React.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 ```js 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} </> ); } ```