Redux Toolkit批量更新数组对象：为何组件未多次重渲染？

背景信息 #

Store 结构 #

userStories:  {
  userId1: [{storyId: 1, viewedBy: [id5, id2, id9]}, {storyId: 2, viewedBy: [id1, id2, id3]}],
  userId2: [{storyId: 6, viewedBy: [id25, id42, id29]}, {storyId: 7, viewedBy: [id21, id22, id33]}]
}

组件订阅逻辑 #

const stories = useSelector((state) => state.stories.userStories[userId])

Reducer 更新逻辑 #

updateStoryViewedBy: (state, action) => {
  const { storyIds, storyCreatorId} = action.payload
  const stories = state.userStories[storyCreatorId]

  // 遍历所有storyId，找到对应故事并逐个更新
  storyIds.forEach((id) => {
      const s = stories?.find((s) => s?._id === id)
      s.isSeen = true
  })
},

问题 #

1. 为何组件未触发n次重渲染？（n为storyIds数组长度）
2. 在Redux Toolkit的reducer中使用循环逐个更新数组对象是否存在问题？
3. 使用state.userStories[userId] = state.userStories[userId].map(...)这种一次性更新、避免直接修改的方式是否更优？

解答 #

1. 组件未触发n次重渲染的原因 #

Redux的状态更新以dispatch的触发次数为单位，而非reducer内的修改次数。你仅dispatch了一次updateStoryViewedBy动作，无论在reducer内循环修改多少次对象，Redux只会执行一次完整的状态更新流程，触发一次组件重渲染检查。

另外，Redux Toolkit内部依赖Immer库追踪“可变”写法的修改，最终生成新的不可变状态，但整个过程在单次dispatch中完成，组件只会收到一次状态变更通知，因此不会触发n次重渲染。

2. 循环逐个更新数组对象的问题 #

循环本身没有问题，核心问题是直接修改原对象的写法：

• 若storyCreatorId对应的用户不存在，stories会是undefined，此时stories?.find返回undefined，执行s.isSeen = true会抛出错误，当前代码未做容错处理。
• 这种写法违背了Redux传统的不可变更新思维，可读性差，其他开发者可能误以为这是非法的直接修改state操作。

3. 使用map一次性更新的方式是否更优 #

是的，这种方式更优，理由如下：

• 符合不可变规范：map方法返回新数组，原数组不受修改，完全遵循Redux的不可变状态原则，代码意图清晰。
• 容错性更强：即使目标storyId不存在，map会保留原对象，不会出现修改undefined的风险。
• 性能更可控：一次性生成新数组，Immer的追踪成本更低，状态变更的边界更明确。

优化后的示例代码：

updateStoryViewedBy: (state, action) => {
  const { storyIds, storyCreatorId } = action.payload
  const targetStories = state.userStories[storyCreatorId]
  if (!targetStories) return

  state.userStories[storyCreatorId] = targetStories.map(story => {
    return storyIds.includes(story._id) 
      ? { ...story, isSeen: true }
      : story
  })
},

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