Introduction to Redux
While useState is excellent for local component logic, scaling an application often leads to the headache of passing props through multiple layers. Redux addresses this by centralizing your state into a single "source of truth," ensuring that data is accessible across the entire component tree without the clutter of prop drilling. In this article, we'll explore the three core pillars that drive this centralized management system.
The Redux Store
The store is the centralized state container for your application. It holds the entire application state in a single object. Unlike useState, where you call a setter function inside the component, Redux state is immutable from the outside. Components are not allowed to change it directly.
Actions
Actions are plain JavaScript objects that represent an intention to change the Redux Store. Components are only allowed to make changes to the store by dispatching these actions. They do not modify the store themselves. They simply describe what happened.
Reducers
Reducers define how the store should change when a specific action happens. A reducer is a pure function that:
- Receives the current state
- Receives an action
- Returns the new state