useReducer中dispatch调用顺序异常问题排查

核心原因：闭包捕获的旧状态快照 #

你遇到的状态分叉问题，本质是useEffect清理回调通过闭包捕获了旧的state快照，导致两次dispatch分别作用于不同的状态版本：

• 当你触发actionA后，组件开始更新到state2，但在这次更新完成前，旧的useEffect清理回调会执行——这个清理回调是在state1的渲染周期中创建的，它捕获的state是state1，而非即将更新的state2。
• 所以清理回调里的dispatch(actionB)会基于state1生成状态4；而外部的dispatch(actionA)则基于state1生成state2，最终出现两个独立的状态分支，而非你预期的线性流转。

useEffect清理回调的状态机制细节 #

useEffect的清理回调有两个关键特性：

• 闭包绑定渲染周期：清理函数属于创建它的那次渲染，会捕获该渲染周期内的所有变量（包括state、props），后续的状态更新不会影响它内部的变量引用。即使组件没有卸载，只要依赖项变化，旧的清理回调就会执行，且携带的是旧的状态快照。
• 执行时机：清理回调会在组件下一次渲染之前执行（或者组件卸载时）。也就是说，当你触发actionA导致状态更新时，旧的useEffect清理回调会先执行，然后组件才会渲染state2。这就导致dispatch(actionB)的执行时机早于actionA触发的状态更新完成，而actionB携带的是旧state，最终和actionA的更新形成分叉。

解决方案：让操作基于最新状态 #

要避免这种状态分叉，你需要确保所有dispatch的action都基于最新状态，而非闭包捕获的旧快照，可通过两种方式实现：

• 在reducer中处理逻辑：如果actionB的执行依赖于最新状态，不要在清理回调中依赖闭包的state，而是让reducer接收action时，直接基于当前最新的state处理。比如将actionB设计为不需要携带旧状态的参数，或者在reducer内部计算所需的状态变化。
• 使用ref保存最新状态：如果必须在清理回调中获取最新状态，可以用useRef实时同步state，这样清理回调就能访问到最新的state值：

const [state, dispatch] = useReducer(reducer, initialState);
const latestStateRef = useRef(state);

useEffect(() => {
  latestStateRef.current = state;
}, [state]);

useEffect(() => {
  return () => {
    // 使用latestStateRef.current获取最新状态
    dispatch({ type: 'ACTION_B', payload: latestStateRef.current });
  };
}, [dispatch]);

内容的提问来源于stack exchange，提问作者vbezhenar