Redux状态更新报错：dispatch内检测到状态突变问题排查

报错信息 #

Uncaught Error: Invariant failed: A state mutation was detected inside a dispatch, in the path: rootReducer.cartReducer.carts.0.qnty

问题根源 #

你写的reducer违反了Redux的核心规则：reducer必须是纯函数，不能直接修改原有状态。

不管是直接操作state.carts[IteamIndex].qnty +=1，还是复制外层state后操作newState.carts[IteamIndex].qnty +=1，本质都是在修改原state里的对象属性——因为carts是数组（引用类型），浅拷贝{...state}只会复制数组的引用，数组里的商品对象还是和原state指向同一个内存地址，修改它们的属性就属于状态突变，触发Redux的检测报错。

正确的Reducer代码 #

const INITIAL_STATE = {
  carts: [],
};

export const cartReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "ADD_CART":
      const itemIndex = state.carts.findIndex(item => item.id === action.payload.id);
      
      if (itemIndex >= 0) {
        // 用map生成新数组，同时创建新的商品对象
        const updatedCarts = state.carts.map((item, index) => 
          index === itemIndex ? { ...item, qnty: item.qnty + 1 } : item
        );
        
        return { ...state, carts: updatedCarts };
      } else {
        const temp = { ...action.payload, qnty: 1 };
        return { ...state, carts: [...state.carts, temp] };
      }

    default:
      return state;
  }
};

关键修改点 #

• 对需要更新的商品，创建新的对象（用{...item}展开原对象，再修改qnty），不碰原对象
• 用map或数组展开[...state.carts]生成新的carts数组，替换原数组
• 所有状态更新都返回全新的对象，彻底避免修改原state的引用类型

另一种等价写法 #

如果觉得map不够直观，也可以用数组展开+对象复制的方式：

if (itemIndex >= 0) {
  // 先复制整个carts数组
  const updatedCarts = [...state.carts];
  // 复制目标商品对象，更新数量后替换数组中的对应项
  updatedCarts[itemIndex] = { 
    ...updatedCarts[itemIndex], 
    qnty: updatedCarts[itemIndex].qnty + 1 
  };
  
  return { ...state, carts: updatedCarts };
}

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