如何在Redux Reducer中无需遍历数组访问并更新likeCount属性？

嘿，我来帮你搞定这两个Redux相关的问题！

其实数组本身是有序集合，要跳过遍历直接拿到特定元素的属性，核心思路是给你的状态加一个「快速查找映射」。

举个例子，如果你当前的state是这样的：

{
  images: [
    { id: 'post1', likeCount: 5, user: { ... } },
    { id: 'post2', likeCount: 12, user: { ... } }
  ]
}

每次要找某个ID的likeCount，都得遍历images数组，效率不高。

你可以把状态改成双结构维护：一个数组存顺序（方便渲染列表），一个对象以帖子ID为键存对应的数据（方便快速查找）：

{
  images: [/* 按展示顺序排列的帖子数组 */],
  imageById: {
    'post1': { id: 'post1', likeCount: 5, user: { ... } },
    'post2': { id: 'post2', likeCount: 12, user: { ... } }
  }
}

这样之后，要访问某个帖子的likeCount，直接写state.imageById[postId]?.likeCount就行，完全不用遍历数组！

当然，维护这个双结构需要在reducer的所有更新逻辑里同步更新数组和映射，但换来的是O(1)的查找效率，对于数据量大的场景特别划算。

先看你现在的代码，其实有几个可以简化和优化的点：

1. 没必要提前拷贝newVote2，map里的image参数就是当前遍历到的元素，直接用它的likeCount就行，不用通过idx去访问拷贝后的数组；
2. 如果user对象没有被修改，不需要做{...image.user}的浅拷贝——Redux只关心你是否修改了需要更新的字段，未修改的引用可以直接复用；
3. 逻辑可以更简洁，提前判断不匹配的情况直接返回原对象，减少嵌套。

优化后的代码大概是这样：

case POST_LIKE_SUCCESS:
  return {
    ...state,
    images: state.images.map(image => {
      // 如果不是目标帖子，直接返回原对象
      if (image.id !== action.data) return image;
      // 只更新likeCount，其他字段复用原引用
      return {
        ...image,
        likeCount: parseInt(image.likeCount) + 1
      };
    })
  };

如果想进一步跳过遍历（比如数组特别大的时候），就可以结合上面说的「双结构」方案，直接找到目标帖子更新，再同步数组：

case POST_LIKE_SUCCESS:
  const targetImage = state.imageById[action.data];
  // 如果找不到对应ID的帖子，直接返回原状态
  if (!targetImage) return state;

  const updatedImage = {
    ...targetImage,
    likeCount: parseInt(targetImage.likeCount) + 1
  };

  return {
    ...state,
    // 更新映射表
    imageById: {
      ...state.imageById,
      [action.data]: updatedImage
    },
    // 同步更新数组（如果需要保持顺序的话）
    images: state.images.map(image => 
      image.id === action.data ? updatedImage : image
    )
  };

这种方式的更新效率是O(1)（映射表更新）+ O(n)（数组更新），但如果你的数组只是用来渲染顺序，其实也可以考虑不维护数组，而是在组件里通过Object.values(state.imageById)来生成列表（如果不需要固定顺序的话），这样连数组的遍历都省了。

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