Introduction to the Redux
Hello Solvers……
In here I’m talking about Redux in React. I highly recommend, you should have proper knowledge about React fundamentals before going through this concept.
First we see what is the definition about the Redux. In React documentation has a proper definition for the Redux as fallows.
“Redux is a predictable state container for javaScript apps”
So to understand this I’ll break this as a three part as fallows.
It is for JavaScript apps
It is a state container
It is predictable
Then let’s dive deeper in this three part
Redux for JavaScript application -> Redux is not tied to React. It can be used with React, Angular,Vue or even vanilla javaScript. Simply Reducx Is a library for JavaScript applications.
Redux is a state container -> Redux stores the state of our application. If you have a fundamental knowledge about React you should know what is state is. For an example let’s say we have a Login Form Component in this component have as a sates like Username, password, profileUrl.
Sate of an any app is represented by al l the individual components of that app. This can be including data and UI logics. Finally, we can say Redux will store and manage the application state.
Redux is predictable -> The state of the application can be change. For an example an item of a Todo list app move to pending state to completed state.
In Redux, all state transitions are explicit and it is possible to keep track of them. In other word the changes to your application’s state become predictable.
So if you want to manage the state of your application in a predictable way, Redux is a good friend for you.
Why do we need another tool to help manage that states?
So let’s see why we need to Redux to manage sates of a components. In this component tree represent sample React app and there are several components.
For an example component A has a state called username so we need send to this username A to B, so what we do now we need to state up to the component C and then send to the component B. Because the parent component is C in A and B. This way is some trouble. To overcome this trouble, Redux come to help to us.
In here your component’s sates are store in outside from components. If A wants to change their username, then A can communicate and then A can change username with predictable manner. Any component in this components tree can communicate with this Redux sate container. So previous problem is not happening now.
How Redux work with React?
React is UI library but Redux is state management library. So these two work with independently each other. But Redux can’t work with React app directly and its bit difficult. For overcome this trouble there are another package called React-Redux package. React-Redux is the official React UI binding library for React.
Three core concept in Redux
We can get real world scenario to understand this concept. So let’s say you are going to cake shop because you want to buy a cake. Cakes are store in a shelf in the shop. Then what happen, you should tell to shopkeeper, what I want a cake so then he/she remove a cake in the shelf and get a money from you and give a cake pack to you.
So let’s match this real world scenario with Redux
Store -> that holds a state in your application
Action -> That describes the changes in the state in your application
Reducer -> Which actually carries out the sates transition depending on the action
So this is the simple description about the three core concept about the Redux.
Three principles of the Redux
- First principle
“The state of your whole application is stored in an object tree within a single store”
Maintain our application state in a single object which would be managed by the Redux store. Simply all of your state is store in a single object.
2. Second principle
“The only way to change the state is to emit an action, an object describing what happened”
If you want to update the state of your app, you need to let Redux know about that with an action. Not allowed to directly update the state object.
3. Third principle
“To specify how the state tree is transformed by actions, you write pure reducers”
We need to write pure reducer to determine how state changes. Pure reducer is a pure function that function inputs are previousState and action and return next state (new state).
I think you can get basic understand about the Redux from this post.
!!!!!
