What is Redux and when to use it?
Redux is one of the most commonly associated terms with React JS. React-Redux is the combination. So, what is Redux and when to use it? Why does it gets along so well with React? Let us see below.
According to the official docs:
Redux is a predictable state container for JavaScript apps.
Official documentation Link: Redux
Now what does predictable state container mean?
So lets know what is ‘state’ in React. In React, we get two Javascript objects: “props” and “state”.
“props” gets passed to the other components, whereas “state” is used within the same component.
The data that needs to be passed to other components will be obtained in “props”.
The data that needs changes, or dynamic content from API calls will be stored in “state”.
Now, only class-based components have “state”, whereas functional components have only “props”.
This “state” is only available within the same component. Now this state can be updated as and when we want using the “setState” method.
Now we can modify the “state” as many times we want. As mentioned earlier, “state” is a Javascript variable, reserved in React.
Hence, creating a state is as simple as this:
state = {
users: [‘arun’, ‘ajith’, ‘vicky’],
showUsers: false
};
Now we can modify the state values too. That is not like the regular Javascript method.
this.state.showUsers = true;
We got to use “setState” method to update the state.
this.setState({showUsers: true});
But as we allow random modifications of the “state”, it can get clumsy when the features get extended and the app is growing.
The fact that we wouldn’t know the exact value of state at a given point of time is dangerous.
Now we go in for Redux to manage this. Now we remember the official state of Redux documentation: “Predictable state container”.
It allows to predict what the “state” value would be at any given point of time. We fix the random update on the state, allowing more discipline in handling state.
The learning curve of Redux is tricky and even many seasoned developers might find it difficult to grasp the concepts at once.
The terms like “store”, “reducers”, “actions” are associated in Redux.
Now the workflow of handling state in Redux is
Store — Stores the state data
Actions — Triggered to make changes in the state data. We don’t manually do “setState” anymore.
Reducers — Edits the existing “state” and changes as per the action and returns the state to the store.
Now this process helps in maintaining the state, such that we can predict the value of the state every time we want.
Redux is a separate package, and it is used along React. So, we can use Redux for state management along with Angular or Vue JS too. But Redux got mostly associated with React, because of the widespread community and management.
And inspired by Redux, we have another package called “ngRx”, that is used popularly along with Angular for state management.
Learn React JS at Kamal Technologies — the best React JS training center, located at Chennai. We offer both classroom and online classes.
Visit Best React Training in Chennai for more details.
Become a React developer in 30 days, with flexible timings, in-depth syllabus, practical training, lowest cost and course coverage by developing working projects, learning React at Kamal Technologies is the best training institute to learn React and React is the best thing you can learn now to get an IT job.
Call +91–88380 21187, email admin@kamaltechnologies.in for more details.
