The right way to handle the "selected" item in a redux store

Question

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

Example. Given a list of elements and individual elements on the same page. The user should be able to select an item from the list. When an item is selected, details of this must be loaded. When the selected item is updated, it must also be updated in the details and in the list (for example, if the item name is changed, it must also be visible in the list). All data must be retrieved from the backend, and the item model in the list is different from the selected item model. An item in the list has fewer properties / details. The selected item contains additional information about the data.

What do you think is the best way to structure storex in this case? I tried to use Google examples, but as a rule, in all examples in the list of elements and the selected element are considered the same, and there is no need to store a separate object for the detailed element.

I tried a simple approach. Just save the list of items and the selected item in the store:

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

Is there a better way to structure a store? I hope that the question will make sense, as it is a little difficult to explain my problems. Any "live" examples will be appreciated.

Answer 1

If you use itemN as a key, it becomes easier and faster for you to access what you have chosen item

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

you can easily access selectedItem in your component via this.props.items[this.props.selectedItem]

All data must be retrieved from the backend, and the item model in the list is different from the selected item model. An item in the list has fewer properties / details. The selected item contains additional information about the data.

There are not many reasons for this. Just save all the details in the store, it will save API calls and faster retrieve data from the store.

Answer 2

It's fine.

Remember that to reuse data links in a redux, you need to store many links to the same object. That way, you could happily use your full detailedItem in your items object, and that would make your choice easier, because you could just pass in the item you want to select in your action creator.

Having simple gearboxes is usually a good thing, because they can be a source of rather strange errors, so it looks like a decent approach.

Answer 3

I understand why detailedItem was not initially loaded if it contains a bunch of data and you have a very long list of item . I use almost the same solution that you offer yourself.

Answer 4

Theoretically, this should be so, but if your ajax has a cache, it will not 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>)) 

List 1.a is in order, but the object is not

2.once is cached into a detailed list, the best way is to index from a detailed list through a function, quickly, without reservation

3. Changes to the items in the detailed list will be applied directly.

4. If the index of your list starts at 0 , you can assign selectedIndex to -1 (most often the index starts at 0 )