Redux-thunk - How to structure fetched data to index storage pattern? - redux

Question

I am using Redux + Redux-thunk to fetch datas from my API.
The data returned by my thunk is an array that looks like this :
[
{id_user: 1, name: "Joe", surname: "M", email: "joe#email.fr"},
{id_user: 2, name: "Jimmy", surname: "S", email: "jimmy#email.fr"},
{id_user: 9, name: "Jhonny", surname: "H", email: "jhonny#email.fr}
]
What I would like to do but don't get how to, is to store this data in my global state using the index storage pattern.
For exemple, from the fetched array showed above, the data structure I would like to store would look like this :
{
"usersById": {
1: {
id_user: 1,
name: "Joe",
surname: "M",
email: "joe#email.fr"
},
2: {
id_user: 2,
name: "Jimmy",
surname: "S",
email: "jimmy#email.fr"
},
9: {
id_user: 9,
name: "Jhonny",
surname: "H",
email: "jhonny#email.fr
}
}
}
Here is how I tried doing it in my success user fetch action creator :
export const fetchUsersSuccess = (users) => ({
type: types.FETCH_USERS_SUCCESS,
users: users.map(user =>
'userById': {
[user.id_user]: {
id_user: user.id_user,
name: user.name,
surname: user.surname,
email: user.email,
}
}
}),
loading: false,
});
The problem is, this still returns an array, looking like this :
[
userById: {
1: {
id_user: 1
name: "Joe"
surname: "M"
}
},
userById: {
2: {
id_user: 2
name: "Jimmy"
surname: "S"
}
},
userById: {
9: {
id_user: 9,
name: "Jhonny",
surname: "H"
}
},
]
I searched around but could not get an answer for this. I also tried to format the fetched data from the fetching thunk directly but I think this is not the solution ? Am I wrong ?
Or maybe this logic should go to the reducer ?
I know this must be simple stuff but I can't get over it, making me trying over-complicated things for, I guess, something as simple as this.
Any help would be greatly appreciated. Thank you very much

Answer 1

Our official Redux Toolkit package specifically has a createEntityAdapter API that implements managing data in a normalized form in the store.
For examples of how to use it, see the "Redux Essentials" core docs tutorial, Part 6: Performance and Normalizing Data, and the "Managing Normalized Data" section in the Redux Toolkit Usage Guide.