The right way of handling "selected" item in redux store

Question

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.

Answer 1

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.

Answer 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.