How to Use Redux Toolkit in a MERN Stack Application (Step-by-Step Guide)

17/07/2025

How to Use Redux Toolkit in a MERN Stack Application (Step-by-Step Guide)

Learn how to integrate Redux Toolkit in your MERN stack app for efficient state management. This tutorial covers setting up Redux with React, creating slices, async thunks, and connecting with Express backend APIs.

Streamline State Management: How to Use Redux Toolkit in a MERN Stack App

In the world of React applications, managing complex state across many components can quickly become challenging. While React's built-in `useState` and `useContext` hooks are excellent for local and component-tree-wide state, global application state often requires a more robust solution. This is where Redux comes in, and specifically, the Redux Toolkit, which simplifies Redux development significantly.

This guide will walk you through integrating Redux Toolkit into your MERN (MongoDB, Express.js, React, Node.js) stack application, providing a clear and efficient way to manage your frontend's global state.

What is Redux Toolkit and Why Use It?

Redux Toolkit (RTK) is the official, opinionated, batteries-included toolset for efficient Redux development. It was created to address common pain points of traditional Redux, such as:

  • Boilerplate: Reducing the amount of repetitive code needed to set up Redux.
  • Complexity: Simplifying common tasks like store configuration, creating reducers, and writing immutable update logic.
  • Best Practices: Encouraging good patterns out-of-the-box, like using Immer for immutable updates.

RTK includes essential packages like Redux, Immer, Redux-Thunk (for async logic), and Reselect, all pre-configured to work seamlessly.

Core Concepts of Redux Toolkit

Redux Toolkit introduces several key abstractions:

  • `configureStore`: A wrapper around the standard Redux `createStore` that simplifies store setup with good defaults (e.g., Redux DevTools Extension support, Redux Thunk middleware).
  • `createSlice`: The most important RTK function. It automatically generates action creators and action types, and a reducer function for a given slice of your state. It uses Immer internally, allowing you to write "mutating" logic directly, which is then translated into immutable updates.
  • `createAsyncThunk`: A utility for handling asynchronous logic (like API calls to your Express backend). It generates pending, fulfilled, and rejected action types automatically.

Frontend Integration: React with Redux Toolkit

Let's set up Redux Toolkit in your React application. We'll create a simple example to manage a list of "items" fetched from a mock API.

1. Install Dependencies

Navigate to your `client` directory and install the necessary packages:

npm install @reduxjs/toolkit react-redux
  • `@reduxjs/toolkit`: The Redux Toolkit library.
  • `react-redux`: Official React bindings for Redux, providing hooks like `useSelector` and `useDispatch`.

2. Create a Redux Slice (`itemsSlice.js`)

Create a file `client/src/features/items/itemsSlice.js` (or similar path):

// client/src/features/items/itemsSlice.js

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

// Define an async thunk for fetching items from the backend
// This will automatically generate 'pending', 'fulfilled', and 'rejected' action types
export const fetchItems = createAsyncThunk(
  'items/fetchItems', // Action type prefix
  async () => {
    // In a real MERN app, this would be your Express backend URL
    const response = await fetch('/api/items');
    if (!response.ok) {
      throw new Error('Failed to fetch items');
    }
    const data = await response.json();
    return data; // This will be the payload of the 'fulfilled' action
  }
);

const itemsSlice = createSlice({
  name: 'items', // Name of the slice, used as a prefix for action types
  initialState: {
    list: [],
    status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
    error: null,
  },
  reducers: {
    // Standard reducer functions (sync actions)
    addItem: (state, action) => {
      state.list.push(action.payload); // Immer allows "mutating" syntax
    },
    removeItem: (state, action) => {
      state.list = state.list.filter(item => item.id !== action.payload);
    },
  },
  // Extra reducers for handling actions from createAsyncThunk
  extraReducers: (builder) => {
    builder
      .addCase(fetchItems.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchItems.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.list = action.payload; // Update the list with fetched data
      })
      .addCase(fetchItems.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message; // Store the error message
      });
  },
});

// Export the auto-generated action creators
export const { addItem, removeItem } = itemsSlice.actions;

// Export the reducer function
export default itemsSlice.reducer;

