Very Basic - Redux

Learning Redux is a real pain in the @#$#$^&. Good thing the team I was on at the time I learned it highly valued taking the time to learn, because it took me a good 30 out of 40 hours of a work week to figure out what the eff was going on. Once I finally did learn it however, I realized that the majority of what slowed me down in the learning process was that I couldn’t find a great explanation of exactly what Redux was doing. All I could find were tutorials on how to use it, and not really very much info on how it worked. I’m going to try to solve that issue with this post. I’m also going to assume that you know how to use React, and that you know what Redux is and why you want to learn it. I’m also only covering the very basics of Redux and what you need to know to be able to hopefully speed up the process of really learning it. If you need more in depth information check out the documentation. https://redux.js.org/ It's actually pretty great. Boilerplate Code Before we get into the nitty gritty of Redux, I want to explain one thing that really confused me when I first started using it. Redux uses A LOT of boilerplate code. So much so that it seems kind of unnecessary or over engineered, and that is not entirely false. When choosing to use Redux you need to weigh whether or not the amount of boilerplate code and the intricacies it introduces are worth it for what you are building. With the introduction of Hooks there are even less cases where Redux is necessary now. The goal of this post is to help you understand how Redux works, but hopefully by doing so it will also help you decide when and when not to choose Redux. Parts of Redux There are three main parts to Redux, the Store, the Reducer Function, and the Actions. Store The main goal of Redux is to move where state is stored from inside the application and components, to a separate object. So instead of creating a top level component to hold all the state, or just keeping it in the components themselves, Redux creates an external state object that can be accessed by all components in your app. This extracted state object is called the Store. Reducer The Store is the object that gets created when the app is running in dev mode or when it’s been built. But the thing that actually updates the store is the Reducer Function. The Reducer is just a large Switch Statement where all the cases make updates to the Store. So it receives an argument, executes the correct case, and updates the store. Actions The arguments that get passed to the Reducer come from the Actions. The Actions are the part of Redux that interact with the front end of the code. They’re basically just normal functions. They get called under certain circumstances in your components, then pass an argument to the Reducer and ask it to update the store. Then when the Store gets updated it changes the state of your app. That’s pretty much all there is to it. Here’s a visual to help. As you can see Redux adheres to the unidirectional data flow model that React is known for. Wrap up That’s it! That’s basically all that redux is, it gets a little more complicated once you start implementing because of all the code that is needed to get it to actually work. I have been looking into a nifty tool called Redux-Toolkit. Which is a tool that makes it faster and easier to set up Redux state management. I will be posting a blog soon about how Redux-Toolkit works and how you can add it to your application!

May 6, 2025 - 01:35

Learning Redux is a real pain in the @#$#$^&. Good thing the team I was on at the time I learned it highly valued taking the time to learn, because it took me a good 30 out of 40 hours of a work week to figure out what the eff was going on.

Once I finally did learn it however, I realized that the majority of what slowed me down in the learning process was that I couldn’t find a great explanation of exactly what Redux was doing. All I could find were tutorials on how to use it, and not really very much info on how it worked.

I’m going to try to solve that issue with this post. I’m also going to assume that you know how to use React, and that you know what Redux is and why you want to learn it. I’m also only covering the very basics of Redux and what you need to know to be able to hopefully speed up the process of really learning it.

If you need more in depth information check out the documentation. https://redux.js.org/ It's actually pretty great.

Boilerplate Code

Before we get into the nitty gritty of Redux, I want to explain one thing that really confused me when I first started using it. Redux uses A LOT of boilerplate code. So much so that it seems kind of unnecessary or over engineered, and that is not entirely false. When choosing to use Redux you need to weigh whether or not the amount of boilerplate code and the intricacies it introduces are worth it for what you are building. With the introduction of Hooks there are even less cases where Redux is necessary now. The goal of this post is to help you understand how Redux works, but hopefully by doing so it will also help you decide when and when not to choose Redux.

Parts of Redux

There are three main parts to Redux, the Store, the Reducer Function, and the Actions.

Store

The main goal of Redux is to move where state is stored from inside the application and components, to a separate object. So instead of creating a top level component to hold all the state, or just keeping it in the components themselves, Redux creates an external state object that can be accessed by all components in your app. This extracted state object is called the Store.

Reducer

The Store is the object that gets created when the app is running in dev mode or when it’s been built. But the thing that actually updates the store is the Reducer Function. The Reducer is just a large Switch Statement where all the cases make updates to the Store. So it receives an argument, executes the correct case, and updates the store.

Actions

The arguments that get passed to the Reducer come from the Actions. The Actions are the part of Redux that interact with the front end of the code. They’re basically just normal functions. They get called under certain circumstances in your components, then pass an argument to the Reducer and ask it to update the store. Then when the Store gets updated it changes the state of your app.

That’s pretty much all there is to it. Here’s a visual to help. As you can see Redux adheres to the unidirectional data flow model that React is known for.

Wrap up

That’s it! That’s basically all that redux is, it gets a little more complicated once you start implementing because of all the code that is needed to get it to actually work. I have been looking into a nifty tool called Redux-Toolkit. Which is a tool that makes it faster and easier to set up Redux state management. I will be posting a blog soon about how Redux-Toolkit works and how you can add it to your application!