React State Management

Redux is one of the most powerful state management libraries used in React applications. In this module, we’ll cover why Redux is needed, how it works, and how to implement it efficiently using Redux Toolkit and Redux Thunk.

1. What is Redux and Why Use It?

What is Redux?

Redux is a predictable state container for JavaScript applications. It helps manage global state efficiently and makes state changes traceable, scalable, and maintainable.

Why Use Redux?

 Centralized State Management – Stores the entire application’s state in one place.

Predictable Updates – Uses a strict unidirectional data flow, making state changes clear and debuggable.

Works Well with Large Applications – Ideal for complex state interactions, such as authentication, cart management, or API responses.
Time-Travel Debugging – Redux DevTools allow developers to rewind and replay state changes.

 When to Use Redux?

Use Redux when:
The application has a lot of shared state (e.g., authentication, cart, user settings).

Components deeply nested need access to global state.

You need predictable and trackable state updates.

 When NOT to Use Redux?

For simple apps where Context API or useState is enough.
When state updates are local to a few components.

2. Understanding Redux Concepts: Actions, Reducers, Store

Redux follows a strict architecture to manage state in a predictable way.

Core Concepts:

1 Actions: Define what should happen (e.g., ADD_TO_CART).
2 Reducers: Define how state should change based on an action.
3 Store: The global state container holding all the data.
4 Dispatch: The function used to send actions to the store.
5 Selectors: Functions to retrieve specific state from the store.

Redux Data Flow:

1 Component dispatches an action
2 Reducer updates the state based on the action
3 Updated state is stored in the Redux store
4 Components re-render with the new state.

3. Setting Up Redux in a React Project

Step 1: Install Redux and React-Redux

npm install @reduxjs/toolkit react-redux

Step 2: Create a Redux Store

Create a file store.js:

import { configureStore } from “@reduxjs/toolkit”;

import counterReducer from “./counterSlice”;

export const store = configureStore({

  reducer: {

    counter: counterReducer,

  },

});

Step 3: Create a Reducer (Slice)

Create counterSlice.js:

import { createSlice } from “@reduxjs/toolkit”;

const counterSlice = createSlice({

  name: “counter”,

  initialState: { count: 0 },

  reducers: {

    increment: (state) => {

      state.count += 1;

    },

    decrement: (state) => {

      state.count -= 1;

    },

    reset: (state) => {

      state.count = 0;

    },

  },

});

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

export default counterSlice.reducer;

Step 4: Provide the Store to React App

Wrap your app inside the Provider (in index.js or App.js):

import React from “react”;

import ReactDOM from “react-dom”;

import { Provider } from “react-redux”;

import { store } from “./store”;

import App from “./App”;

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById(“root”)

);

Step 5: Use Redux State in Components

Use useSelector to read state and useDispatch to modify it.

Counter Component Example:

import React from “react”;

import { useSelector, useDispatch } from “react-redux”;

import { increment, decrement, reset } from “./counterSlice”;

function Counter() {

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

  const dispatch = useDispatch();

  return (

    <div>

      <h2>Count: {count}</h2>

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

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

      <button onClick={() => dispatch(reset())}>Reset</button>

    </div>

  );

}

export default Counter;

 Now, Redux manages the counter state globally!

4. Using Redux Toolkit for Simplified State Management

Redux Toolkit (RTK) simplifies Redux by reducing boilerplate code.

Benefits of Redux Toolkit

Less Code – Reduces the need for writing action types and reducers manually.

Built-in createSlice – Automatically creates actions and reducers.

Easier Async Handling – Built-in createAsyncThunk simplifies API calls.

 We already used Redux Toolkit (createSlice) in our counter example!

5. Handling Asynchronous Data with Redux Thunk

Redux does not handle async operations (like API calls) natively. Redux Thunk allows you to write async logic inside actions.

Step 1: Install Redux Thunk

npm install redux-thunk

Step 2: Create an Async Thunk

Example: Fetching data from an API.

usersSlice.js

import { createSlice, createAsyncThunk } from “@reduxjs/toolkit”;

// Async action to fetch users

export const fetchUsers = createAsyncThunk(“users/fetchUsers”, async () => {

  const response = await fetch(“https://jsonplaceholder.typicode.com/users”);

  return response.json();

});

const usersSlice = createSlice({

  name: “users”,

  initialState: { users: [], loading: false, error: null },

  reducers: {},

  extraReducers: (builder) => {

    builder

      .addCase(fetchUsers.pending, (state) => {

        state.loading = true;

      })

      .addCase(fetchUsers.fulfilled, (state, action) => {

        state.loading = false;

        state.users = action.payload;

      })

      .addCase(fetchUsers.rejected, (state, action) => {

        state.loading = false;

        state.error = action.error.message;

      });

  },

});

export default usersSlice.reducer;

Step 3: Use it in a Component

import React, { useEffect } from “react”;

import { useSelector, useDispatch } from “react-redux”;

import { fetchUsers } from “./usersSlice”;

function UsersList() {

  const dispatch = useDispatch();

  const { users, loading, error } = useSelector((state) => state.users);

  useEffect(() => {

    dispatch(fetchUsers());

  }, [dispatch]);

  if (loading) return <p>Loading…</p>;

  if (error) return <p>Error: {error}</p>;

  return (

    <ul>

      {users.map((user) => (

        <li key={user.id}>{user.name}</li>

      ))}

    </ul>

  );

}

export default UsersList;

 Redux Thunk handles async logic cleanly!

6. Best Practices for Efficient Redux Implementation

 Use Redux only for truly global state – Avoid using it for local state (use useState).

Use Redux Toolkit – Reduces boilerplate and improves performance.

Use createSlice – Automatically generates actions and reducers.

Optimize performance with useMemo & useSelector – Prevent unnecessary re-renders.

Use Redux DevTools – Helps debug state changes easily.