useReducer实现的购物车计数器生产环境失效，本地运行正常

云原生阿岚

2026-8-13

问题分析与解决方案

你的计数器在生产环境失效的核心问题出在reducer的状态更新逻辑上，具体是使用了错误的自增/自减写法：

错误代码问题点

const reducer = (state: CountType, action: ActionType) => {
  switch (action.type) {
    case ActionTypes.Add:
      return { count: state.count++ }; // 错误：原地修改+返回旧值
    case ActionTypes.Subtract:
      if (state.count === 1) return state;
      else return { count: state.count-- }; // 错误：原地修改+返回旧值
    // ...
  }
};

state.count++和state.count--属于原地修改原状态对象，并且这两个运算符的返回值是自增/自减之前的数值，导致你返回的新状态和原状态的count值没有变化。React依赖状态的引用变化来触发组件重渲染，原地修改状态不会让React检测到更新，因此计数器数值不会变化。

开发环境下React的严格模式可能会重复调用reducer，偶然掩盖了这个问题，但生产环境的优化会让这个问题直接暴露。

修复后的reducer代码

const reducer = (state: CountType, action: ActionType) => {
  switch (action.type) {
    case ActionTypes.Add:
      return { count: state.count + 1 }; // 返回新值，不修改原state
    case ActionTypes.Subtract:
      if (state.count <= 1) return state;
      return { count: state.count - 1 }; // 返回新值，不修改原state
    case ActionTypes.Reset:
      return { count: 1 };
    default:
      return state;
  }
};