reactjs - 如何使用react redux单独连接数组的每个元素

Question

当前的方法是将整个图书列表连接到图书列表组件中。然而，仅通过改变状态中的几个字段来渲染巨大的组件并不有效。 我不知道如何将每个图书组件映射到每个单独的图书状态。

该项目正在使用redux。应用程序全局状态如下

{
  "books": [
    {
      "field1": "field1",
      "field2": "field2",
      "field3": "field3",
    } ...
  ]
}

在Book List组件中，我们使用react redux将list与其连接起来

export default connect(state => ({
  books: state.books
}))(BookListComponent);

现在需求发生变化，书中的字段不会经常改变。问题是，如果一个字段发生更改，它将更新整个 BookListComponent。这不是我所期望的高性能组件。

我想将连接逻辑推送到单个 Book 组件，以便使用 reselect

国家没有这本书的索引，我不知道如何编写连接使其工作

export default connect(state => ({
  books[index]: state.books[index]
}))(BookListComponent);

感谢您的提前，欢迎所有选择

Answer 1

你的第二个例子几乎是正确的。可以将 mapState 函数声明为采用两个参数而不是一个参数。如果声明了两个参数，Redux 将使用提供给包装器组件的 props 调用 mapState 函数。因此，列表项的 mapState 函数将是:

const mapState = (state, ownProps) => {
    const book = state.books[ownProps.index];
    return {book}
}

我的博文Practical Redux, Part 6: Connected Lists, Forms, and Performance显示了如何执行此操作的一些示例，并讨论了 Redux 中应用程序性能的关键考虑因素。