Redux状态变更时组件未重新渲染问题排查

我看到你遇到了Redux状态更新后组件没触发重新渲染的问题，而且你确信自己没直接修改状态——其实这里藏着一个很容易踩的不可变性坑，咱们一步步拆解：

先看你提供的代码片段：

组件（Domain）部分：

<Add onClick={() => { 
  domain.routes.push({ from: "foo", to: "bar" }); 
  this.props.setDomain(this.props.domainIndex, domain); 
}} />

reducer部分：

case 'SET_DOMAIN': 
  let tmpState = {...state} 
  tmpState.domains[action.index] = action.value; 
  return {...tmpState}

action部分：

export const setDomain = (index, domain) => ({ 
  type: 'SET_DOMAIN', 
  value: domain, 
  index: index 
})

问题根源：你其实已经修改了原状态！ #

你以为domain.routes.push(...)没碰原状态，但这里的domain是从this.props里拿到的Redux状态对象的直接引用，push方法会直接修改原数组——这就违反了Redux的不可变原则。

之后你把这个已经被修改的domain传给setDomain，reducer里虽然用了扩展运算符展开state，但tmpState.domains[action.index] = action.value只是把同一个引用塞回了新状态里。Redux是通过浅比较判断状态变化的，只要引用没改变，它就会认为状态没更新，自然不会触发组件重新渲染。

修复方案：严格遵循不可变更新原则 #

1. 组件层：创建新对象/数组，不碰原状态引用

把组件里的点击逻辑改成这样，完全基于原状态生成新的引用：

<Add onClick={() => { 
  // 用扩展运算符创建新的routes数组，添加新元素
  const updatedRoutes = [...domain.routes, { from: "foo", to: "bar" }];
  // 创建新的domain对象，替换routes属性
  const updatedDomain = { ...domain, routes: updatedRoutes };
  // 把新对象传给action
  this.props.setDomain(this.props.domainIndex, updatedDomain); 
}} />

这里完全没有修改原状态的任何属性，所有更新都通过创建新引用完成。

2. Reducer层：优化写法，确保深层不可变性

你的reducer写法其实在action.value是新对象时可以工作，但为了更严谨（比如以后修改更深层属性时），可以改成直接创建新的domains数组：

case 'SET_DOMAIN': 
  return {
    ...state,
    domains: [
      ...state.domains.slice(0, action.index),
      action.value,
      ...state.domains.slice(action.index + 1)
    ]
  };

这种写法直接生成新的数组替换原数组，彻底避免了任何引用复用的问题。

总结 #

Redux和React的状态更新依赖引用变化来触发重新渲染，核心原则就是：永远不要直接修改状态里的对象/数组，所有更新都要通过创建新的引用实现。只要守住这条规则，类似的渲染问题就不会再出现了。

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