fix(useReducerWithMiddleware): should use the computed next state, because useEffect does not guaranetee that it is the same state

Author: rwieruch

src/common/util/useReducerWithMiddleware/index.ts

@@ -11,13 +11,16 @@ const useReducerWithMiddleware = (
 ): [State, (action: Action) => void] => {
   const [state, dispatch] = React.useReducer(reducer, controlledState);
 
+  const sRef = React.useRef<State | null>(null);
   const aRef = React.useRef<Action | null>(null);
 
   const dispatchWithMiddleware = (action: Action) => {
     middlewareFns.forEach((middlewareFn) =>
       middlewareFn(action, state, context ? context.current : undefined),
     );
 
+    const nextState = reducer(state, action);
+    sRef.current = nextState;
     aRef.current = action;
 
     dispatch(action);
@@ -27,10 +30,11 @@ const useReducerWithMiddleware = (
     if (!aRef.current) return;
 
     afterwareFns.forEach((afterwareFn) =>
-      afterwareFn(aRef.current!, state, context ? context.current : undefined),
+      afterwareFn(aRef.current!, sRef.current!, context ? context.current : undefined),
     );
 
     aRef.current = null;
+    sRef.current = null;
   }, [context, afterwareFns, state]);
 
   return [state, dispatchWithMiddleware];