Redux Reducer映射新数组或使用Immer后未触发重渲染问题

以下是几种可能导致该问题的原因，以及对应的排查方向：

1. 组件未正确订阅目标状态 #

• 若使用React-Redux的useSelector，需确认选择器正确获取了activeGroups状态：

  // 正确示例
  const activeGroups = useSelector(state => state.activeGroups);
  

  避免在选择器中返回与之前相同的引用（比如错误地复用了旧数组/对象）。
• 若使用connect高阶组件，检查mapStateToProps是否正确映射activeGroups，且没有通过浅比较遗漏状态变化（比如返回的对象中activeGroups引用未更新）。

2. Action未被正确触发或状态未更新到Store #

• 在reducer的return newState前添加日志，确认新状态已正确生成（目标group的pods数组已新增元素，且newState是全新数组引用）：

  console.log('Generated new state:', newState);
  console.log('New state reference:', newState !== state); // 应输出true
  

• 借助Redux DevTools查看groups/createPod/fulfilled action是否被正确dispatch，以及Store中的activeGroups状态是否确实更新。

3. Immer使用冗余操作 #

Immer的produce方法本身会返回不可变的新状态，无需额外执行JSON.parse(JSON.stringify(nextState))——这步操作不仅多余，还可能因序列化丢失数据（比如函数、Symbol类型），建议直接返回produce的结果：

case 'groups/createPod/fulfilled': {
  const nextState = produce(state, (draft) => {
    const group = draft.find((e) => e.id === action.payload.groupId);
    if (group) {
      group.pods.unshift(action.payload.pod);
    }
  });
  return nextState;
}

4. 组件依赖项或缓存问题 #

• 若组件使用了React.memo，需确认其比较函数（或默认浅比较）能检测到activeGroups的变化——因为activeGroups是新数组引用，默认浅比较应该能识别，但如果组件接收的是activeGroups内部的单个group，需确保传递的是更新后的group引用。
• 检查组件中是否有自定义的缓存逻辑（比如useMemo），错误地缓存了旧的状态值，导致组件未使用新状态渲染。

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