Redux is a state container that maintains the behavior of a JavaScript application consistently. In some cases, to pass data between components, we need to use props drilling. However, since Redux is considered a central store, props drilling is not necessary. Every component can easily access the data from the central store.

Usage 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: In the most cases, there should be only one central store where all states are saved and managed.
2. Actions: Actions are JavaScript objects with an action type and update info for the state. Many actions occur depending on the application.
3. Reducers: Reducers are JavaScript functions that update and return the new state, taking the current state and an action as input.

Finally, the state is updated in the store where all of the states are managed.

Redux Toolkit

Setting up a Redux store and configuring it for an application can be a repetitive and time-consuming task. Moreover, repeating the same script for different applications increases the likelihood of errors. In larger applications, additional packages may be required to configure Redux. To address these issues, the necessary packages and basic configuration for Redux setup are extracted and built into a new package called Redux Toolkit. This package includes the basic structure of Redux and the required packages, resulting in a more organized and understandable code and folder structure.