Redux store更新后connect连接的React组件未触发重渲染

你遇到的不重渲染问题，核心是Reducer里的更新逻辑违反了Redux的不可变更新规则，React-Redux的connect方法默认会对mapStateToProps返回的props做浅比较，只有检测到props的引用变化才会触发组件重渲染，你的代码刚好踩了直接修改原state引用的坑：

• 代码let updated_profile_with_new_education = state.profile;没有创建新对象，只是让新变量指向了原有profile的内存地址
• 后续直接修改这个变量的education属性，本质是直接篡改了Store中旧state的profile对象，没有生成新的状态
• 最终返回的state里，profile字段指向的还是原来的旧对象内存地址，浅比较时判定新旧props没有差异，自然不会触发组件重渲染。

修改profileReducer.js中ADD_EDUCATION的处理逻辑，确保每一层更新都生成新的对象引用，不要直接修改原state：

const initialState = {
  profile: null,
};

case ADD_EDUCATION:
  return {
    ...state,
    profile: {
      ...state.profile,
      education: action.payload.updated_education
    }
  }

上述逻辑做了两层浅拷贝：

1. 外层拷贝state，和你原有逻辑一致
2. 内层拷贝原有profile对象生成全新的内存地址，再覆盖最新的education字段
   浅比较时会检测到profile的引用和旧值不一致，就会正常触发组件重渲染。

额外提一个你组件里的冗余逻辑：你在render里已经给education做了兜底const education = !!this.props.profile ? this.props.profile.education : [];，education要么是数组要么是空数组，永远是真值，后面写的{!!education && education.map(...)}这个判断完全多余，可以直接写education.map(...)。

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