Explanation of `itemsSlice.js`:

  • `createAsyncThunk`: Defines an asynchronous action (`fetchItems`) that will interact with your Express backend. It handles the different states of an async operation (pending, fulfilled, rejected).
  • `createSlice`:
    • `name`: A string that will be used as the prefix for the generated action types (e.g., `items/addItem`).
    • `initialState`: The initial state for this slice of your Redux store.
    • `reducers`: An object where you define synchronous "reducer" functions. RTK uses Immer, so you can write mutable logic (e.g., `state.list.push()`) and Immer will ensure immutable updates behind the scenes. RTK automatically generates action creators for these.
    • `extraReducers`: This is where you handle actions generated by `createAsyncThunk` (or other slices). The `builder` allows you to add cases for `pending`, `fulfilled`, and `rejected` states of your async thunk.

3. Configure the Redux Store (`store.js`)

Create a file `client/src/app/store.js`:

// client/src/app/store.js

import { configureStore } from '@reduxjs/toolkit';
import itemsReducer from '../features/items/itemsSlice'; // Import your slice reducer

export const store = configureStore({
  reducer: {
    items: itemsReducer, // Assign the itemsReducer to the 'items' slice of your state
    // You can add more reducers here for other features (e.g., 'users', 'auth')
  },
  // `middleware` and `devTools` are configured with good defaults by configureStore
});

Explanation of `store.js`:

  • `configureStore`: This function sets up your Redux store with sensible defaults, including Redux DevTools support and Redux Thunk middleware for handling async actions.
  • `reducer`: An object that defines the root reducer for your store. Each key in this object will correspond to a slice of your overall Redux state.

4. Provide the Store to Your React App (`index.js`)

Wrap your root React component (`App`) with the `Provider` component from `react-redux` in `client/src/index.js`:

// client/src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { store } from './app/store'; // Import your Redux store
import { Provider } from 'react-redux'; // Import Provider

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}> {/* Wrap your App component with Provider */}
      <App />
    </Provider>
  </React.StrictMode>
);

5. Use State and Dispatch Actions in a React Component (`ItemsList.js`)

Create a new component `client/src/components/ItemsList.js` to display and interact with the items state:

// client/src/components/ItemsList.js

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchItems, addItem, removeItem } from '../features/items/itemsSlice';

function ItemsList() {
  // useSelector hook to extract data from the Redux store state
  const items = useSelector((state) => state.items.list);
  const status = useSelector((state) => state.items.status);
  const error = useSelector((state) => state.items.error);

  // useDispatch hook to get the dispatch function
  const dispatch = useDispatch();

  useEffect(() => {
    // Dispatch the async thunk to fetch items when the component mounts
    if (status === 'idle') {
      dispatch(fetchItems());
    }
  }, [status, dispatch]); // Re-run if status changes or dispatch function changes

  const handleAddItem = () => {
    const newItem = { id: Date.now(), name: `New Item ${items.length + 1}` };
    dispatch(addItem(newItem)); // Dispatch a synchronous action
  };

  const handleRemoveItem = (id) => {
    dispatch(removeItem(id)); // Dispatch a synchronous action
  };

  let content;
  if (status === 'loading') {
    content = <p style={{color: '#007bff', boxSizing: 'border-box'}}>Loading items...</p>;
  } else if (status === 'succeeded') {
    content = (
      <ul style={{listStyle: 'none', padding: '0', boxSizing: 'border-box'}}>
        {items.map((item) => (
          <li key={item.id} style={{
            backgroundColor: '#f9f9f9',
            margin: '10px 0',
            padding: '10px 15px',
            borderRadius: '5px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            border: '1px solid #eee',
            boxSizing: 'border-box'
          }}>
            <span style={{color: '#333', boxSizing: 'border-box'}}>{item.name}</span>
            <button onClick={() => handleRemoveItem(item.id)} style={{
              backgroundColor: '#dc3545',
              color: '#fff',
              border: 'none',
              borderRadius: '5px',
              padding: '5px 10px',
              cursor: 'pointer',
              boxSizing: 'border-box'
            }}>Remove</button>
          </li>
        ))}
      </ul>
    );
  } else if (status === 'failed') {
    content = <p style={{color: 'red', boxSizing: 'border-box'}}>Error: {error}</p>;
  }

  return (
    <div style={{
      backgroundColor: '#fff',
      padding: '30px',
      borderRadius: '10px',
      boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
      width: '100%',
      maxWidth: '600px',
      margin: '20px auto',
      boxSizing: 'border-box'
    }}>
      <h2 style={{
        fontFamily: 'Merriweather, serif',
        color: '#222',
        fontSize: '1.8em',
        marginBottom: '20px',
        borderBottom: '2px solid #eee',
        paddingBottom: '10px',
        boxSizing: 'border-box'
      }}>My Items List</h2>
      <button onClick={handleAddItem} style={{
        backgroundColor: '#28a745',
        color: '#fff',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
        fontSize: '1em',
        fontWeight: 'bold',
        marginBottom: '20px',
        boxSizing: 'border-box'
      }}>Add New Item</button>
      {content}
    </div>
  );
}

