4  

If you use itemN as the key, it gets easier and faster to access whichever item you have selected

如果您使用itemN作为键,则可以更轻松,更快速地访问您选择的任何项目

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

then you can access the selectedItem in your component easily through this.props.items[this.props.selectedItem]

然后您可以通过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.

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

There's not much reason to do this. Just store all the details in the store, it'll save API calls and make fetching data from the store faster.

没有太多理由这样做。只需将所有细节存储在商店中,它就可以节省API调用并更快地从商店中获取数据。

2  

I see why one would not load the detailedItem from start, if it comes with a bunch of data and you have a very long list of item's. I use pretty much the same solution you suggest yourself.

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

1  

This is perfectly fine.

这很好。

Remember that it's fine to re-use a data reference in redux - the store can have loads of references to the same object. So you could happily use your full detailedItem in your items object, and this would make it easier to do your selection, because you could just pass the item you want to select into your action creator.

请记住,在redux中重用数据引用是可以的 - 商店可以拥有对同一对象的大量引用。因此,您可以愉快地在item对象中使用完整的详细信息,这样可以更轻松地进行选择,因为您可以将要选择的项目传递给您的操作创建者。

Having simple reducers is generally a Good Thing because they can be the source of pretty weird bugs, so that strikes me as decent approach.

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

0  

Theoretically, this should be the way, but if your ajax has cache, this wont save you much performance

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

// 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>))

1.a list has order but object not

1.a列表有订单但对象没有

2.once cached to detailed list, best way is to index from the detailed list through function, quick, no redundancy

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

3.changes to detailed list items will apply directly

3.更改为详细列表项将直接适用

4.if your list index starts with 0, you can assign selectedIndex to -1 (most times list index starts with 0)

4.如果列表索引以0开头,则可以将selectedIndex指定为-1(大多数时候列表索引从0开始)