Redux状态突变致Reducer未捕获Action问题排查

嘿，我来帮你拆解下这个问题～你遇到的状态突变错误和reducer捕获action的异常，核心问题确实出在updateMenuOnAll函数里。你用Object.assign([], menu)做了数组的浅拷贝，但数组内的对象还是和原状态里的对象共享引用，直接修改item.onClick其实是在篡改Redux的原始状态，这就触发了Redux的状态突变检测机制，抛出了那个错误。至于UPDATE_CATEGORIES_SUCCESS没被捕获的错觉，大概率是这个突变错误先抛出，中断了后续流程，让你误以为action没被处理，但实际上reducer的逻辑是没问题的。

具体修复步骤 #

1. 修复updateMenuOnAll函数

把直接修改数组元素对象的逻辑，改成返回全新的对象数组：

export function updateMenuOnAll(menu, click) {
  // 用map生成新数组，每个元素都是全新的对象，彻底切断原引用
  return menu.map(item => ({
    ...item, // 用扩展运算符复制原对象的所有属性
    onClick: click // 覆盖目标属性
  }));
}

为什么原来的方法不行？

• Object.assign([], menu)只是创建了一个新数组壳子，但数组里的每个item还是和原数组的对象共享内存地址。
• 你在map里直接执行item.onClick = true，本质上还是在修改Redux原始状态里的对象，违反了Redux「状态不可变」的核心原则。

2. 验证其他逻辑

你的reducer代码是符合规范的：

case actionTypes.UPDATE_CATEGORIES_SUCCESS:
  return Object.assign({}, state, {categories: action.categories});

这里通过Object.assign创建了新的state对象，替换categories属性，完全符合不可变更新的要求。

组件里的调用逻辑也没有问题，只要updateMenuOnAll返回了全新的数组，dispatch之后reducer就能正确处理，状态突变的错误也会随之消失。

额外开发建议 #

在Redux开发中处理数组和对象更新时，一定要牢记：

• 数组更新：优先用map、filter、concat或者扩展运算符[...arr]创建新数组，绝不直接修改原数组。
• 对象更新：优先用Object.assign({}, obj, {key: newValue})或者扩展运算符{...obj, key: newValue}创建新对象，绝不直接修改原对象。

这样就能从根源上避免状态突变的问题啦～

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