How to Install and Setup Redux in React JS Step By Step

In this tutorial, I will explain the Redux Library. Till now, we have seen the state management protocol recommended by React. We have placed the methods and state for handling it in the components of the react application. The handler methods and the state have then been passed to other components of the application. This works up to a certain level. But when the application grows larger it becomes challenging to handle the state. Also, to pass it through props to the other components. Because for passing props from one component to other components, firstly, you have to pass that props to the root components. After that, it’s child component and so on. So because of this mess up, It is very difficult to manage the state in all over the components.

To overcome this mess up, there is a popular state management library called Redux.

What is Redux

This is used as a data store for any application’s view layer. It is a separate JS Library. You can use it with any JS Framework. It makes state management much easier in React. In a simple application no need to use it. But when the application is complex then you need to manage it using Redux.

Required Installation For Redux

Before installing and setting up make sure you have installed Node JS in your system.

 How to Install Node JS For React Application

Create React Application

Create a React application using the below command. I am giving the name of the project redux-setup.

npx create-react-app redux-setup

It will take a couple of seconds to install React on your system.

How to Setup Redux in React

Now go inside the application folder. Open it in your code editor. Now, hit the below command.

npm install redux

You could also install these dependencies using Yarn too. I am using npm for this project.

Once a command is completed you could see the dependencies in your package.json file

Now, in the next step, you will require to install the react-redux package.

Why react-redux is needed?

This is the official Redux UI binding Library for React. We have React which is a UI Library. We have Redux which is a state management library. They both work independently of each other. To directly use redux in your react application will be a bit confusing. Also difficult that’s the reason we have to use the react-redux package.

This package offers a couple of functions that will help to connect react applications with redux. So, If you are using React and Redux together, also use the react-redux package to bind these two libraries.

So, to learn Redux only before React is waste of time. Hence, it is highly recommended to learn the React concepts then proceed with it.

Create a CRUD App in React.js Using Laravel 7 RESTful API

Install React Redux in React

npm install react-redux

Flow Diagram of Redux

The state of the application is maintained separately in the redux store. Our application will always subscribe to this redux store. However, the app cannot directly update the state. If the application wants to update the state, it has to dispatch the action. Once the action has been dispatched the reducer handles the action and updates the current state. As soon as the state is updated, the value will be passed on to the application. Because the app is subscribed to the store.

That’s it for this post. I hope you have understood the concept of the redux installation process. Now you are familiar with the all terminology that we will be using in redux. In the next post, I will show you it with a demo.