Redux修改Map类型状态后未触发组件重渲染该如何解决

问题核心原因 #

Redux 依赖不可变数据更新逻辑判断是否需要触发组件重渲染，你的代码两处违反了不可变原则，导致状态引用地址未发生变化，Redux 判定状态无更新，因此不会触发重渲染：

• 你在likeIt方法中直接对 Redux 返回的原 Map 实例调用set方法，Map 是引用类型，set会修改原实例本身，修改后引用地址没有变化
• Reducer 中使用Object.assign(state, action.payload)时，第一个参数传入了原 state，会将 payload 合并到原 state 对象上，最终返回的还是原 state 的引用，Redux 浅比较时会认为状态未改变

修复步骤 #

1. 首先修改likeIt方法的 Map 操作逻辑，必须先克隆原 Map 创建新实例，禁止直接修改原状态：

const likeIt = (item, index) => {
  // 基于原Map创建新的实例
  const newLikes = new Map(props.likesAndSaved)
  if(newLikes.has(item.id)){
    newLikes.set(item.id, {like: true, saved: newLikes.get(item.id).saved})
  } else{
    newLikes.set(item.id, {like: true, saved: false})
  }
  props.replaceAllLikesAndSaved(newLikes)
}

注意：对应的unLikeIt方法也需要按相同逻辑修改，所有修改 Map 的操作都要先克隆原实例再操作新实例。

2. 修改 Reducer 逻辑，直接返回新的状态实例即可：

function likesAndSavedReducer(state = new Map(), action) {
  switch (action.type) {
    case 'replaceAllLikesAndSaved':
      // 直接返回传入的新Map实例
      return action.payload
    default:
      return state;
  }
}

如果已经单独定义了初始状态likesAndSaved，请确保它的初始值是new Map()实例即可。

修改完成后每次状态更新都会返回新的引用，Redux 就可以正常识别状态变化，触发组件重渲染。

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