What is Redux in ReactJS
In this article, we will know about redux in reactjs and what is the use of redux. Before we learn this concept you know the fundamentals of React. If you are a completer beginner, I highly recommend you to watch this react beginner playlist. In that playlist, they covered in detail all the fundamental concepts in react. Once you are thorough with the basics making sense of react with Redux is going to be much easier.
Redux
The definition from the documentation is that “Redux is a predictable state container for JavaScript apps“. To understand what this means let’s break it down into three parts:
- It is for JavaScirpt apps
- It is a state container and
- It is predictable
Let’s look at each of these parts separately:
JavaScript Application
This is very important. Redux is not tied to react. It can be used with any UI library or framework such as React, Angular, Vue, or even vanilla JavaScipt. So, if you have this mental model where redux and react are tightly coupled, now is agood time to get rid of it. You should remember that redux is a library for JavaScript applications.
State Container
State container means that Redux stores the state of our application. But what exactly do we mean by the state of an application, consider a React app we know the state of a component.
For example :
If we have a login form, the state of the component is simply an object that holds Username, password, and submitting flag to indicate the submit action happening in the background. If we had a list of users to display the state of the component would be an object that contains an array of users. Extending on this knowledge we can say that the state of an application is simply the state represented by all the individual components of that application. This includes the data and the UI logic. If your application is medium to large in size, the state of the application could be something like ‘isUserLoogedin’, ‘username’, ‘profileUrl’, ‘onlineusers’, and ‘isModalOpened’.
React is predictable in what way?
In any JavaScript application, the state of an application can not change. For example: In a todo list application, a todo item can go from being in a state of pending to a state of complete. In redux, all state transitions are explicit and it is possible to keep track of them. In other words with redux, the changes to your application’s state become predictable. So, if you want to manage the state of your application in a predictable way, you can use redux.
React redux
React which is a UI library and Redux which is a state management library. They are independent of each other. To directly use redux in our react application, is a bit confusing and also difficult that is the reason we have the React redux package. React redux is the official redux UI binding library for React, which mean that react redux offers a couple of function that will help you connect your react application with Redux. So, if you are using react and redux together, you should also use react redux to bind the two libraries.
