javascript - 在 redux store 中处理 "selected"项的正确方法

Question

当您需要保留项目列表和选定项目时，我想听听有关为这种情况构建 redux 存储的意见。

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

在这种情况下，您认为构建 redux 存储的最佳方式是什么？我试过用谷歌搜索示例，但通常在所有示例中，项目列表中的项目和选定的项目都被认为是相同的，不需要为详细项目保留单独的对象。

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

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

是否有更好的方式来构建商店？我希望问题有意义，因为解释我的担忧有点困难。将不胜感激任何“现场”示例。

Answer 1

如果您使用 itemN 作为键，访问您选择的任何 item 都会变得更加容易和快速

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

然后您可以通过this.props.items[this.props.selectedItem]

轻松访问组件中的 selectedItem

All data should be fetched from backend and an item model in the list is different from the selected item model. Item in the list has fewer properties/details. Selected item has more information about the data.

没有太多理由这样做。只需将所有详细信息存储在商店中，它将节省 API 调用并加快从商店中获取数据的速度。