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:

  1. Centralizing State: All application state is stored in a single source of truth (the store).
  2. Predictable State Updates: State changes only through predefined reducers, ensuring consistency.
  3. Debugging Tools: With Redux DevTools, you can inspect state changes, time-travel debug, and track actions.
  4. 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 or configureStore() with Redux Toolkit.

    2.Actions:

  •     Plain JavaScript objects that describe what happened.
  •     Must have a type property 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