How to Debug Redux Toolkit in React

Debugging state management in React applications can be challenging, but Redux Toolkit simplifies this process through built-in integration with powerful developer tools. This article provides a straightforward guide on how to debug Redux Toolkit in React, covering how to install and use the Redux DevTools Extension, customize store configurations, trace actions to their source code, and log state changes directly to the console.

Install and Use Redux DevTools

Redux Toolkit (RTK) enables Redux DevTools integration by default. To use it, you must install the Redux DevTools extension for your preferred browser (available for Chrome, Firefox, Safari, and Edge).

Once installed: 1. Open your React application in the browser. 2. Open the browser’s Developer Tools (F12 or right-click and select Inspect). 3. Click on the Redux tab.

The DevTools interface allows you to view the real-time state tree, see a history of dispatched actions, inspect action payloads, and use “Time Travel” to step backward and forward through state changes to see how the UI reacts.

Configuring DevTools in configureStore

While DevTools is enabled by default, you may want to customize its behavior or disable it in production environments for security and performance reasons. You can manage this using the devTools field in configureStore:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './slices';

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

export default store;

Setting devTools to false completely disables the browser extension’s ability to connect to and inspect your Redux store.

Tracing Actions to Source Code

If you have a complex application, it can be difficult to locate which component dispatched a specific action. You can configure Redux DevTools to capture a stack trace for every action:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './slices';

const store = configureStore({
  reducer: rootReducer,
  devTools: {
    trace: true,
    traceLimit: 25, // Limits the stack trace depth for performance
  },
});

With trace set to true, you can click on any action in the DevTools “Action” panel, select the Trace tab, and view the exact line of code in your React project that triggered the dispatch.

Logging State Changes in the Console

For developers who prefer quick console logs over a GUI tool, you can integrate a logging middleware like redux-logger.

First, install the package:

npm install redux-logger

Next, add the logger to Redux Toolkit’s middleware chain using getDefaultMiddleware:

import { configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import rootReducer from './slices';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

export default store;

Once configured, every dispatched action, along with the previous state, action payload, and the resulting next state, will be formatted and logged directly to your browser’s console.