Breaking down Redux
Redux is a powerful state management tool that makes it a lot easier to access data between different functions
Before I get into this blog, I want to first say that in order to understand what’s going on here, you have to have a grasp on how state works. State is data that represents a current condition for something, whether that be data for a certain component for data for even the entire application. Well, what does this really mean? Let’s take a look at how state is written in a React component:
This is a component that displays a message of “Hello name”, with the name depending on what is entered in the input field you see in the div. In the constructor method on the top, you can see this.state defined as an object with an attribute of name with a value of an empty string. This state object is able to be accessed by the entire component and even passed down to a child component as a prop.
Which brings me to how data is passed in React. As you may know, data is passed down to child components from the parent component while actions are sent up from the child components to the parent component. “Data down, actions up” is a term you’ll hear often. I’m not going to get too into how it works, but just know that this is how data gets passed around in React. Now, this might seem confusing. “Why is there such a weird hierarchy when it comes to data? Why not just have a global version of state that everything can interact with?” That’s exactly what Redux set out to do.
Redux
Redux is a state management tool for JavaScript apps. It creates a single source of truth for data in your app. There are three parts to Redux called the Store, Action, and Reducer. It’s kind of a pain to set Redux up, but believe me when I say that it’s absolutely essential when your app starts to grow. You don’t want to have to connect all the dots in terms of data flow.
But now, let’s get into those three parts of Redux I just mentioned.
Store
In case you haven’t guessed, this is where the state of the application is stored. Let’s see what it looks like. For context, I’m building a mock e-commerce website and I’m using Redux to list the products on sale:
We’ll get to reducers later, I want to direct your attention to line 17. This is where the actual store gets created with a method called createStore() (duh) with reducers and an empty object (composeWithDevTools is from Redux Devtools. It isn’t necessary to get Redux working but it definitely helps with bugfixing.) This is the simplest part of setting Redux up. You won’t find much of a difference between this store and the store files on other projects. The more important parts are next.
Note that I used the thunk middleware here. Thunk lets you return an action as a function instead of an object so you can do things asynchronously. I recommend you check it out as it definitely makes things easier.
Reducer
Reducers are functions that are able to make changes to the state by using an Action. Take a look:
This is the Reducer for just the list of products I want to show on my app. We pass in an action as well as a state with a default object that contains an empty array called products. We then return data to the store as an object depending on the incoming action type. I like to use a switch statement to do this.
In the store image, you will notice we named a variable called reducer assigned to a combineReducers method on line 8. Of course, there isn’t going to be just one reducer in our app. Otherwise, using Redux would be kind of overkill for state management. combineReducers does exactly what it says, and each value named within the object passed into it is going to be the name of that particular part of state in our app, meaning productList is now going to be a part of state which contains data from the reducer passed in as its value.
Action
Actions are where the data is actually fetched from the server to pass into state later on. Below is a function called listProducts which “dispatches” objects with a type field that gets evaluated by the reducer. Take a look at the values of those types being dispatched on line 6, 8, and 11 and see how they connect to the reducer above:
Whoa whoa wait, what’s dispatch? And payload? Dispatch is just a method to send an action. That’s really it. Payload is just the field in an action object that contains the actual data you requested from the server, or anything else really. This is why I set up the payload in the catch error on line 12 to send an error message should the trycatch detect one.
and BOOM! That’s how Redux functions!
