React-Redux状态已更新但视图未更新问题求助（Todo应用场景）

我来帮你拆解这个问题——核心在于Redux对状态不可变性的要求，以及React-Redux和React组件如何检测状态变化来触发重渲染。

先看两种实现的本质差异 #

尝试1的问题 #

var stateClone = [...state];
stateClone[action.index].status = !stateClone[action.index].status;
return stateClone;

你用[...state]做了数组的浅拷贝，这一步没问题，但数组里的每个任务对象还是原状态的引用。当你修改stateClone[action.index].status时，你其实直接修改了原Redux状态树里的对象（因为浅拷贝的数组元素和原数组指向同一个对象）。

这就违反了Redux的不可变更新原则：你没有创建新的任务对象，只是修改了现有对象的属性。

而React-Redux的connect默认会用浅比较（shallowEqual）来判断是否需要重新渲染组件：

• 对于数组，浅比较会检查数组的引用是否变化（你的stateClone是新数组，这一步过了）
• 但如果你的TaskItem组件是PureComponent或者用了React.memo，它会浅比较传入的task props。因为task对象的引用没变化，即使status属性变了，TaskItem会认为props没更新，所以不会重新渲染，这就是你看到视图没变化的原因。

尝试2为什么能工作？ #

var cloneTask = {...state[action.index]}
cloneTask.status = !cloneTask.status;
state[action.index] = cloneTask
localStorage.setItem('tasks', JSON.stringify(state));
return [...state];

这里你先做了任务对象的浅拷贝，得到了一个新的对象引用。虽然中间你直接修改了原state数组（这其实是Redux reducer里的错误操作，reducer绝对不能修改原状态！），但最后你返回了[...state]——一个新的数组引用，且对应的任务元素是新对象。

这时候：

• connect检测到tasks数组是新引用，会触发TaskList重渲染
• TaskItem拿到的task是新对象，浅比较能检测到props变化，所以会重新渲染，更新颜色。

不过要注意：尝试2里的state[action.index] = cloneTask是错误的！Reducer必须是纯函数，绝对不能修改传入的原state参数，你应该直接创建新数组，不要碰原state。

正确的Reducer实现方式 #

推荐两种规范的不可变更新写法，既符合Redux要求，又能确保组件正确重渲染：

方式1：用map遍历数组 #

return state.map((task, index) => {
  if (index === action.index) {
    // 返回新的任务对象，修改status
    return { ...task, status: !task.status };
  }
  // 其他任务返回原对象，避免不必要的引用变化
  return task;
});

方式2：用slice拼接新数组 #

const targetIndex = action.index;
// 拷贝目标任务并修改status
const updatedTask = { ...state[targetIndex], status: !state[targetIndex].status };
// 拼接新数组：前半部分 + 更新后的任务 + 后半部分
return [
  ...state.slice(0, targetIndex),
  updatedTask,
  ...state.slice(targetIndex + 1)
];

这两种写法都严格遵循了不可变原则：

• 不修改原状态数组或原任务对象
• 只创建需要更新的新对象和新数组

这样React-Redux的浅比较能准确检测到状态变化，你的TaskItem组件也会正确触发重渲染，切换颜色。

额外提醒 #

1. 永远不要在Reducer里修改原state参数，Reducer必须是纯函数，只依赖传入的state和action，返回新状态。
2. 如果你的TaskItem不是纯组件，尝试1可能也能工作，但这不是正确的做法——不可变更新是Redux的核心原则，能避免很多难以排查的状态问题。

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