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

2024年1月20日 228次阅读

目前的方法是将整本书列表连接到Book List Component.但是,通过仅更改状态中的多个字段来渲染大型组件并不高效.我不知道如何映射每个书籍组件连接到每个单独的书籍状态.

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

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

在Book List组件中,我们使用react redux连接列表

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

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

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

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

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

感谢您的预付款,欢迎所有选择

最佳答案 你的第二个例子几乎是正确的.可以声明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中应用程序性能的关键注意事项.

点赞