use-reducer-enhancer ✨
This package allows you to use React Hooks' useReducer
hook with standard Redux middleware.
Work with Redux middleware using React Hooks 🎣
This package appears to work for basic usecases in non performance critical settings but I would consider it experimental for the time being.
So far this library has been found to work with:
- Thunk
- Click here to add your favourite middleware!
...more to come
Install
$ npm install --save use-reducer-enhancer
or
$ yarn add use-reducer-enhancer
API
The package provides a named export applyMiddleware
that can create an enahancer that can be used to wrap useReducer
with middleware.
; const enhancer = ;const useEnhancedReducer = ;
Usage Example
;;; // Enhance useReducer with middlewareconst enhancer = ;const useReducerWithThunk = ; const INCREMENT = "INCREMENT";const DECREMENT = "DECREMENT";const LOADING = "LOADING"; { return { const state = ; if stateloading return; ; ; };} { return { const state = ; if stateloading return; ; ; };} { } { // Use the new `useReducer` like the normal hook const state dispatch = ; return <div> <div>Count: statecount</div> <button onClick= >+</button> <button onClick= >-</button> stateloading && <div>Hold on...</div> </div> ;}
Why did you build this?
I needed a way to manage asynchronous code within state diaspatch logic and thought it made sense to wrap the existing middleware patterns we use in redux so they can be applied to useReducer.
Contibuting
PR's and issues most welcome!