pret-a-porter/use-enhanced-reducer

🤖Simple custom hook for use React.useReducer with middlewares.

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
}

use-enhanced-reducer's Issues

Dispatch should be memoized via useCallback

I tried using this library to apply a middleware that performs API calls via useEffect. When calling dispatch from useEffect, the best practice per the React docs (which is also enforced by create-react-app's ESLint rules) is to include dispatch in the dependency array passed to useEffect. However, this created an infinite loop. The original useReducer avoids this problem by guaranteeing that dispatch function identity is stable and won’t change on re-renders. By returning useCallback(enhancedDispatch) rather than just the bare enhancedDispatch function, I believe you would avoid this problem. I tried it in my own code and it seems to be working.