How to Use Redux in a React Application
For Flatiron School’s Phase 5 Software Engineering project, students are required to design and develop a single page React Redux application. In the last phase, a lot is thrown at you in a very short amount of time, and it can seem a bit overwhelming when you finally sit down to start this project on your own. So I thought I’d walk through how to incorporate Redux into a React application.
First, as a quick overview, React is a JavaScript library that was created by Facebook for building user interfaces or UI components. It is a great way to separate responsibility in an application which can also help when debugging…and honestly, it just makes sense! With that being said, it can still be a little confusing when grasping how these different components communicate with one another. That’s where state and props come in to play.
State is basically a JavaScript object which allows individual components to create and manage their own data. In order to update a component’s state, you would need to use the method, setState, which will automatically trigger a re-render of the component where the state changed.
Props, short for properties, is also a JavaScript object and is used to pass data between components, which is how they communicate. This is how parent components share data and functions with child components. Keep in mind though, that it does not work the other way around.
So now that we’ve covered the basics of state and props, which relate to the use of Redux, let’s discuss how these things change when incorporating Redux into your application.
Redux is also a JavaScript library that basically works as a container for the state of your entire application, allowing you to manage and update the application’s state using events called actions. This is very helpful because it allows you to store your application’s data all in one place. It is also very beneficial if, as your application grows, you find that you are passing down props and functions in so many of your components that it becomes hard to follow the flow of your application. Redux is great because it allows the components you choose to access the state of your store, so technically, any component that needs to access the store can do so when set up properly.
In order to use Redux in your application, you first need to install the Redux library. Next, you will need to set up the store of your application. This is done in the file where ReactDOM renders your application, usually the index.js file. This is done using the createStore method, and passing it the name of your reducer (we’ll get to that in a minute). You will also need to include the Provider component which wraps the top-level component, App in my case (that could be different in your application), and passes it the store as props. By placing this at the top-level of your application, it allows all the components to have access to the store. Here is an example of what the index.js file should look like…
Now, in order to access the store’s data, as well as update the data in the store, we will need to use the function connect, and pass as arguments to connect, two different functions, the mapStateToProps and mapDispatchToProps functions.
mapStateToProps is the first argument passed to connect. If mapStateToProps is not being used, and only mapDispatchToProps is being used, then you will need to pass null in as the first argument. mapStateToProps is called every time the store’s state changes, so when used as props in the return statement of your component, just like with the function setState, this will also trigger a re-render.
mapDispatchToProps is the second argument passed to connect and is used to dispatch actions. Unlike mapStateToProps, if you are only using mapStateToProps in a component, you do not need to pass null in as the second argument. Your component will receive dispatch by default. mapDispatchToProps is what allows you to dispatch actions to your store which is what updates your store’s state. Here is an example of a component using these functions…
Both the state of the store as well as the action creators can be passed as props to a child component. You can see in the example below where I’m passing the state (this.props.movies), as well as the action creator (this.props.addFavoriteMovie), down to the child component <Movie/>.
Now, on to actions and reducers. Let’s start by discussing actions first. Actions are also JavaScript objects that have a type field. They are, as the name implies, explaining the type of action that is taking place in your component, whether that be adding new data, editing data, or deleting data. As you can see in the example above, there is an addFavoriteMovie action creator/function being imported from the actions folder. This action creator could be passed directly to dispatch from the component using this.props.store.dispatch(addFavoriteMovie(movie)), but to adhere to separation of concerns, I created an actions folder which will store these action creators/functions. Here is an example of the actions folder that we imported into our component…
As you can see, each action has a type, such as ‘SEARCH_MOVIES’ and ‘ADD_MOVIE’, which are being passed to dispatch along with the action’s payload, the return from the fetch request in this case. I have also implemented Redux Thunk middleware in my React app which you can read more about here. The main take away here is that you can create a whole list of actions that your application can use to perform different things, such as CRUD actions. And to clarify, the action creators are the functions that store the actions which are passed to dispatch and include both a type and a payload.
Now that we have these actions defined, what happens next? That’s where reducers come in to play. Reducers are functions that take the current state of your application, along with an action, as arguments. They return the updated state based on the type of action that was performed. One of the most important things to remember when using reducers is that reducers are pure functions. They should not mutate the existing state of your application and should only make immutable updates to the current state. This is easily handled by using the spread operator in these functions. Here is an example of the moviesReducer using the actions that were defined and passed to dispatch in the action creators/functions from the actions folder…
As you can see, the action type is used as the value of the switch statement in the reducers file, to return the appropriate state based on the action creator that was called from the component. The state will then be updated accordingly. If we revisit the component that called the action creator, searchMovies, we would see that the state of the application would be updated by the reducer, then the mapStateToProps in that component would trigger a re-render as the state would be updated in that component, and the movie would then be displayed to the user as you can see it is passed in as props to the <Movie/> component as this.props.movies (line 29).
Now one important thing to note is that, just because you are creating a store to house your application’s state when using Redux, does not mean that you can not still use local state in a component. You can actually use both. If you noticed, I used local state in my component as well. I did find though, that it made more sense to use the store to house the application’s state, mainly for the return of CRUD action data. It made it more manageable, easily accessible to all components, and helped to slim down the components as well.
I hope this helped to solidify your understanding of using Redux in a React application. Please check out the provided links, in addition to this post, to get an even more in-depth look into Redux. I highly recommend checking out the link related to Thunk middleware as well.
Below are the links to the walkthrough of my React Redux application as well as the GitHub repos. Please check out my project and let me know what you think…
Video Walkthrough:
GitHub Repos:
Frontend — https://github.com/grantba/food_nutrition_information_app.git
Backend — https://github.com/grantba/food_nutrition_information_api.git
