React Redux Configuration | How to configure React with Redux and Thunk ?

Introduction

The internet is full of redux articles and also some of them explains how to configure react with redux. Ever tried to follow them and failed ? Even after hours of effort trying to configure, have to resort to other articles ? then you are in the right place. We know exactly how you are feeling. This is why we wanted to make your life easy with this post. We hope your search ends after reading through this article. So, relax and follow along.

Before we get our hands dirty, lets quickly understand what is redux and thunk.

What is Redux ?

Redux is a predictable state container for Javascript apps. This is the official description. Wow!! So easy to understand right ? Alright, we know what you are thinking. In layman's terms, its a single place to store all your state. Remember, you have a state object in every React class. If you are using plain React without redux, you will be storing the state related to a particular class in its state object. If you have multiple classes then every class holds its own state.

Consider this as a local state object, as this is local to the class. What if there is a state which is common to all classes and every react class can acccess it. Let's name it as Global state object. This single global state management system is called Redux. That's the easy way to understand redux.

What is Thunk Middleware ?

In Redux, every action is just a plain object and does not perform any action even though its called an action. Thunk extends the action object's functionality to perform an action like calling an API or a method, to log something etc. It's called a middleware because it sits in the middle of Redux and React and scans every action, if the action is a function, it just calls it. Don't think much about thunk. It is just a pattern.

Confgure React and Redux

If you are struggling to configure React Router in your application, refer to this easy step by step tutorial. Create React App - React Router Setup. We will use the same application configured in this tutorial and extended it to configure Redux.

Go ahead and get your self familiarized with the above tutorial's source code. We will get redux running on this application with just a couple of changes.

1. Add action - UserAction.js :

This action will hold all the redux actions related to the user screen. You can also move all the action types like GET_USER, ADD_USER etc into a separate file called UserActionType.js and include it into the action file.

2. Add reducer - RootReducer.js :

This is the root reducer. This combines all the meta reducers, which means reducers grouped by some category. For example, if you have a list of links on your left side bar then all reducers related to those links goes into the left side bar reducer and the left side bar reducer will be in root reducer.

In our case, we have all the actions in our main page, so we named it as MainContentReducer.Ideally, the easy way to do this is categorize by layout, left sidebar, right sidebar, main content, header, footer etc.

3. Add reducer - MainContentReducer.js :

As explained above, this is our main content reducer.

4. Add reducer - UserReducer.js :

This is our actual reducer. If you look at the UserReducer function, there are different actions for each action type. The inital state object has two entries with default values.

5. Add store - Store.js :

This is actual store that will hold all the state in our application. Observe that Thunk is also configured as a middle ware. Other important configuration here is the Redux Development Tools configuration.

Want to know what Redux DevTools does ? Well, it will show how redux is working and storing in a visual interface. Dont worry, we will walk you through it as well. Hold on until then.

6. Modify index.js to include the redux Store :

Modify the already existing index.js to include the store using Provider tag of redux.

Thats all you need for the redux configuration. We will now run and validate that the redux configuration is working fine. You can find source of the working application at the end. Check "Download Source" section.

Run the Application:

Run the application using npm start and Navigate to, http://localhost:3000/react-redux-config in your browser. Click the User link and you should see something similar to the below screenshot.

https://github.com/learninjavagithub/assets/raw/master/articles/react-redux-config1.jpg

The firstname and lastname from the store are retrieved and displayed in the user screen. Wait, how can we be sure that they are coming from the store, to check that we need to use Redux DevTools Chrome Extension.

Remember we configured Redux Dev Tools in Store.js ? This is exact reason why we may want to use this tool. This extension will help us view, debug and also replay our actions. Click on the highlighted extension and you will see the Redux DevTools window as shown in the screenshot.

The tool window provides different kinds of views like Tree, Chart and Raw. You can also select the Action, State, Diff etc.

https://github.com/learninjavagithub/assets/raw/master/articles/react-redux-config2.jpg

By default, the first action that is called when the application is loaded is @@INIT. Try modifying the values in the text fields and you will see that the ADD_USER action will be called. Similarly, when you hit the Clear button, the DEL_USER action will be called.

You can play around the various functionalities in this window. These are very useful while development when you want to debug your workflows to see how the state changes are happening.

Thats all folks !! Happy coding. If you feel this helped you, keep supporting us by or or below or on the articles on social media.

React Redux Configuration - How to configure React with Redux and Thunk ?

learninjava

Jul 21, 2020 - ReactJS

Introduction

What is Redux ?

What is Thunk Middleware ?