Javascript “正确的处理方法”；精选；redux商店中的商品

当您需要保留项目和选定项目的列表时，我想听听关于构建redux商店的意见

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

在这种情况下，你认为构建redux商店的最佳方式是什么？我试着用谷歌搜索示例，但通常在所有示例中，项目列表中的项目和所选项目被认为是相同的，并且没有必要为详细项目保留单独的对象

我试过简单的方法。只需在商店中保留项目和选定项目的列表：

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

---

有没有更好的方法来组织商店？我希望这个问题有意义，因为要解释我的担忧有点困难。如果有任何“现场”的例子，我将不胜感激。

这很好

请记住，在redux中重复使用数据引用是可以的——存储区可以有对同一对象的大量引用。因此，您可以在

项目

对象中愉快地使用完整的

详细编辑项

，这将使您的选择更加容易，因为您只需将要选择的项目传递给动作创建者即可

---

拥有简单的减缩器通常是一件好事，因为它们可能是非常奇怪的bug的来源，因此我觉得这是一种体面的方法。

如果使用

itemN

作为键，那么访问您选择的

项

会更容易、更快

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

然后，您可以通过

this.props.items[this.props.selectedItem]

轻松访问组件中的

selectedItem

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

---

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

我明白了为什么不从一开始就加载

detailedItem

，如果它包含大量数据，并且您有一个非常长的

项的列表。我使用的解决方案与您建议的几乎相同。
理论上，这应该是一种方法，但如果您的ajax具有缓存，这将不会为您节省太多性能


//在redux存储中
storeExample={
项目：{
1：第1项，
2：第2项，
3：项目3
},
已选择索引：0，
detailedItems:[]，
}
//react使用示例
导出默认连接(({
项目，
选择索引，
详细编辑，
}) => {
返回{
项目，
选择索引，
selectedItem:detailedItems[selectedIndex]，
详细编辑，
}
})(({
项目，
选择索引，
selectedItem，
派遣
}) => (
所选：{selectedItem？selectedItem。名称：'NONE'}
{
常数i=e.tartet.value
调度（更新索引（i））
如果（i！=0&&！detailedItems[i]）{
调度（装载详情（一））
}
})}>
-选择-
{items.map（（item，i）=>{item.name}）
))
item1与detailedItem1不同。ItemN包含列表的一些最小数据，detailedItemN包含关于该项目的所有详细信息。因此，我在回答的末尾给出了我的评论。没有太多理由这么做。您可以先加载
项
s，然后填充它们的详细信息，但将它们保留在同一位置。使商店更易于导航和理解，最终将为您节省额外的API调用。我强烈反对，例如，在react native中，如果应用程序正在与列表中的大对象进行推理，则使用您告诉我们使用的结构并插入redux persist之类的中间件，应用程序阻塞，重复使用永远不会重新水化。但是如果项目列表被重新蚀刻并被更改怎么办？ItemN会引用一些未预料到的内容“这样您就可以在items对象中愉快地使用完整的detailedItem”是什么意思？您说您的
items
数组只包含关于该对象的有限信息，但因为您只是处理引用，所以始终使用完整的detailedItem对象可能更简单。