I would like to hear opinions about structuring redux store for the case when you need to keep list of items and selected item.

An example. Given a list of items and selected item details on the same page. User should be able to select an item from the list. When an item is selected detailed information about it should be loaded. When the selected item is updated it should be updated in the details and in the list as well(e.g if a name of the item is changed then it should be visible in the list as well). 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.

What do you think what is the best way to structure redux store in this case? I've tried to google examples but usually in all examples item in items list and selected item are considered to be the same and there is no need to keep separate object for the detailed item.

I've tried simple approach. Just keep list of items and selected item in the store:

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

Is there a better way to structure the store? I hope question make sense as it is a little bit difficult to explain my concerns. Would appreciate any "live" examples.

I would like to hear opinions about structuring redux store for the case when you need to keep list of items and selected item.

An example. Given a list of items and selected item details on the same page. User should be able to select an item from the list. When an item is selected detailed information about it should be loaded. When the selected item is updated it should be updated in the details and in the list as well(e.g if a name of the item is changed then it should be visible in the list as well). 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.

What do you think what is the best way to structure redux store in this case? I've tried to google examples but usually in all examples item in items list and selected item are considered to be the same and there is no need to keep separate object for the detailed item.

I've tried simple approach. Just keep list of items and selected item in the store:

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

Is there a better way to structure the store? I hope question make sense as it is a little bit difficult to explain my concerns. Would appreciate any "live" examples.

• javascript
• redux
• react-redux

4 Answers 4

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

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

then you can access the selectedItem in your component easily through this.props.items[this.props.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.

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.

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.

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.

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

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

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

3.changes to detailed list items will apply directly

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