What is Redux?
Redux is a state container that holds the JavaScript applications behavior consistently across client and server. In some components to pass data, we need to props drilling. But, as Redux is considered as a central store, then props drilling is not needed. Every component accesses the data from the central store easily.
Image Source: codecentric
Uses of Redux
- Redux makes the state predictable
- Redux is easily maintainable
- Redux is easy to test and also optimizes the performance of the application
Redux Workflow
Redux workflow is made of 3 main components. They are:
1. Store: Central store from where all states are saved and managed. As usual, a reasonable application has only one store.
2. Actions: Actions are pure JavaScript objects that have specific properties. The property contains an action type and info that need to be updated in the state. Depending on the application a lot of actions happened.
3. Reducers: Reducers are pure JavaScript functions that perform the action to update the state and return the new state. It takes the current value of a state, takes the action depending on the action type, and returns the new state.
Finally, the state is updated in the store where all of the states are managed.
What is Redux Toolkit?
The Redux store setup and the basic configuration to use in an application are similar. It is a waste of time matter to write the same script for different applications. Sometimes it’s a possibility to make mistakes. In a bigger application, there may be other packages needed to configure the Redux. Considering these matters, the needed packages and the basic configuration for the Redux setup are extracted and build a new package, which is Redux Toolkit.
In Redux Toolkit, the basic structure of the Redux and its needed packages are included, which makes our code and folder structure more understandable and organized.
Top comments (0)