What is Redux?
Redux is a flexible and Predictable State Container for JavaScript Applications that manages our application state separately.
Why Redux is called a Predictable State Container?
Redux is a Predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments, and are easy to test.
What problem does Redux fixes?
- Problems of "Prop Drilling" is fixed.
- The structure of component tree doesn't need to change.
✅ To learn about the problems click here.
Unidirectional Dataflow of Redux:
state → action → reducer → state → action → reducer ...
Key principles of Redux
- State is immutable object.
- We cannot mutate application state, we will always return a new and modified state.
- All state changes are initiated through actions.
- The reducers take current state, action as arguments and returns a new state
((state, action) => newState) - Redux is inspired by Elm architecture that encourages functional programming principles like Pure functions.
- That means pure functions' output is always same for same input.
- Every single state change in reducers has to be taken care of by developers explicitly.
- Reducers are supposed to be pure and that's where the predictability comes from.
Why Redux is predictable?
This is because using Redux you will know what every single action in application will do and how state will change.
✅ To know more about state click here.
When to use Redux:
- When multiple components need to access the same application state. In this case, Redux’s single store is an optimized way to map a state across components.
- When you’re working on a large application with several other people. Again, the Redux single store becomes more beneficial as the complexity of an application increases. If many people are working on it, then Redux can also help keep everyone on the same page.
- When application state is updated frequently.
Benefits of using Redux:
- Predictability of outcome: You have few issues synchronizing your current state with actions and other components of the application when there is just one source of the store.
- Ease of testing: Writing code in Redux entails designing isolated, pure functions, which aligns with the golden rule of writing testable code: "Write tiny, independent functions that each accomplish one thing."
- Maintainability: Redux features strong principles for the organization of its code, which further assures a predictable result and makes it easier to maintain.
How Redux Store works
Here we can see that Stats and Count components are subscribed to our store. The store is just a simple database which is outside our component tree.
Suppose a user clicked on a button then a command is sent to the store which in redux is called action. In redux's term, the process of sending off that action to the store is called dispatch. After receiving the action, the Store then does something using a function which is called reducer.
The reducer function is the most important part of Redux. Because it controls the change of state. It takes state, action as parameters and returns a new state.
reducer(state, action) {
return newState;
}
This new state will be the current state of the redux. After that all the components that were subscribed to the store will get their states updated. If we use React or any reactive framework, then the updates will be done automatically.
Conclusion
In this article we have discussed about Redux, when to use redux and benefits of using redux. Additionally, we discussed about working principle redux store.
Thank you for reading.
If you find this helpful, leave a like, share, and follow me, @srafsan to read more articles.