How to Debug Redux Store in React

Debugging the Redux store in a React application is essential for tracking state changes, inspecting dispatched actions, and ensuring a predictable data flow. This article provides a straightforward, step-by-step guide on how to debug your Redux store using the Redux DevTools Extension, logging middleware like redux-logger, and native browser debugging tools to quickly isolate and resolve state management issues.

1. Use the Redux DevTools Extension

The Redux DevTools Extension is the most powerful tool for debugging Redux. It allows you to inspect every action dispatched, view the state tree at any point in time, and perform “time-travel debugging” by stepping backward and forward through state changes.

Step 1: Install the Browser Extension

Install the Redux DevTools extension for your preferred browser (available for Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari).

Step 2: Configure Your Redux Store

If you are using Redux Toolkit (RTK), Redux DevTools integration is enabled automatically. No extra configuration is needed.

import { configureStore } from '@reduxjs/store';
import counterReducer from './counterSlice';

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

If you are using legacy Redux (createStore), you must manually enable the DevTools extension when creating the store:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

Step 3: Inspecting the Store

Open your browser’s Developer Tools (F12) and navigate to the Redux tab. Here, you can utilize three main views: * Action Tab: Shows a list of all dispatched actions on the left. Clicking an action reveals its payload. * State Tab: Displays the entire Redux state tree at the moment of the selected action. * Diff Tab: Highlights only the specific values in the state that changed as a result of the selected action. * Time Travel: Use the play, pause, and slider controls at the bottom of the panel to step through actions and watch your UI update in real-time.

2. Implement Redux Logger Middleware

If you prefer debugging directly inside your browser’s console, redux-logger is a middleware that logs every action, the previous state, and the next state in a highly readable format.

Step 1: Install the Package

Run the following command in your terminal:

npm install redux-logger
# or
npm install --save-dev @types/redux-logger (for TypeScript users)

Step 2: Add Middleware to Redux Toolkit

Import logger and add it to your middleware chain:

import { configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import counterReducer from './counterSlice';

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

When you dispatch an action, your browser console will now display formatted, color-coded logs showing the exact state transition.

3. Debugging inside React Components

To inspect Redux state or check if actions are firing correctly from within your React components, you can use standard React and JavaScript debugging techniques.

Use console.log inside useSelector

To see when a component re-renders due to a state change, you can log the state inside the useSelector hook:

const counter = useSelector((state) => {
  console.log('Current counter state:', state.counter);
  return state.counter;
});

Use breakpoints in Redux Reducers

If a state update is producing incorrect data, open your browser’s Sources tab, locate your reducer file, and place a breakpoint inside the case reducer. Trigger the action in your UI, and the browser will pause execution, allowing you to inspect the incoming action.payload and the current state variables before they are updated.