smartmockups lc0wwwwg

How To Install Redux in React & Start Using It

Redux is the JavaScript library and it also is the state management tool which React recommends. You might have noticed it’s also highly used by the dApp developers for controlling state of the decentralized apps. It’s the best tool that allows us to control all type of state which comes with 3 basic things such as actions, reducer and store to manage the state of the data. Redux allows us to manage data flow on all levels. It does not matter how complex that could be.

There are so many ways Redux manages the mess on the top of any application built with ReactJS. It’s very useful library that we can use for a number of functions.

  • Main Functions of Redux
  • Installing Redux
  • Creating React Redux App
  • Setting up Redux in React App
  • Flow of React Binding with Redux
  • Start Using it

Main Functions of Redux

Redux is a JavaScript library that helps to control an application data store with the help of Redux. It allows us to use it with tons of JS frameworks. When we use it with Reactjs the state management becomes extremely simple. What sets Redux apart from other tools is its exponentially awesome usability while using it on complex applications. No matter how complex an application’s strucutre is, it always manages the data well and gives users a smooth experience.

Installing Redux

In order to install it, we need to have installed NodeJS on our system where we would install it.

Creating React Redux App

We can create our app by using Redux. Here is the command to install it. The name used here is redux-installation. It requires a few seconds to install React.

npx create-react-app redux-installation

Screenshot from 2022 12 26 03 38 46

Setting up Redux in React App

Once we have installed set up react app. The next thing we would do is install Redux in it by opening React folder. On the other hand, if someone wants to use Yarn instead of NPM then he can do that as well. We have used NPM.

npm install redux

As soon as everything gets done, we could check the dependencies installed on our package.json file.

Screenshot from 2022 12 26 04 56 29

Once again as soon as we are done here, we would have to install react-redux package. Many ask why do we need redux package to worth with it? Well let’s put it this way, we use React for UI enhancements and is widely used, while Redux helps us manage state of the operations in an app. So to make both these work together we need to install Redux package.

Screenshot from 2022 12 26 09 19 08

Flow of React Binding with Redux

We can use the package for a few functions that helps us connect react apps with the redux easily. It’s what it comes very useful. So we can easily bind the two libraries this way using the react-redux package. That’s why we should not use redux without or before installing react or before learning the use of React. If you don’t know how to use react and want to use Redix. We highly recommend understanding it before that.

Installing React in Redux 

Here is how we can install react redux in react. All we need to install is use the command shown below which we can see in the image as well:

npm install react-redux

Screenshot from 2022 12 26 09 20 55

Then we can see in the package.json section that it has been installed.

Start Using it

Now we can use it and the store can maintain it since the app is subscribed to the redux store. Now the app cannot update the events directlly, the event takes place, it’s dispatched and finally reducer updates the state after that we could see the value change in the main app.