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

Question

目前的做法是将整个书单连接成书单组件。但是，仅通过更改状态中的几个字段来渲染巨大的组件并不是很有效。我不知道如何将每个 book 组件连接到每个单独的 Book state。

该项目正在使用redux。应用程序全局状态是这样的

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

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

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

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

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

国家没有书的索引，我不知道如何编写connect来使它工作

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

感谢提前，欢迎所有选项

Answer 1

您可以连接任何您喜欢的组件。没有硬性规定只能连接顶级组件。

虽然连接顶级组件和向下传递道具会对性能造成影响，但我还没有看到它会产生明显的不利影响。在我看来，能够通过代码跟踪数据的好处总是值得的。这里有一个讨论。