fix: createReducer stable dispatch function identity

stable dispatch function identity so it won’t change on re-renders

Author: Andrew Bazhanov

docs/createReducer.md

@@ -7,9 +7,9 @@ Factory for reducer hooks with custom middleware with an identical API as [React
 An example with [`redux-thunk`](https://github.com/reduxjs/redux-thunk) and [`redux-logger`](https://github.com/LogRocket/redux-logger).
 
 ```jsx
-import {createReducer} from 'react-use';
-import thunk from 'redux-thunk';
+import { createReducer } from 'react-use';
 import logger from 'redux-logger';
+import thunk from 'redux-thunk';
 
 const useThunkReducer = createReducer(thunk, logger);
 
@@ -20,29 +20,35 @@ function reducer(state, action) {
     case 'decrement':
       return { count: state.count - 1 };
     case 'reset':
-      return init(action.payload);
+      return { count: action.payload };
     default:
       throw new Error();
   }
 }
 
-const Demo = () => {
+const Demo = ({ initialCount = 1 }) => {
+  // Action creator to increment count, wait a second and then reset
   const addAndReset = React.useCallback(() => {
     return dispatch => {
       dispatch({ type: 'increment' });
 
       setTimeout(() => {
-        dispatch({ type: 'reset', payload: 1 });
+        dispatch({ type: 'reset', payload: initialCount });
       }, 1000);
     };
-  }, []);
+  }, [initialCount]);
 
-  const [count, dispatch] = useThunkReducer(reducer, 1);
+  const [state, dispatch] = useThunkReducer(reducer, initialCount);
 
   return (
     <div>
-      <p>count: {count}</p>
+      <p>count: {state.count}</p>
       <button onClick={() => dispatch(addAndReset())}>Add and reset</button>
+      <button
+        onClick={() => dispatch({ type: 'reset', payload: initialCount })}
+      >
+        Reset
+      </button>
       <button onClick={() => dispatch({ type: 'increment' })}>+</button>
       <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
     </div>

src/createReducer.ts

@@ -1,4 +1,5 @@
-import { useMemo, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import useUpdateEffect from './useUpdateEffect';
 
 function composeMiddleware(chain) {
   return (context, dispatch) => {
@@ -8,29 +9,44 @@ function composeMiddleware(chain) {
   };
 }
 
-const createReducer = (...middlewares) => (reducer, initialState, initializer = value => value) => {
-  const ref = useRef(initializer(initialState));
-  const [, setState] = useState(ref.current);
-  let middlewareDispatch = (_ = {}) => {
-    throw new Error(
-      'Dispatching while constructing your middleware is not allowed. ' +
-        'Other middleware would not be applied to this dispatch.'
+const createReducer = (...middlewares) => {
+  const composedMiddleware = composeMiddleware(middlewares);
+
+  return (reducer, initialState, initializer = value => value) => {
+    const ref = useRef(initializer(initialState));
+    const [, setState] = useState(ref.current);
+
+    const dispatch = useCallback(
+      action => {
+        ref.current = reducer(ref.current, action);
+        setState(ref.current);
+        return action;
+      },
+      [reducer]
     );
+
+    const dispatchRef = useRef(
+      composedMiddleware(
+        {
+          getState: () => ref.current,
+          dispatch: (...args) => dispatchRef.current(...args),
+        },
+        dispatch
+      )
+    );
+
+    useUpdateEffect(() => {
+      dispatchRef.current = composedMiddleware(
+        {
+          getState: () => ref.current,
+          dispatch: (...args) => dispatchRef.current(...args),
+        },
+        dispatch
+      );
+    }, [dispatch]);
+
+    return [ref.current, dispatchRef.current];
   };
-  const dispatch = action => {
-    ref.current = reducer(ref.current, action);
-    setState(ref.current);
-    return action;
-  };
-  const composedMiddleware = useMemo(() => {
-    return composeMiddleware(middlewares);
-  }, middlewares);
-  const middlewareAPI = {
-    getState: () => ref.current,
-    dispatch: (...args) => middlewareDispatch(...args),
-  };
-  middlewareDispatch = composedMiddleware(middlewareAPI, dispatch);
-  return [ref.current, middlewareDispatch];
 };
 
 export default createReducer;