Redux: How to store list/single element in Redux?

[michalg42]

I'm using Redux for some time now but still I'm not sure how data in reducers should be stored.

For instance I would like to have list of users, from where I can choose one of them and get additional data.

Information needed for list is only id and name, and showing details of one user I need more info like city, phone number, etc.

I begin with reducer that store list:

    UsersReducer:
    [{id: 1, name: 'John'},
    {id: 2, name: 'Will'},
    {id: 5, name: 'George'}]

Then I load details for one of the users and here is my question: how and where should I put them?

Should I expand UsersReducer, so it would look like:

    UsersReducer:
    [{id: 1, name: 'John'},
    {id: 2, name: 'Will', city: 'London', phone: [phone]},
    {id: 5, name: 'George'}]

And in React extract from an array this one user?

Or perhaps I should leave old reducer and create new one for storing single user:

    UsersReducer:
    [{id: 1, name: 'John'},
    {id: 2, name: 'Will'},
    {id: 5, name: 'George'}]
    UserReducer:
    {id: 2, name: 'Will', city: 'London', phone: [phone]}

And in React extract data from UserReducer?

Or both ways aren't correct and there is other idea to store data in Redux?

[seph-m]

You could make a userDetailsById reducer that handles the details. Then just get the pieces of data you need in your smart component.

So usersById reducer would look like this:

UsersReducer:
  usersById: {
      1: { name: 'whatever'},
      2: { name: 'whatever 2'}
   }

and the userDetailsById reducer would look like this:

userDetailsByIdReducer:
{
   1: {details stuff for user 1},
   2: {details stuff for user 2}
}

Then you'd have a selectedUserReducer that just stores the id of the selected user. Then you'd compose all of these together to make one store.

You could always just make it all part of the same users reducer if you don't need or want the separation.

UsersReducer:
{
   usersById: {
      1: { name: 'whatever'},
      2: { name: 'whatever 2'}
   },
   userDetailsById: {
     1: { user details 1},
     2: { user details 2}
   },
   selectedUserId: 1
}

Note that I'm using object hashes because it makes dealing with the entities simpler as you no longer have to do a lookup when you want to get at an entity by id. In general I start with things as part of the same reducer and then break them into different reducers when it makes sense or when complexity dictates.

[gaearon]

What @smastous described is the approach we suggest.