How to Set Up Redux-Thunk in a React Project
By: Michael Tong
Tags: Redux, Redux Thunk, Front End Development, React, JavaScript

Today I will be discussing how to set up redux in a react project.

Yes, you probably heard a lot of fuss around it about how hard it is to set up on a react project, all the boilerplates along with it, etc…

Yet redux is so popular today. Why?

Because it allows us to manage the global state within one application, where several components can access the same piece of data within the global state.

Let’s talk about the installation steps.

Step 1: If you haven’t install node already run the following command to install node in your terminal:

curl “https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE ‘s|.*>node-(.*)\.pkg</a>.*|\1|p’)}.pkg” > “$HOME/Downloads/node-latest.pkg” && sudo installer -store -pkg “$HOME/Downloads/node-latest.pkg” -target “/”

Step 2: install a new react project with the following command, with redux-project as your project name:

npx create-react-app redux-project

Step 3: Modify your index.js and replace it with the following content:

Step 4: To install redux, you need to install several redux packages by running the following command:

npm install react-redux redux redux-thunk — — save

Step 5: Modify your app.js and replace it with the following content:

Over here, I imported in “provider” and wrap it around our application. In this case, that would be ActionComponent even though normally it would be a bunch of routes that route to different pages.

What this means is any component wrapped by the provider HOC(Higher-order function) will have access to the global redux store. ConfigureStore is a function that will hook the application to the root reducer(which connects all the reducer).

Step 6: create store.js with the following content:

Over here, we call createStore from redux, which gives us a default store to work with for the entire application. It takes in 3 arguments: one being the rootreducer, which contains all the reducers combined. This reducer is where you hold your global store data, as well as a function that parses incoming commands that modify the existing state.

There is another interesting piece to this, which is the composeEnhancers.

If you did not know what it is and by looking at it, you can at least guess that it is related to redux dev tools. That’s right!

Redux debugging tools are now available on browsers once you include composeEnhancers for createStore call.

Here is how the redux dev tool looks like on the actual browser:

Step 7: Create a folder called reducers under the src directory and create a rootReducer.js with the following content:

In a regular application, you can expect to have different reducers here, each with their own local state & data.

Over here we export one root reducer with local state from simple Reducer.

Step 8: In the reducers folder, create a file called simpleReducer.js and including the following content:

Over here, the simpleReducer contains result, fruitOne, fruitTwo, all global state data that will be modified and utilized depending on the changes to the state of the application.

It takes different commands, such as “SET_FRUIT_ONE”, and modifies the state depending what action.payload holds as a value.

Photo by hannah joshua on Unsplash

Where are all these commands coming from?

They are all coming from an action js file, which contains a list of functions that sends commands to the reducer to modify the state.

Step 9: under the src folder, create a new directory called actions. In the actions folder, create a file called simpleActions.js with the following content:

Over here, we call the dispatch function with a type and a payload. The “type” is the command that the reducer picks up and decides how to modify the global state. The payload is the data that will be inputted into the global state, depending on how the reducer handles this piece of data.

Now our redux is setup!

Question is…how do we modify the redux store and get access to the redux store data on our application?

Remember in app.js we have an action component that is wrapped by the provider?

Step 10: Create a component folder under the src directory. Inside the component folder, create ActionComponent.js and include the following content:

Over here, we get the connect function from react-redux, which allows us to wrap around actionComponent and connect it to the redux store.

Connect component, in general, takes two components:

mapStateToProps: this allows us to access global state variables

mapDispatchToProps: this gives us access to functions that can modify the global state

In this component, we connect the functions to update the global state from mapDispatchToProps. Afterward, we access them as attributes of props and call it. What happens is it calls the function that dispatches a specific action(for example, set fruit one) with its own type(command) and payload. It then goes to the reducer and modifies the state.

If you look into the redux dev tools on chrome, you can track all the commands and the status of the global state, as seen in one of the screenshots above.

How about getting access to variables from the state?

Step 11: inside the components folder, create a component called FruitComponent.js with the following content:

Simple to mapDispatchToProps, you expose the field that you want to see from a particular reducer and that variable becomes accessible as a props.

Do note that any changes to the action component will cause mapStateToProps to get fruitOne and fruitTwo again from the global state. Well, that’s not good because we only want to get fruitOne/fruitTwo when the page loads and only when there are changes to these two variables in the global state.

For now, this is enough to guide you to set up your redux. In future articles, I will talk about tools to memoize the data we are getting from the redux.