1.2.0 • Published 4 years ago
use-middleware-reducer v1.2.0
useMiddlewareReducer
An efficient react hook to benefit from the huge middleware ecosystem of Redux.
With this hook, you can use any Redux middleware inside one of your React component, without using Redux itself!
This package exports a Typescript type defintion.
Installation
npm install use-middleware-reducer
or
yarn add use-middleware-reducer
How to use
import useMiddlewareReducer from 'use-middleware-reducer'
import logger from 'redux-logger'
const initialState = 0
const reducer = (state, action) => {
if (action.type === 'INC') return state + 1
if (action.type === 'DEC') return state - 1
}
const middleware = [
logger
]
export function Counter() {
const [state, dispatch] = useMiddlewareReducer(reducer, initialState, middleware)
return (
<>
<p>{state}</p>
<button onClick={() => dispatch({ type: 'INC' })}>+</button>
<button onClick={() => dispatch({ type: 'DEC' })}>-</button>
</>
)
}
See it in action
Code Sandbox demo: https://codesandbox.io/s/usemiddlewarereducer-example-otz3j