React, Redux, and a Pile of State

by Alec Barlow

A common issue that developers have when building complex applications in the React Ecosystem is not thinking carefully about managing state. It is easy to assume that if you use a state manager like Redux, then you must rely solely on Redux for every piece of state within an application. But more often that not, this strategy will increase the application codebase and make it more difficult to maintain as it grows in complexity. A very important part of knowing how to use Redux (or any state manager) is knowing when not to use it.

The objective of this post is to increase your understanding of application state, and the different levels of it, as it pertains to React. Hopefully, with a better understanding of state, you will be able to build applications with cleaner and more maintainable logic.

What is State?

In the development world, there is a lot of jargon that, while beginners may not have a formal definition for, they have an intuitive understanding of. For me, application state was one of those terms, even though I understood the meaning behind it.

Application state is a collection of dynamic factors, which may or may not interact, that determine how an application behaves, or is displayed, at any given period of time.

Wow, that was a bit of a mouthful. How about something a little less academic:

Application state refers to a big pile of data that describes what information the app should show.

So what are some factors (things) that application state could be made up of?

The list can keep going. In essence, application state can be made up of all sorts of factors. Some factors might depend on others (App Data and Filtering), and some are isolated and self-contained (Toggling and Selecting). The key to effectively managing state in a React/Redux app is understanding the difference between dependent and isolated pieces of state.

But first, let's look at a real world example.

The Traffic Cop

Imagine there is a traffic cop controlling the flow of traffic at an intersection. What are some factors that make up the "state" of this example? The list below contains a handful of simple ones.

So which factors depend on each other and which are isolated? A lot of interaction takes place between the cars, the traffic cop's hand signals, and the movement of traffic, so it is easy to see that these factors are dependent. Likewise, radio stations being played and windows being up or down are isolated factors pertaining to each car.

Alright, what's the point?

My point is this; pretend the traffic cop is acting like a state manager, should he or she be contolling each car's windows and radio? I don't think so.

Divide State into Application and Component Levels

A great thing about React is that you don't need to think of application state as one big pile. We can divide it up into application and component levels. When using Redux, application (Redux) state should contain data that many parts, if not all, of the app depends on. Component level state does not exist in Redux state, because only a specific component cares about it. In other words, component level state is isolated from the rest of the app.

One good rule for determining whether something should be a part of Redux or component level state is whether it is UI or data related. Going back to the first list of examples, toggling a menu or selecting an option are good condidates for using component level state. On the other hand, backend data (i.e. blog posts), authentication status, or any other data that multiple components depend on should be maintained in Redux state.

This gets trickier when thinking about filtering data, but we can still break down the process. The filter option selected is still UI related, and still belongs in component level state. Likewise, the filtered data still belongs in Redux state. It isn't neccessary to manage the filter option in Redux state. All we need is a single action initiated from the component with filtering instructions, and our separation of concerns remains.

Don't forget about this.setState

As tempting as it is to throw every piece of state into Redux, doing so will not make it easy to maintain complex applications. Knowing how to manage state appropriately is an important step is mastering application development within the React Ecosystem. So remember to ask, "Is it UI, or data related?" If that doesn't help, you can always ask the traffic cop.

Previous Post