State Management – Redux (Basics to Advanced)

Introduction

As React applications grow, managing state across multiple components becomes complex. While local state and Context API work well for small to medium apps, they can become difficult to scale and debug in large applications.

Redux is a predictable state management library designed to handle complex, global application state in a structured and scalable way. It is widely used in enterprise-level React applications.

What is Redux?

Redux is a state management library that centralizes application state in a single store and manages state changes using strict rules.

Key ideas behind Redux:

• Single source of truth
• State is read-only
• Changes are made using pure functions

Redux works with React but is not limited to React.

Why Do We Need Redux?

Redux helps solve problems such as:

• Sharing state across many components
• Managing complex data flow
• Debugging unpredictable state changes
• Maintaining consistency in large applications

Redux is commonly used for:

• Authentication state
• User data
• Cart and order management
• Application settings
• Server-side cached data

Core Principles of Redux

1. Single Source of Truth

All application state is stored in one object called the store.

2. State is Read-Only

State can only be changed by dispatching an action.

3. Changes are Made with Pure Functions

Reducers are pure functions that return a new state.

Redux Architecture Overview

Redux follows a unidirectional data flow:

1. Component dispatches an action
2. Action is sent to reducer
3. Reducer updates the state
4. Store notifies subscribed components

Key Redux Concepts

Store

Holds the global application state.

Action

A plain JavaScript object describing what happened.

Reducer

A pure function that updates state based on action.

Dispatch

Sends an action to the reducer.

Selector

Reads data from the store.

Redux Basics Example

Step 1: Install Redux Toolkit and React Redux

npm install @reduxjs/toolkit react-redux

Redux Toolkit is the official, recommended way to use Redux.

Step 2: Create a Redux Store

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

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

Step 3: Create a Slice (Reducer + Actions)

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;

Redux Toolkit allows safe state mutation using Immer.

Step 4: Provide Store to React App

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 Components

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./counterSlice";

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default Counter;

Redux Advanced Concepts

Multiple Reducers

reducer: {
  user: userReducer,
  cart: cartReducer,
}

Keeps state modular and scalable.

Async State Management with Redux Thunk

Redux Thunk allows handling async logic like API calls.

Example

export const fetchUsers = () => async (dispatch) => {
  dispatch(startLoading());
  const response = await fetch("/api/users");
  const data = await response.json();
  dispatch(setUsers(data));
};

Redux DevTools

Redux DevTools allow:

• Time-travel debugging
• Action tracking
• State inspection

Essential for debugging large applications.

Normalized State Structure

Best practice:

• Store data as objects instead of arrays
• Use IDs as keys
• Avoid deep nesting

This improves performance and maintainability.

Redux vs Context API

When to Use Redux

Use Redux when:

• App state is complex
• Many components share state
• Predictable state changes are required
• Debugging and scalability matter

Avoid Redux when:

• App is small
• State is simple
• Local or Context state is sufficient

Common Mistakes in Redux

• Using Redux for all state
• Over-engineering small apps
• Not normalizing data
• Mutating state outside reducers
• Ignoring Redux Toolkit

Interview Questions and Answers – Redux

1. What is Redux?

Redux is a predictable state management library for JavaScript applications.

2. What are the core principles of Redux?

Single source of truth, read-only state, and pure reducers.

3. What is a reducer?

A pure function that returns new state based on an action.

4. What is Redux Toolkit?

An official library that simplifies Redux development.

5. What is useSelector?

A hook to read data from the Redux store.

6. What is useDispatch?

A hook to dispatch actions to the store.

7. How does Redux handle async operations?

Using middleware like Redux Thunk.

8. Is Redux better than Context API?

Redux is better for large, complex applications.

9. What is a slice in Redux?

A slice combines reducer logic and actions in one file.

10. Does Redux cause performance issues?

No, if used correctly with proper state structure.