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
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
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.
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.
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
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.