Redux

🔍 What Is It?

Redux centralizes state transitions through actions and reducers.

• →Actions describe what happened
• →Reducers decide how state changes
• →The store holds the current state tree
• →Components subscribe to selected slices of that state

🎯 Why Do We Need It?

Even when teams choose Redux Toolkit today, they still need to understand the underlying Redux model. It explains event-driven state, normalized entities, explicit transitions, and why some enterprise apps still prefer a central store.

🏗️ What Happens in Real Projects?

Redux remains relevant in large consoles, complex multistep product workflows, and applications where many teams need clear conventions, auditability, and explicit state transition history.

⚙️ How It Works

A component dispatches an action such as cart/itemAdded. The reducer receives the current state and that action, returns the next state, and subscribed components re-render if their selected data changed.

💻 Example

Redux Data Flow — The conceptual flow matters even when Redux Toolkit generates much of the boilerplate.

type CartAction =
  | { type: 'itemAdded'; item: { id: string; qty: number } }
  | { type: 'itemRemoved'; id: string };

type CartState = {
  items: Array<{ id: string; qty: number }>;
};

const initialState: CartState = { items: [] };

function reducer(state = initialState, action: CartAction): CartState {
  switch (action.type) {
    case 'itemAdded':
      return { ...state, items: [...state.items, action.item] };
    case 'itemRemoved':
      return { ...state, items: state.items.filter((item) => item.id !== action.id) };
    default:
      return state;
  }
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits