A Guide to Setting Up Your First Redux Application
So why use Redux?
If you have created React applications before, you will have worked with state. When building very small web applications, you likely had no issues with state. However, if you have spent time building a larger web application, you will have passed state down as props to child components who may have then passed those props down once again. In fact, you could technically pass down your state as props an infinite number of times. And once you’ve passed down your state to the child of the child of the child of the etc… of the parent component, you might then want to create a function that passes state back UP the component chain. So at this point you need to write a function in the parent component and pass it down x number of times. It is likely that you would pass down multiple pieces of state as props throughout your application to a number of different components. After a while, it becomes difficult to keep track of all the state and props that your application has. Modifying your web application could become a nightmare if you decide to do any major (or even minor) refactoring of code. In other words, after a certain point React tends to scale poorly.
This is where Redux comes in handy. Instead of moving information between a multitude of components and having to keep track of how all this information ties together, you can use Redux to ensure that anything you need to pass down as props can travel to the exact component it needs to be in without sending it through all it’s parent components.
As a result, the code inside of your components becomes much cleaner and you no longer need to pass down props x number of times to some child component. It also becomes easier to build larger applications as well as modify these applications should the need arise.
Assuming you have already created a React app using npx create-react-app app-name-here, you should run the following commands:
npm install redux or yarn add redux
npm install react-redux or yarn add react-redux
All you’re doing at this point is adding the Redux package to your React application.
Next, you will want to create a directory for the redux store somewhere inside your application. I prefer to keep my redux directory inside the src folder if possible.
After this, it will be necessary to modify your index.js file so that it looks like this:
Essentially what you are doing here is making your application aware of the Redux store.
As I still have not set up any components for my application, I will do that now. For the purposes of this tutorial, I will create a simple application with buttons that increment and decrement a starting number. My file structure now looks like this:
Since this is such a small application, there is no need to split Buttons.js and Number.js into different files. However, I will do so anyway in order to more effectively demonstrate how useful Redux is in managing state as I will not be required to pass down state and functions as props so that my two child components can use them.
Here is how my App.js file looks at the moment:
Here is how my app currently looks:
Now that I have built out the basic structure of my application, I will begin implementing Redux so as to work towards having an application with buttons that increment and decrement a number.
I will begin by having an actual number show up after the “Number: ”. In order to achieve this, I need to either hardcode a number (which means the number will always be static) or create a state that contains a number. Before this happens however, I will need to create an additional two files inside of the Redux directory.
Go ahead and run these commands inside of your terminal once inside the Redux directory
touch store.js
touch actions.js
touch reducer.js
Once that is done you’ll want your store.js to look like this:
Essentially what is happening here is that you are creating the redux store so that your app will have a central location to store data in.
Note that if you plan on performing fetch requests (which I do not plan on implementing for this application), your store.js file will need to look like this instead:
and you will need to run npm install redux-thunk.
Now we are ready to begin adding state to our application. I will begin by building out my actions.js and reducer.js files.
Inside of reducer.js, I will begin by writing an arrow function with two parameters. A default state of 0 (or whatever I want the starting number to be) and an action. I will also import combineReducers from Redux. combineReducers is simply a utility function to simplify my code.
Next the numberReducer needs some logic to control the state change in this application.
If you lack familiarity with switch statements, I would suggest reading more about them here:
https://www.w3schools.com/js/js_switch.asp
Essentially what is happening here is that your code is returning a new state if you either increment or decrement a number. If neither of those actions is taken you return the current unmodified state by default.
Inside of actions.js I will write two functions that will increment or decrement a number which is received as a parameter.
Inside of the return statements what is happening is that “type” is the command describing the state change while “payload” is any data needed to complete the state change.
Note that if making any kind of fetch requests, you will need to use a different syntax in order to achieve your aims. The link below is a useful place to start if you would like to learn more about this.
Now that the Redux files are set up, it is time to build out our functional components. I will begin with Number.js and write the following code:
Here I am using a function named mapStateToProps to retrieve the state from my redux store so that I may use it inside the component itself. I import and use connect from react-redux so as to bridge the gap between the store and this component in such a manner as to allow state to be retrieved from the store.
Button.js now looks like this:
The code here looks a bit more complicated than inside of the other function component but all that is really happening is that with the click of a button, the state will either increment or decrement. I need to use mapStateToProps here so that the functions inside of my actions.js file will know the value of their parameters instead of having them be undefined.
mapDispatchToProps is being used to allow the invocation of the two functions that I wrote inside of the actions.js file.
In summary, what is happening is that with the click of a button, the component sends data to actions.js. The data is then modified and dispatched to the reducer.js file which then returns the new state back to the involved components. There is then a re-render of the components that rely on the piece of state which was changed.
actions.js is responsible for changing state and sending data to your backend (if you have a backend) while reducer.js is responsible for making state accessible to your components.
At this point, we should have a fully functional application that increments or decrements a number by three with the click of a button.
While all this code may seem complicated at first, you should keep in mind that with practice Redux becomes much easier to both implement and understand. With time and practice, Redux will become a powerful tool in your arsenal when trying to build large web applications due to the increased capacity for scalability that your applications will have.
