react-micro-reducer
A React reducer hook, with a "micro"-reducer style, made for a Typescript world 💙
Split your reducer into micro reducers based on actions, and avoid having one large reducer function with a switch statement
useMicroReducer uses the standard useReducer under the hook 🎉
Ohh, and it supports Immer 🎂
Installation
npm i react-micro-reducer
Demo
I've made a couple of Codesandboxes to play around with useMicroReducer
Usage
;; { const state dispatch = ; return <div> <h1>state</h1> <button onClick= dispatch>Decrement with 5</button> <button onClick= dispatch>Increment with 5</button> <button onClick= dispatch>Multiply with 5</button> <button onClick= dispatch>Reset</button> </div> ;}
Usage with Immer
Just pass the produce function as a third argument to useMicroReducer, and your state will be a draft object 💪
;;; { const state dispatch = ; // Return render stuff}
Credits
Thanks to Maciej Sikora for helping with the type definitions, and to Jeppe Hasseris for helping with the naming/API! 🙌