How to Use Redux DevTools in React for Easy State Debugging

To use Redux DevTools in React, install the Redux DevTools browser extension and configure your Redux store with composeWithDevTools from redux-devtools-extension. This setup lets you track state changes and actions visually in your browser while developing.

Syntax

To enable Redux DevTools, wrap your Redux store enhancer with composeWithDevTools. This function connects your store to the browser extension.

• createStore(reducer, enhancer): Creates the Redux store.
• composeWithDevTools(): Enhances the store to work with DevTools.
• applyMiddleware(): Optional, to add middleware like thunk.

javascript

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

Example

This example shows a simple Redux store setup with DevTools enabled. When you run your React app with this store, the Redux DevTools extension will show all dispatched actions and state changes.

javascript

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

// Simple reducer
const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Create store with DevTools
const store = createStore(counterReducer, composeWithDevTools());

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <Counter />
  </Provider>
);

Output

A webpage showing 'Count: 0' with two buttons '+' and '-'. Clicking buttons updates the count and Redux DevTools shows each action and state change.

Common Pitfalls

• Not installing the Redux DevTools browser extension will prevent you from seeing the state changes.
• Forgetting to wrap the store enhancer with composeWithDevTools means DevTools won't connect.
• Using legacy window.__REDUX_DEVTOOLS_EXTENSION__ directly is less recommended than redux-devtools-extension package.
• Not applying middleware correctly can break DevTools integration.

javascript

/* Wrong way: Missing composeWithDevTools */
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // DevTools won't work here
);

/* Right way: Use composeWithDevTools */
import { composeWithDevTools } from 'redux-devtools-extension';

const storeCorrect = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

Quick Reference

• Install Redux DevTools extension in your browser.
• Install redux-devtools-extension npm package.
• Wrap your store enhancer with composeWithDevTools().
• Use applyMiddleware() inside composeWithDevTools() if you use middleware.
• Open DevTools panel in browser to inspect actions and state.

Key Takeaways

Always install the Redux DevTools browser extension to visualize state changes.

Use the redux-devtools-extension package and wrap your store enhancer with composeWithDevTools.

Include middleware inside composeWithDevTools to keep DevTools working correctly.

Check the DevTools panel in your browser to track dispatched actions and state updates.

Avoid using legacy window.__REDUX_DEVTOOLS_EXTENSION__ directly; prefer the official package.