State Management with Redux

Redux is a state management library used to manage and centralize application state in a predictable way. It is commonly used in medium to large React applications where state needs to be shared across many components.

Why Redux?

Redux solves problems like:

• Prop drilling across many components

• Difficult-to-track state changes

• Inconsistent global state

Redux provides:

• Single source of truth

• Predictable state updates

• Easy debugging

Core Redux Principles

1. Single Store
   All application state is stored in one object.

2. State is Read-Only
   State can only be changed by dispatching actions.

3. Changes via Pure Functions
   Reducers define how state changes.

Redux Data Flow

1. UI triggers an action

2. Action is dispatched

3. Reducer processes the action

4. Store updates state

5. UI re-renders with new state

Key Redux Concepts

Store

Holds the entire application state.

const store = createStore(reducer);

Actions

Plain JavaScript objects describing what happened.

{
  type: "INCREMENT"
}

Reducers

Functions that update state based on actions.

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

Using Redux with React (Redux Toolkit)

Redux Toolkit (RTK) is the official, recommended way to use Redux.

Installation

npm install @reduxjs/toolkit react-redux

Creating a Slice

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

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment: state => {
      state.count += 1;
    },
    decrement: state => {
      state.count -= 1;
    }
  }
});

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

Creating the Store

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

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

Providing the Store to React

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

<Provider store={store}>
  <App />
</Provider>

Accessing Redux State

Reading State (useSelector)

import { useSelector } from "react-redux";

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

Updating State (useDispatch)

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

const dispatch = useDispatch();
dispatch(increment());

Async State (Redux Thunks)

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

Redux Toolkit simplifies async logic using createAsyncThunk.

Redux vs Context API

When to Use Redux

✅ Use Redux when:

• App has complex shared state

• Many components depend on same data

• State logic is large and structured

❌ Avoid Redux when:

• App is small

• State is local

• Context + hooks are sufficient

Best Practices

• Use Redux Toolkit

• Keep slices small and focused

• Avoid storing UI-only state

• Normalize complex data

Key Takeaways

• Redux manages global state predictably

• Actions describe changes

• Reducers update state

• Redux Toolkit is the modern standard