Advertisement
Google Ad Slot: content-top
Redux Introduction
What is redux?
Redux is a predictable state container for Javascript app
Redux is for Javascript applications
Redux is a library for Javascript application
Redux can be used with React,Anguar,Vue or Vanila Javascript
Redux can particularly used with React
Why Redux?
Managing state in modern web applications can become complex as the app grows, with multiple components sharing and updating the same state. Redux addresses these challenges by:
- Centralizing State: All application state is stored in a single source of truth (the store).
- Predictable State Updates: State changes only through predefined reducers, ensuring consistency.
- Debugging Tools: With Redux DevTools, you can inspect state changes, time-travel debug, and track actions.
- Ecosystem Support: A vast library of middleware and tools makes Redux extensible.
Key Concepts
1.Store:
- The single source of truth where the entire state of the application is stored.
- Created using
createStore()in vanilla Redux orconfigureStore()with Redux Toolkit.
2.Actions:
- Plain JavaScript objects that describe what happened.
- Must have a
typeproperty and optionally include additional data (payload).
3. Reducers:
- Pure functions that determine how the state changes in response to an action.
- Accept the current state and action as arguments and return a new state.
4. Dispatch:
- A function that sends an action to the store.
- It triggers the reducer to update the state based on the action.
5.Middleware:
- Intercepts dispatched actions for handling asynchronous operations, logging, or custom logic.
- Examples:
redux-thunk,redux-saga.
Redux flow chart