export default ItemsList;

Explanation of `ItemsList.js`:

  • `useSelector`: A hook to extract data from the Redux store. You pass a "selector function" that receives the entire state and returns the specific piece of state you need.
  • `useDispatch`: A hook that returns a reference to the `dispatch` function from the Redux store. You use this to dispatch actions.
  • `useEffect`: Dispatches `fetchItems()` (our async thunk) when the component mounts, ensuring data is loaded from the backend.
  • `handleAddItem` / `handleRemoveItem`: These functions dispatch the synchronous actions (`addItem`, `removeItem`) defined in our slice.

6. Update `App.js` to use `ItemsList`

Finally, include your new `ItemsList` component in `client/src/App.js`:

// client/src/App.js

import React from 'react';
import ItemsList from './components/ItemsList'; // Import the new component

function App() {
  return (
    <div style={{
      fontFamily: 'Open Sans, sans-serif',
      textAlign: 'center',
      padding: '40px',
      backgroundColor: '#f0f2f5',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      boxSizing: 'border-box'
    }}>
      <h1 style={{
        fontFamily: 'Merriweather, serif',
        color: '#c00',
        fontSize: '3em',
        marginBottom: '20px',
        boxSizing: 'border-box'
      }}>MERN App with Redux Toolkit</h1>
      <ItemsList /> {/* Render your ItemsList component here */}
    </div>
  );
}

export default App;

Backend Interaction (Express.js)

While Redux Toolkit primarily manages frontend state, it often interacts with your Express.js backend for data persistence. Our `fetchItems` async thunk makes a request to `/api/items`. Let's create a simple mock endpoint in your `server/server.js`:

// server/server.js (Add this route)

// ... (existing imports and middleware) ...

// Mock API endpoint for fetching items
app.get('/api/items', (req, res) => {
  console.log('Received GET request for /api/items');
  const mockItems = [
    { id: 1, name: 'Item A' },
    { id: 2, name: 'Item B' },
    { id: 3, name: 'Item C' },
  ];
  res.status(200).json(mockItems);
});

// ... (existing /api/upload and /api/hello routes) ...

// ... (app.listen) ...

In a real application, this endpoint would fetch data from your MongoDB database.

Conclusion

Redux Toolkit significantly simplifies state management in React applications, especially within a MERN stack. By providing opinionated best practices and abstracting away much of the boilerplate, it allows developers to write cleaner, more maintainable Redux code. With `createSlice` for defining state logic and `createAsyncThunk` for handling asynchronous operations, managing your application's global state and interacting with your Express.js backend becomes a much smoother experience.

State management is a crucial part of building scalable and maintainable front-end applications, especially when dealing with complex data flows and asynchronous operations. While the MERN stack—MongoDB, Express.js, React, and Node.js—provides a solid foundation, using Redux Toolkit with React takes your application architecture to the next level.

Redux Toolkit is the official, recommended way to use Redux. It simplifies the setup process, reduces boilerplate, and offers powerful tools like createSlice and createAsyncThunk to handle both synchronous and asynchronous logic efficiently.

Next Blog

How to Build a Blogging Platform with Next.js and MongoDB (Full Stack Guide)

How to Build a Blogging Platform with Next.js and MongoDB (Full Stack Guide)

Learn how to create a full-featured blogging platform using Next.js and MongoDB. This step-by-step guide covers authentication, content creation, database integration, and dynamic routing for blogs.