How to use Redux for your React app

Photo by Markus Spiske on Unsplash

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 Store

Reducers in Redux

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!

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!)

Index.js file for a react app with redux

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)

Reducer file in react app

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)

Dispatchers and another important hook

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

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

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!).

Software engineer sharing stories of my experiences in a coding bootcamp and beyond.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store