如何更新Redux Slice？用户金币更新功能故障求助

核心问题 #

1. 闭包状态捕获错误：useEffect依赖数组为空，内部的user和gold始终是组件初始化时的初始值。即便页面内通过函数式setGold累加金币，卸载执行清理函数时，依然只能拿到初始的gold（0），同步到Redux的计算自然无效。
2. 依赖缺失：dispatch和user未加入依赖数组，既不符合React Hooks规范，也会导致闭包无法捕获最新的Redux用户状态。
3. 定时器重复创建风险：如果直接把gold加入依赖，每次金币更新都会重建定时器，导致计时混乱。

修复代码 #

组件部分 #

const [chrono, setChrono] = useState<number>(0);
const user: any = useSelector((state: any) => state.user);
const dispatch = useDispatch();
const [gold, setGold] = useState(0);
// 用ref保存最新的累计金币，绕过闭包陷阱
const goldRef = useRef(0);

useEffect(() => {
  const timer = setInterval(() => {
    const newGold = goldRef.current + 100;
    goldRef.current = newGold;
    setGold(newGold);
  }, 10000);

  // 组件卸载时同步累计金币到Redux
  return () => {
    dispatch(userSlice.actions.update({
      ...user,
      gold: user.gold + goldRef.current
    }));
    clearInterval(timer);
  };
}, [dispatch, user]); // 依赖dispatch和最新的user状态

关键说明 #

• 使用goldRef跟踪累计金币的最新值，避免闭包对gold状态的捕获限制，确保卸载时能拿到正确的累加结果。
• 将dispatch和user加入依赖数组，保证清理函数能获取到最新的Redux用户状态，同步时计算正确的总金币。
• 定时器仅在组件挂载时创建一次，卸载时清除，避免重复创建导致的计时错误。

页面实时显示处理 #

页面内要展示实时累加的金币，需渲染user.gold + gold，结合Redux中的原始金币和页面内的累计值：

<div>当前实时金币：{user.gold + gold}</div>

Reducer部分（无需修改） #

你的reducer逻辑正常，它会将传入的payload合并到state中，确保Redux状态更新正确。

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