use-reducer-effect/dist/index.esm.js

A tiny library that enables side effects with the useReducer hook

import { useRef, useReducer } from 'react';

function createSideEffectReducer(sideEffects) {
    return (reducer, initialState, initializer) => {
        return useReducerWithSideEffects(reducer, sideEffects, initialState, initializer);
    };
}
function useReducerWithSideEffects(reducer, sideEffects, initialState, initializer) {
    const currentAction = useRef(null);
    const [state, dispatch] = useReducer((state, action) => {
        const newState = reducer(state, action);
        if (currentAction.current !== action) {
            sideEffects(newState, action).then(newAction => {
                if (!newAction)
                    return;
                dispatch(newAction);
            });
            currentAction.current = action;
        }
        return newState;
    }, initialState, initializer);
    return [state, dispatch];
}

export { createSideEffectReducer, useReducerWithSideEffects };