Today I will talk about how to utilize Redux to handle state in your React app. If you have any experience with React, then you’ll know how quickly handling state in your apps can get messy. There’s nothing worse then realizing you need to access your state, in a child component, that’s three levels down from where the parent component has the state defined.
What if I told you there was a way to keep all of your state in one central location and… wait for it… you can use it anywhere in your app! No more worrying about passing that one prop down through four different components. I’m talking about Redux and it is a great tool to keep your state organized and accessible.
What is Redux?
Redux is a library that provides a container where you can keep all of the state you need and use it across your application. There are a few terms you need to get exposure to first in order to understand how it works though. These are stores, actions, reducers, and dispatches. These few terms are the essential parts of redux, and with these you should have all you need to get up and running.
Redux Store
I like to think of a Redux store as an actual store, except instead of having groceries or electronics, it has the state for you application. This will make even more sense as we talk about the other terms as well, but essentially the store is what you will have to access to get to your state. The good news is that any components in your react app will be able to access the store, which is why Redux is such a nice tool.
Reducers in Redux
So far we have our store, which is going to hold our state. However, in order to access that store we have to use reducers. These are just functions that take two parameters, the initial object for your state, and an action. Therefore, reducers are kind of like employees in our store. You tell the employee what you need and they are going to go get it for you. This is where the next terms come into play…
Dispatch and Action types
Alright so you’re in the store and you need something. You go up to the employee and you ask them to grab a soda and chips for you. They go back into the store, grab the items, adjust the stock (or whatever), and give you the items. It’s a pretty simple interaction that you have probably had multiple times throughout your life. These are also great examples of dispatch and action types.
The store you have set up in redux has a method called dispatch. The dispatch method takes an action, which is just an object with a key of type. So when you asked the employee to get you those chips and soda, you’re sending a dispatch with a type of “get chips and soda” and the employee is returning those items to you. Hopefully my analogy here makes sense, but that is essentially what is happening in Redux. Now here is some code to help bring everything together.
Let’s Use Redux!
Obviously the first thing you have to do is install Redux and if you are using it with a React application you might as well install React-Redux as well. The best place to see how to do this is… you guessed it! The documentation (Don’t you love reading documentation!)
Now that you have everything installed I’ll show you some examples of the different parts of our store analogy from before.
The Store (with code!)
Behold your store! This is taken from a meme generator I built with react that uses Redux to manage the state of the application. Now there is a lot of extra stuff here that you don’t really need to worry about when you are just starting out. This first thing I want to point out is the provider component we get from react-redux. This is where you going to pass your store in as a prop, so you can access it in your app.
The other important part is actually creating the store, which as you can see is as easy as running the createStore function. The parameters it takes can vary and the ones you see here are just some extensions for Redux chrome tools. The most important one is the first parameter, which is your reducer. Don’t worry we’ll get to see what the employee for our store looks like right now!
The Reducer and Actions (with code)
So remember what we said earlier. The reducer is simply a function that takes two parameters, the initial state, and the action. Well here it is, the esteemed employee of your store! As you can see we start with defining what the initial state will be. In this case it’s just an object with a key of memes and an empty array to store those memes.
We pass that initial state in as the first parameter and then comes our action. Because this is a pretty simple application I used “if” statements to differentiate the actions. Like we discussed earlier, you tell your employee what to do and then they go and do it. This reducer is looking for two options, it is either going add a meme to the state or delete a meme, and if anything else is sent, it’s just going to give you the current state.
The exact implementation of these actions is important. Reducers have to be “pure” functions in order to work well with React. This just means that they do not change the initial value of the state, they just add on to it. Pure functions are important so I would recommend looking into them more if you don’t already know what it means.
Finally the Dispatch (with code)
Okay here we have our final example of the most important parts of our Redux implementation. Without getting to deep into the workings of Redux, a lot of the heavy lifting is done by the two hooks you see imported from react-redux.
As you can see dispatch is a function that is going to send the action to your reducer (employee), so they know what to get you, and how to change the state. The other hook utilized here is useSelector. This hook simply allows you to access the state in your store. As you can see dispatch takes our action (which is an object with the a key of type) and sends the info it wants to add to the store.
Pro’s and Con’s of Redux
Now that you have what you need to get started with Redux let’s talk about why it’s helpful and why it does not need to be used all the time.
Pro — You can access your state in any component
All you need are a couple of hooks and you can access and alter your state from any of your react components. This is especially helpful when you have a lot of pieces of state you are keeping track of, and you don’t want to worry about drilling those props down through multiple components.
Con — Kind of tedious to set up
With the ease you get from using redux, it can also be a bit of a hassle to set everything up. Especially with simple applications like the meme generator, where there is really only one bit of state to keep track of. Something like that could easily be implemented without using Redux.
Final Takeaway
Redux can be a really powerful add on for your react app (or other application!) especially if it’s bigger and has a lot of state to manage. In the end if you’re building something simple that is not utilizing a lot of state, then it might not be necessary to set up your store and reducers and everything.
Either way it is a great tool to use and can really come in handy if you have a large project to do and don’t want to worry about passing props down or accessing your state. Just set up your store, hire your employee (reducer), and tell them what to do (dispatch and action).
Once again this is a very high level overview of Redux, but I hope it helps you to understand and use it in your next application. As always check out my other articles and connect with me on LinkedIn if you found this helpful (or if you want to tell me that it wasn’t helpful at all!).
