use-enhanced-reducer

Simple custom hook for use React.useReducer with middlewares.

Examples

With logger middleware

import * as React from 'react';
import { useEnhancedReducer, loggerMiddleware } from 'use-enhanced-reducer';
 
const SomeComponent: React.FunctionComponent<{}> = () => {
    // see logs of actions in console
    const [state, dispatch] = useEnhancedReducer(reducer, initialState, [loggerMiddleware])
 
    // do something
}

With your custom middleware

import * as React from 'react';
import { useEnhancedReducer, TReducerMiddleware } from 'use-enhanced-reducer';
 
const customMiddleware: TReducerMiddleware = state => dispatch => action => {
    // do something
};
 
const SomeComponent: React.FunctionComponent<{}> = () => {
    const [state, dispatch] = useEnhancedReducer(reducer, initialState, [customMiddleware])
 
    // do something
}