[xatxat]

I wouldn't store it as array in Redux because that would be too limiting (e.g. let's say I want a continent-list which is decoupled from the other continent-lists). If I would be forced to use redux in this case then I would create some random id for each ComponentList where I would store the UI state (but keep the continents data separated). Something like:

  {
    '<randomId>':
    {
        Asia:
        {
            collapsed: true
        }
    }
  }

IMHO this really makes things unnecessary complicated. It also makes it hard to re-use the ContinentsList component (maybe you want to use the same component in some other project which uses something else than redux?). I always try to think of the API of my react components first and how they later on can be easily reused. After I figured out the API of the react component then I might connect it to some store.

Probably the ContinentsList component would somehow look like this:

  <ContinentsList
    continents={<continents data>}
    renderItem={({ collapse, isCollapsed, continent }) => {
        return <ContinentItem onCollapseClick={collapse} isCollapsed={isCollapsed} continent={continent} />
    }}
  />

[baddox]

I’m still having trouble imagining an application where you would need ContinentLists in different spots without some well-defined arrangement of them in the Redux state where each can be identified by something more concrete than a random ID.

[xatxat]

Yeah, I agree that this is an edge case (nothing that I run into on a daily base) and the ContinentLists example might not be the best in this context. Something like a Dashboard with dynamic widgets would probably be a more realistic case.