A bird’s-eye view of Redux for beginners
For newcomers to React, Redux can feel like this unavoidable monolith of confusion and frustration. The vast majority of the community of React developers use it, employers want you to be able to use it, so you’ve got to learn how to use it, right?
Unfortunately, probably yes, you are going to need to learn to use it. But the problem with trying to wrap your head around Redux as a beginner to React is that you haven’t learned to think like a React application yet. This makes it very difficult to reason about Redux (or at least that was the case for me when I learned Redux). So, if you’re just getting started with React, or maybe you’ve done a bit of work with React and you’re starting with Redux, here’s a bit of an overview, when you should, and when you shouldn’t be thinking about using Redux.
Some context
You’ve probably read about how React forces you to write in a declarative way. This is something you should definitely read (or watch a YouTube video) about, but in simplest terms it means that an application’s logic is executed as a function of the state of the application:
The ‘state’ of your application dictates what a user sees, what a user is able to interact with, and therefore what functionality they have access to. The example above is simple, but it doesn’t take much before an application’s state can start getting very complicated. This is where Redux comes in.
What exactly is Redux?
Redux is a tool for managing the state of an application. It has some other key motivations regarding testing and reproducing bugs as well as others that I won’t get into now, but at the heart of it it’s a tool that helps you to manage your state. It does this by keeping all of the application state in a single object tree, called a store.
By keeping the store in a single place that all of the components can access it from, you are able to avoid creating complex data and control pipelines. When a component needs to access a piece of state that is changed on the other side of your app, it doesn’t need to reach all the way to that component, it can just reach into the store. An example of this could be the user type of a logged-in user in your application. This is something that lots of your components will need to have access to, and so it makes sense to put it in the store. This leads me conveniently on to my next point…
Redux isn’t the grand controller of all state in your app
One thing that I learned when I started to use Redux is that it can simultaneously simplify your control flow, and make it much more bloated. When you want to change anything in the store you have to call an action creator, which dispatches an action, which sends data a reducer that changes the application’s state (don’t worry if you don’t know what these are… the point is that there are a lot of steps). If you do this for every piece of state in your application you’re quickly going to accrue a module base that’s quite hard to manage. This is why it’s best to try and use your judgement as to when it’s best to put a piece of state in the store, and when to use local component state.
In the words of Dan Abramov: Local state is fine
My general rules for what does and doesn’t go into the store are:
- If lots of components that are spread around the app need it/can affect it, it goes in store (e.g. the shopping basket, the user type, the player’s health)
- If it controls UI or is local to one or a small number of neighboring components, it goes in local state (isLoading, list filters, even simple lists themselves where they affect just a few child components)
Conclusion
My best advice to someone that is has never used Redux, but wants to start using it as they are learning React (which was the exact situation I was in when I started…) would be:
Start building your application without Redux, even if it sounds like it ticks the boxes for what you’ll need. As you build and the application becomes more complex you’ll quickly see where Redux will slide perfectly in, and where it isn’t necessary. Learn to think like React, and Redux will come to you much more easily.
