Q140- What is Redux? - Explain state management architecture

Redux is a predictable state management library for JavaScript apps (commonly used with React). It helps manage application state in a single, centralized store, making state changes predictable and traceable.

---

⚙️ Redux Architecture

Redux follows a unidirectional data flow:

1. Store
   • A single JavaScript object that holds the entire application state.
   • Example: { user: {...}, posts: [...] }
2. Actions
   • Plain objects describing what happened.
   • Must have a type property, can have payload.

   • Example:

     { type: "ADD_TODO", payload: { id: 1, text: "Learn Redux" } }
     

3. Reducers
   • Pure functions that take current state + action and return new state.

   • Example:

     function todoReducer(state = [], action) {
       switch(action.type) {
         case "ADD_TODO":
           return [...state, action.payload];
         default:
           return state;
       }
     }
     

4. Dispatch
   • Method to send actions to the store, triggering the reducer.

   • Example:

     store.dispatch({ type: "ADD_TODO", payload: { id: 1, text: "Learn Redux" } });
     

5. Selectors / mapStateToProps
   • Used to read specific slices of state from the store.

---

🔄 Unidirectional Flow

Component  --> Dispatch Action --> Reducer --> New State --> Component

1. Component triggers an action.
2. Action is sent to the store via dispatch().
3. Reducer calculates the new state.
4. Store updates, and the component reacts to state changes.

---

🧩 Key Features of Redux

• ✅ Single source of truth → easier to debug.
• ✅ Predictable state updates → only via actions & reducers.
• ✅ Time-travel debugging → can replay actions.
• ✅ Works with any UI library (React, Angular, Vue, etc.).

---

In short:
Redux centralizes your app state in a single store, updates it predictably via actions & reducers, and ensures components always have consistent, traceable state.