Manage Lists of Objects in Redux Apps

Redux does not work well with non-JSON data formats. So you’ve got strings, booleans, numbers and arrays and basic objects. That’s pretty much what you get to work with in your redux store. No sets. No maps. No classes or functions. Just the most basic JavaScript constructs going back for years.

However, even with these constraints it’s still pretty easy to reach for the wrong data structure in redux. The main culprit that I’ve run into is when working with lists of objects, let show you to use them correctly.

I demonstrate 3 concepts:

1. How to update an item stored in an array, without changing the other elements.
2. How to write selectors to access items in an array
3. How to re-write arrays of objects as keyed objects and loop over them with Object.values

This is a rather long lesson, but I hope you find it helpful. In my experience using objects for lists in redux is preferred over arrays. This helps avoid the issues of accidentally modifying an objects siblings in a reducer (trigger extra re-renders) AND simplifies grabbing a specific object in a selector.

The immer library is now part of the redux toolkit and frequently recommended as a way to simplify updating objects in your reducers. We do not cover its use in this course.