Redux in React 

What is Redux?

Redux is a predictable state management library used mainly with React applications to manage global application state.

It helps store and manage data that needs to be shared across multiple components, such as:

• User authentication

• Shopping cart data

• Theme settings

• Notifications

• API response caching

Redux follows a centralized store pattern.

Simple Definition for Interviews

“Redux is a state management library that stores application state in a single global store and updates it using actions and reducers in a predictable way.”

Why Redux is Needed?

In React, passing data through many component levels causes prop drilling.

Example:

App
 └── Parent
      └── Child
           └── GrandChild

If GrandChild needs data from App, props must pass through every level.

Redux solves this by providing a global store accessible from any component.

Core Concepts of Redux

1. Store

The store is the centralized place where application state is stored.

Example:

{
  user: {
    name: "John"
  },
  cart: []
}

2. Action

An action is a plain JavaScript object describing what happened.

Example:

{
  type: "INCREMENT"
}

Action with payload:

{
  type: "ADD_TODO",
  payload: "Learn Redux"
}

3. Reducer

A reducer is a function that takes:

• Current state

• Action

and returns a new state.

Example:

function counterReducer(state = 0, action) {
  switch(action.type) {
    case "INCREMENT":
      return state + 1;

    case "DECREMENT":
      return state - 1;

    default:
      return state;
  }
}

4. Dispatch

dispatch() sends an action to the reducer.

Example:

dispatch({ type: "INCREMENT" });

5. Selector

Selectors are used to read data from the Redux store.

Example:

const count = useSelector(state => state.counter);

Redux Data Flow

Redux follows unidirectional data flow.

UI → Dispatch Action → Reducer → Store Updated → UI Re-renders

Redux Architecture Diagram

Component
   ↓ dispatch(action)
Action
   ↓
Reducer
   ↓
Store Updated
   ↓
UI Re-render

Example Counter Application

Step 1: Install Redux Toolkit

npm install @reduxjs/toolkit react-redux

Step 2: Create Slice

// counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },

  reducers: {
    increment: (state) => {
      state.value += 1;
    },

    decrement: (state) => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

Step 3: Configure Store

// store.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

Step 4: Provide Store

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { Provider } from "react-redux";
import { store } from "./store";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Step 5: Use Redux State in Component

// App.js

import React from "react";

import { useSelector, useDispatch } from "react-redux";

import { increment, decrement } from "./counterSlice";

function App() {

  const count = useSelector(
    (state) => state.counter.value
  );

  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={() => dispatch(increment())}>
        Increment
      </button>

      <button onClick={() => dispatch(decrement())}>
        Decrement
      </button>
    </div>
  );
}

export default App;

What is Redux Toolkit (RTK)?

Redux Toolkit is the official recommended way to write Redux logic.

It reduces boilerplate code.

Without RTK:

• More setup

• More files

• More boilerplate

With RTK:

• Simpler syntax

• Built-in Immer support

• Better developer experience

Advantages of Redux

1. Centralized State

All global data stored in one place.

2. Predictable State Updates

Reducers are pure functions.

3. Easier Debugging

Redux DevTools helps track state changes.

4. Better for Large Applications

Useful when many components share data.

5. Time Travel Debugging

Can inspect previous states.

Disadvantages of Redux

1. Boilerplate

Traditional Redux required lots of code.

2. Learning Curve

Concepts like reducers/actions may confuse beginners.

3. Overkill for Small Apps

Simple applications may not need Redux.

Redux vs Context API

Feature	Redux	Context API
Purpose	Complex global state	Simple shared state
Middleware	Yes	No
DevTools	Excellent	Limited
Performance	Better optimized	Can re-render more
Boilerplate	More	Less
Best For	Large apps	Small-medium apps

Common Interview Questions

Q1: Is Redux part of React?

No. Redux is a separate state management library that works well with React.

Q2: What is a reducer?

A pure function that returns a new state based on current state and action.

Q3: Why should state be immutable in Redux?

Because Redux detects changes using object references. Mutating state directly can cause UI update issues.

Q4: What is Redux Toolkit?

The official simplified approach for writing Redux applications.

Q5: Difference between useSelector and useDispatch?

Hook	Purpose
useSelector	Read data from store
useDispatch	Send actions to store

When Should You Use Redux?

Use Redux when:

• Many components share state

• State logic becomes complex

• You need predictable updates

• Large-scale applications

• Debugging state changes is important

Avoid Redux when:

• Small/simple app

• Local component state is enough

Short Interview Answer

“Redux is a centralized state management library used with React to manage global application state predictably using stores, actions, reducers, and dispatch mechanisms. Redux Toolkit is the modern recommended approach because it reduces boilerplate and simplifies development.”