多React组件Redux状态分发顺序异常问题求助

原代码 #

React组件 #

function FooComponent() {
  const dispatch = useDispatch();
  const reduxState = useSelector((state) => state.store);

  useEffect(() => {
    dispatch(updateStore({FooComponent: reduxState.FooComponent + 1}));
    return () => {
      dispatch(updateStore({FooComponent: reduxState.FooComponent - 1}));
    };
  }, []);

  return <>></>;
}

Redux切片 #

const reduxSlice = createSlice({
  name: "reduxStore",
  initialState: {},
  reducers: {
    updateStore: (state, action) => {
      state = action.payload;
    },
  },
});

问题原因 #

1. 闭包捕获旧状态：useEffect依赖数组为空，组件挂载时仅读取一次reduxState，所有N个组件拿到的都是初始空对象（reduxState.FooComponent为undefined，计算时被当作0）。
2. 竞态覆盖：所有组件同时dispatch基于旧状态计算的{FooComponent: 1}，Redux处理这些action时，最终只会保留最后一次的赋值结果，导致store中值为1而非N。
3. 原reducer隐藏bug：state = action.payload是局部变量赋值，不会触发Redux Toolkit的immer状态更新，原代码本身就无法正确修改状态。

解决方案：函数式更新（最小改动） #

1. 微调Redux切片（兼容原有调用） #

仅修改updateStore的reducer逻辑，支持接收函数作为payload，同时保留原对象传参的兼容性：

const reduxSlice = createSlice({
  name: "reduxStore",
  initialState: {},
  reducers: {
    updateStore: (state, action) => {
      // 兼容函数式和对象式payload
      const newState = typeof action.payload === 'function' 
        ? action.payload(state) 
        : action.payload;
      // 返回合并后的新状态（或直接修改state属性）
      return {...state, ...newState};
    },
  },
});

2. 修改组件dispatch逻辑 #

传入函数代替直接计算好的对象，让每个dispatch都基于当前最新store状态计算：

function FooComponent() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(updateStore(prevState => ({
      FooComponent: (prevState.FooComponent || 0) + 1
    })));
    
    return () => {
      dispatch(updateStore(prevState => ({
        FooComponent: (prevState.FooComponent || 0) - 1
      })));
    };
  }, []);

  return <>></>;
}

方案优势 #

• 改动极小：仅对切片reducer做几行修改，原有传对象的调用方式完全不受影响。
• 解决竞态：函数式更新确保每个dispatch都获取最新store状态，最终store中FooComponent的值会正确累加为N。
• 修复原bug：同时解决了原reducer无法正确更新状态的问题。

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