Redux — Simplified

Redux is a state management tool that when implemented and used correctly can make handling data and state throughout your frontend framework a lot easier. The issue for newer devs is that at first Redux can be very intimidating and complicated. I’m going to do my best to break it down so you can start using this fantastic tool easily and confidently.

What Is State Management?

So it’s easy enough to rattle off that Redux is a state management tool but what does that actually mean? Well the official Redux docs defines itself as, “Redux is a predictable state container for JavaScript apps.”

**A quick note about state: I think the most immediate use case for Redux is managing the state of some type of data so that’s what I’m going to be focusing on here.**

So Redux gives us a state container which is called a store.

Once this is set up we will be able to access this container from any part of our application. The state lives in the store, so we can update the state in the store, and we can access the state from the store. This makes for easy and flexible “state management” because we don’t have to worry about passing data and state down from parent to child components, or incorporating confusing callbacks in order to update state at a higher level.

Updating State and Accessing The Store

Once we have the store set up we have a kind of global state however we may be defining it. Now there are two major things that we can do, update the state, or simply access the state from the store.

I’m going to start with accessing the state from the store. So conceptually this is the same thing as accessing any type of local state, we just need to call on the state. In Redux there are a couple of ways to do this. If you’re using old school class components you’ll need to use a function called mapStateToProps. This function does exactly what it sounds like, it maps the state from the Redux store to props you can now access within your component. Here’s what it looks like from the Redux docs:

If you’re using hooks, you can import useSelector to achieve the same result in what I think is a cleaner, similar way:

Now you can call whatever your variable is and get access to that state.

Now any component can directly access any state you want.

So what if we want to update the state? For that we need dispatch. Now this is where I think things get a little bit more complicated because there are a few different moving parts that go into this, but as long as you go step by step it’ll all make sense together.

So dispatch is a function that basically allows us to call a function that will actually be changing and updating the Redux store. First of all, just like we had mapStateToProps and useSelector, we also have mapDispatchToProps and useDispatch. This is a common mapDispatchToProps example again from the Redux docs:

So now we need to talk about actions, and again this is where things start to get more complex. So when I mentioned that dispatch is a function that allows us to call other functions, actions are those other functions that are actually telling the store what to do. An action will have a type, which is mostly just an identifier so it’s clear which action is being called, and often times the action will also have some type of payload which will be some sort of data that’s being used in the updating of the state. The actions in this example above are very simple, but they can become more complex, and you’ll often see them in their own file and being called here as a function instead of an object.

Again if you’re using hooks and want to use useDispatch, it’s similar but I think a little cleaner especially with dispatch since you’re already getting more complex to begin with.

There’s one more piece before the state is actually updated within the store. It’s called a reducer. I find that the term reducer can make it more confusing, but basically this is where the state is actually changing based on the action that was called. This is what a reducer looks like:

So at the end of the day the reducer is just another function that again is actually responsible for updating the state. As you can see we have an initial state, and action as arguments. Then typically switch statements are used in reducers as a clean way to “switch” between actions. Based on the action.type the state will be updated in whatever way we want. IMPORTANT: state must be returned in its entirety even if only a portion is being updated. Here’s an example from the Redux docs:

Super important to remember this otherwise your state and data is going to cause some massive bugs.

So to recap: we can access the state from the Redux store anywhere in our app with mapStateToProps or useSelector, and we can update by calling dispatch (mapDispatchToProps or useDispatch) which will call an action, which will tell the reducer how to update the state, which will actually update the state inside the store.

Bringing It All Together

Redux is an amazing tool, and shouldn’t feel like something that’s too complicated if you’re a new dev. It can definitely can complicated but like with most aspects of programming the key is to break everything down as much as you possibly can, get an understanding of how each individual part works, and then put it all together. In general I’ve found using that strategy allows for faster grasping of many concepts in programming. This was also just scratching the surface of what Redux can do but hopefully it’s helpful to get you started implementing it in your projects. Redux and React-Redux docs are also great and easy to follow as that’s where most of my screen shots were taken from.