Redux Store已更新但关联组件未触发重渲染问题求助

本质是Redux不可变更新规则被意外破坏，结合react-redux的浅比较机制，共同导致了组件无法被自动触发重渲染。

关联运行机制 #

• react-redux的connect默认通过浅比较逻辑判断是否需要调度组件重渲染：每次store发生变更时，会重新执行mapStateToProps拿到新的props对象，逐键对比新旧props的引用地址，只有当某个键的引用发生变化时，才会触发组件更新；仅修改对象内部属性、不改变引用的操作，完全不会被检测到。
• 你当前场景的具体触发路径：
  1. 首次组件挂载触发API请求，响应返回后dispatch对应action，reducer通过顶层浅拷贝把响应对象存入state.assessment，此时state.assessment的引用发生变化，connect检测到差异，触发组件首次render，也就是你观察到的初始状态打印。
  2. 后续业务运行过程中，你在某段代码逻辑（可能是全局请求拦截器、组件内部的业务处理分支、其他关联reducer的逻辑）中，直接对之前存入store的同一个assessment对象做了属性原地修改，没有生成新的对象副本。此时整个store的状态树引用没有发生任何变化，react-redux的订阅逻辑不会重新执行mapStateToProps、也不会做props对比，自然不会主动调度组件重渲染。
  3. Redux DevTools能捕捉到状态更新的原因，是它直接实时读取store对象的内存值，哪怕是对象内部属性的原地修改，也能被它捕获并展示为状态更新，给人“store已经正确更新但组件不渲染”的错觉。
• 你观察到的“组件内部点击按钮触发自身setState时，可以读到最新Redux props”的现象，也完全匹配这个逻辑：组件自身的setState会强制走组件重渲染流程，执行render时读取的this.props.assessment本来就是那个被原地修改过的对象，因此能拿到最新属性值，但整个过程connect层从来没有收到过需要主动重渲染的信号。

修复方向 #

• 逐行排查所有对assessment对象的操作，重点检查：
  • API返回的响应对象，是否在进入reducer前就被全局拦截器做了原地修改
  • 组件内部的业务逻辑中，是否直接对this.props.assessment的属性做赋值修改
  • 其他关联reducer的处理逻辑中，是否直接修改了同一个assessment对象的属性
• 所有状态更新严格遵循Redux不可变规则：修改状态时先生成目标对象的拷贝再替换，保证每次更新后被修改的状态属性引用发生变化。比如在对应reducer中，可以对传入的payload做一层拷贝后再存储，确保引用唯一：

  case GET_ASSESSMENT_INFO:
    return { ...state, assessment: { ...action.payload } }
  

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