Chapter 5
Using Redux as a Central Data Store

You learned to share application state by pushing the state to parent components and passing props from parent to child. In this way, the application logic becomes more predictable and you can manage even complex interfaces. However, under some conditions, this model can get in the way. The Redux^[17] library provides an additional way to manage an application’s state.

Here are a few cases where you might want to consider Redux:

1. You want to move components around and leave the state management code as it is.

2. You want to access state independently of where the element sits in the hierarchy.

3. You want to add elements without affecting the state.

4. You want advanced debugging abilities, because your state transitions are complicated.

5. You want to reuse code for a mobile application. Since Redux separates the state from the components, you can share more code with a React Native^[18] application.

If any of these sound interesting to you, you might want to give Redux a try.

As you saw with the word counter example, to share state among many components, you push it up to the parent components. If components are numerous and far apart, you end up pushing all the state to the top of the application. State becomes large, and it gets difficult to keep track of state changes.

Redux places state outside of components, in a single separate object. A separate library, React Redux,^[19] grants any component access to this single object, so you don’t have problems passing down props.

While you could come up with your own React and Redux integration, React Redux provides a battle-tested and performant system that allows you to introduce Redux in most React applications with minimal rewrites of existing components. Redux itself is more of a toolkit than a ready-made solution. We’ll learn one possible usage. Redux itself is fairly low-level, and you can build a few different styles of solutions with it.

The example application we’ll build won’t be very complex. In fact, Redux may seem unnecessary; you could do this with just React. However, this will let you focus on the core concepts of Redux and give you a starting point to work with.

We’ll build a movie guide that displays movies you can watch this week. The guide organizes movies by day and allows you to mark a movie as a favorite; it activates a filter to show only your favorite movies. Here are the features we’ll implement:

• Each movie has a title and a day.
• Each movie is listed under the day it shows on.
• The user interface loads first, then the movies are fetched.
• Users can select each movie in the calendar as a favorite.
• Users can toggle between showing all the movies or only their favorites.

Before we dive into the application, let’s start with an overview of how Redux works.