Question

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

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

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

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

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

我明白为什么人们不会从开始加载detailedItem，如果它带有一堆数据并且你有一个很长的item列表。我使用你自己建议的几乎相同的解决方案。

Answer 3

这很好。

请记住，在redux中重用数据引用很好 - 商店可以拥有对同一对象的大量引用。因此，您可以愉快地在items对象中使用完整的libtango_client_stub.a，这样可以更轻松地进行选择，因为您只需将要选择的项目传递给您的动作创建者。

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

Answer 4

理论上，这应该是方法，但如果你的ajax有缓存，这不会为你节省很多性能

＆＃13;

// in redux store
storeExample = {
  items: {
    1: item1,
    2: item2,
    3: item3
  },
  selectedIndex: 0,
  detailedItems: [],
}

// react use example 

export default connect(({
  itemds,
  selectedIndex,
  detailedItems,
}) => {
  return {
    items,
    selectedIndex,
    selectedItem: detailedItems[selectedIndex],
    detailedItems,
  }
})(({
  items,
  selectedIndex,
  selectedItem,
  dispatch
}) => (<div>
  <span>selected: {selectedItem?selectedItem.name:'NONE'}</span>
  <select value={selectedIndex} onChange={(e)=>{
    const i = e.tartet.value
    dispatch(updateIndex(i))
    if(i!=0 && !detailedItems[i]){
    dispatch(loadDetail(i))
    }
  })}>
    <option value={0}>-choose-<option>
    {items.map((item,i)=><option key={i} value={i}>{item.name}<option>)}    
  </select>
</div>))

＆＃13;

1.a列表有订单但对象不是

2.once缓存到详细列表，最好的方法是从详细列表中通过函数索引，快速，无冗余

3.对详细清单项目的更改将直接适用

4.如果您的列表索引以0开头，则可以将selectedIndex分配给-1（大多数时候列表索引以0开头）

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

4 个答案: