在redux商店中处理"选定"项目的正确方法

Question

当您需要保留项目列表和所选项目时,我想听听有关构建redux store的意见.

一个例子.给出同一页面上的项目列表和所选项目详细信息.用户应该能够从列表中选择一个项目.选择项目时,应加载有关它的详细信息.当所选项目更新时,它应该在细节和列表中更新(例如,如果项目的名称被更改,那么它也应该在列表中可见).应从后端获取所有数据,并且列表中的项目模型与所选项目模型不同.列表中的项目具有较少的属性/详细信息.所选项目包含有关数据的更多信息.

您认为在这种情况下构建redux商店的最佳方法是什么？我试图谷歌示例,但通常在项目列表中的所有示例项目和所选项目被认为是相同的,并且不需要为详细项目保留单独的对象.

我尝试过简单的方法.只需保留商店中的商品列表和所选商品:

storeExample = {
    items: {
        1: item1,
        2: item2,
        3: item3
    }
    selectedItem: detailedItem1
};

是否有更好的方式来构建商店？我希望问题有意义,因为解释我的担忧有点困难.非常感谢任何"现场"的例子.

Answer 1

如果您将其itemN用作密钥，则可以更轻松，更快速地访问item所选的任何对象

storeExample = {
  items: {
      item1: {...},
      item2: {...},
      itemN: {...},
  },
  selectedItem: itemN,
}

那么您可以通过以下方式selectedItem轻松访问组件中的this.props.items[this.props.selectedItem]

应从后端获取所有数据，并且列表中的项目模型与所选项目模型不同。列表中的项目具有较少的属性/细节。所选项目具有有关数据的更多信息。

没有太多理由这样做。只需将所有详细信息存储在存储中，它将保存API调用并更快地从存储中获取数据。

Answer 2

这完全没问题。

请记住，在 redux 中重用数据引用是很好的 - 存储可以包含对同一对象的大量引用。detailedItem因此，您可以愉快地在对象中使用完整内容items，这将使您的选择变得更容易，因为您可以将要选择的项目传递到动作创建器中。

拥有简单的减速器通常是一件好事，因为它们可能是非常奇怪的错误的来源，所以我觉得这是一个不错的方法。