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

``shell
npm i react-micro-reducer
`

Demo

I've made a couple of Codesandboxes to play around with useMicroReducer

- Codesandbox
- Codesandbox w/ immer

Usage

`js
import React from "react";
import { useMicroReducer } from "react-micro-reducer";

export default function App() {
const [state, dispatch] = useMicroReducer(
state => ({
reset: () => 0,
increment: (value: number) => state + value,
decrement: (value: number) => state - value,
multiply: (value: number) => state * value
}),
0
);

return (



);
}
`

Usage with Immer

Just pass the produce function as a third argument to useMicroReducer, and your state will be a draft object 💪

`js
import React from "react";
import { useMicroReducer } from "react-micro-reducer";
import produce from "immer";

export default function App() {
const [state, dispatch] = useMicroReducer(
draft => ({
search: (query: string) => {
// Draft is an immer draft object 🎉
draft.query = query;
}
}),
{
query: ""
},
produce
);
// Return render stuff
}
``

Credits

Thanks to Maciej Sikora for helping with the type definitions, and to Jeppe Hasseris for helping with the naming/API! 🙌