React组件挂载卸载时Redux状态更新异常的解决方案咨询

问题场景与代码 #

组件需求：挂载时将Redux中对应symbol的计数+1，卸载时-1。但当前实现存在闭包问题，卸载时使用的是首次渲染的旧状态，导致计数错误。

原组件代码：

function SomeComponent({ symbol = "BLUE" }) {
  const { syncedState, setSyncedState } = useSyncedStore("Test");

  useEffect(() => {
    setSyncedState({ symbols: addSymbolToMap({ ...syncedState.symbols }, symbol) });
    return () => {
      setSyncedState({ symbols: removeSymbolFromMap({ ...syncedState.symbols }, symbol) });
    };
  }, []);
}

相关Redux封装代码：

// Redux Slice
const syncedStoreSlice = createSlice({
  name: "syncedStore",
  initialState: initialState,
  reducers: {
    updateSyncedStore: (state, action) => {
      const { name, newState } = action.payload;
      state[name] = { ...state[name], ...newState };
    },
  },
});

// Custom Hook
function useSyncedStore(widgetName) {
  const dispatch = useDispatch();
  const syncedState = useSelector((state) => state.syncedStore[widgetName]) ?? {};

  const setSyncedState = (val) => {
    dispatch(updateSyncedStore({widgetName, newState: val}));
  };

  return { syncedState, setSyncedState };
}

// 计数工具函数
export const addSymbolToMap = (map, symbol) => {
  if (map.hasOwnProperty(symbol)) {
    map[symbol]++;
  } else {
    map[symbol] = 1;
  }
  return map;
};

export const removeSymbolFromMap = (map, symbol) => {
  if (map.hasOwnProperty(symbol)) {
    map[symbol]--;
    if (map[symbol] <= 0) {
      // delete map[symbol];
    }
  }
  return map;
};

问题原因 #

• useEffect的空依赖数组导致闭包捕获的是组件首次渲染时的syncedState，后续Redux状态更新后，组件未重渲染（无状态监听），卸载时清理函数仍使用旧状态值计算。
• 添加syncedState到依赖数组会触发无限循环：每次状态更新触发组件重渲染，进而重新执行useEffect，再次更新状态。

解决方案：使用函数式更新获取最新状态 #

核心思路是让setSyncedState支持传入函数，在函数内部直接获取Redux中的最新状态计算，彻底摆脱闭包旧值限制。

步骤1：修改自定义Hook支持函数式更新 #

利用Redux的getState方法获取最新状态，处理函数式更新逻辑：

import { useDispatch, useSelector, useStore } from 'react-redux';

function useSyncedStore(widgetName) {
  const dispatch = useDispatch();
  const store = useStore(); // 获取Redux store实例
  const syncedState = useSelector((state) => state.syncedStore[widgetName]) ?? {};

  const setSyncedState = (updater) => {
    dispatch((dispatch, getState) => {
      // 获取Redux中最新的状态
      const currentState = getState().syncedStore[widgetName] ?? {};
      // 处理函数式或对象式更新
      const newState = typeof updater === 'function' 
        ? updater(currentState) 
        : updater;
      dispatch(updateSyncedStore({ widgetName, newState }));
    });
  };

  return { syncedState, setSyncedState };
}

步骤2：修改组件中的useEffect调用 #

使用函数式更新替代直接依赖闭包中的syncedState，并添加symbol到依赖数组（避免symbol变化时使用旧值）：

function SomeComponent({ symbol = "BLUE" }) {
  const { setSyncedState } = useSyncedStore("Test");

  useEffect(() => {
    // 挂载时：基于最新状态+1
    setSyncedState((current) => ({
      symbols: addSymbolToMap(current.symbols ?? {}, symbol)
    }));
    
    // 卸载时：基于最新状态-1
    return () => {
      setSyncedState((current) => ({
        symbols: removeSymbolFromMap(current.symbols ?? {}, symbol)
      }));
    };
  }, [symbol, setSyncedState]); // setSyncedState是稳定函数，不会触发额外重渲染
}

步骤3：优化工具函数（消除副作用） #

原工具函数直接修改传入的map对象，优化为纯函数：

export const addSymbolToMap = (map, symbol) => {
  const newMap = { ...map };
  newMap[symbol] = (newMap[symbol] || 0) + 1;
  return newMap;
};

export const removeSymbolFromMap = (map, symbol) => {
  const newMap = { ...map };
  if (newMap[symbol]) {
    newMap[symbol] -= 1;
    if (newMap[symbol] <= 0) {
      delete newMap[symbol];
    }
  }
  return newMap;
};

效果验证 #

• 挂载5个SomeComponent，Redux状态会正确显示{BLUE: 5}
• 卸载2个组件后，状态自动更新为{BLUE: 3}
• 不会出现无限渲染循环，且始终基于最新状态计算

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