Redux 按索引读取数组元素

Question

我有一个存储在 redux 中的 post 对象数组。我正在映射帖子，并将 ID 和索引传递给 Post 组件：

posts.map((post, index) => {
  <Post id={post.id} index={index} />
});

redux style guide 声明：

希望有更多 UI 组件订阅 Redux 存储并以更精细的级别读取数据...

例如，不只是连接一个<UserList> 组件并读取整个用户数组，而是让<UserList> 检索所有用户ID 的列表，将列表项呈现为<UserListItem userId={userId}>，并连接<UserListItem>并从商店中提取自己的用户条目。

但是，我没有 postId 列表，但我仍在尝试通过映射帖子并传递对帖子组件的引用而不是帖子本身来订阅更多组件。 （这是个好主意吗？）

我的问题是关于我应该如何阅读来自商店的帖子。无论是按 ID 还是按索引：

1. post = state.posts.find(post => post.id === props.id)
2. post = state.posts[props.index]

显然，按索引读取会快得多。但是帖子数组可以重新排序。所以我想知道map函数创建的索引是否可靠？

Answer 1

redux 风格指南只是一个风格指南。即使他们建议迭代一个 id 列表，如果你有一个组件列表，你也可以迭代它。

这里唯一的“问题”是您的应用程序可能会随着时间的推移变得越来越复杂，并且以后可能难以维护。

如果您仍然想通过 id 查找帖子，find 方法很好，如果您的商店中没有数百件商品，应该不会有问题。

如果你想做第二种解决方案，你可以把你的reducer中的store改成这样：

  function reducer(action, state) {
    switch (action.type) {
      case 'YOUR_CASE': {
        return {
          ...state,
-         itemList: action.itemList,
+         itemList: Object.fromEntries(
+           action.itemList.map(item => ([item.id, item]))
+         ),
        }
      }
    }
  } 

然后，您的商店中就会有这样的对象：

{
  1: {
    id: 1,
    title: 'some item',
  },
  2: {
    id: 2,
    title: 'some other item',
  },
}

注意Object.fromEntries 只是一个recent API，您可能需要填充它。

您当然需要像这样更改之前使用itemList 作为数组的所有调用：

- itemList: state.itemList,
+ itemList: Object.values(state.itemList),