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

发布时间：2020-12-15 09:36:10 所属栏目：百科来源：网络整理

导读：目前的方法是将整本书列表连接到Book List Component.但是,通过仅更改状态中的多个字段来渲染大型组件并不高效.我不知道如何映射每个书籍组件连接到每个单独的书籍状态. 该项目正在使用redux.像这样的应用程序全局状态 { "books": [ { "field1": "field1","f

目前的方法是将整本书列表连接到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中应用程序性能的关键注意事项.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!