Redux - Devtools

Redux - DevTools

Redux DevTools provide an incredibly powerful debugging environment for your Redux application. They allow you to inspect every action dispatched, view the state changes that resulted, and even ‘time travel’ by reverting or replaying actions.

Redux DevTools Extension

The most common way to use Redux DevTools is via the Redux DevTools Extension, a browser extension available for Chrome, Firefox, Edge, and other browsers.

Installation Links:

• Chrome: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
• Firefox: https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/
• Other Browsers: Check the main repository: https://github.com/reduxjs/redux-devtools

Once installed, you need to configure your Redux store to connect to the extension.

Integration with Redux Toolkit

If you are using Redux Toolkit’s configureStore, the DevTools Extension integration is enabled automatically in development mode. No extra setup is usually required!

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

const store = configureStore({
  reducer: rootReducer,
  // devTools: true is the default in development
  // You can explicitly disable it:
  // devTools: process.env.NODE_ENV !== 'production',
});

As long as the extension is installed in your browser and your app is running in a development environment, configureStore handles the connection.

Manual Integration (Legacy or Custom Setups)

If you are using the legacy createStore or have a custom setup, you need to add the enhancer provided by the extension.

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

// Check if the extension exists and add its enhancer
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  /* preloadedState, */
  composeEnhancers(
    applyMiddleware(thunk)
    // Add other store enhancers here
  )
);

This uses compose to combine applyMiddleware with the DevTools enhancer. window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ is injected by the browser extension.

Key Features

Once connected, open your browser’s developer tools and look for the ‘Redux’ tab. You’ll find powerful features:

• Action Inspector: See a log of every action dispatched, including its type and payload.
• State Inspector: View the entire state tree before and after each action. You can explore the state object easily.
• Diff Inspector: See exactly what parts of the state tree changed as a result of an action.
• Time Travel Debugging:
• • Jump: Click the ‘Jump’ button next to an action in the log to revert the state back to how it was just after that action was processed.
• • Skip: Click the ‘Skip’ button to disable a specific action and see how the state would look if that action never occurred. This is great for isolating the effect of specific actions.
• Dispatcher: Manually dispatch actions directly from the DevTools to test reducers or trigger state changes without interacting with the UI.
• Import/Export: Save and load sessions, allowing you to share debugging states.
• Charting: Visualize your state tree.
• Performance Monitoring: Check how long reducers take to process actions.

For example, if you dispatched actions A, B, and C, the log shows them in order. If you ‘Jump’ to action B, the state shown will be the state after B completed, effectively undoing C. If you ‘Skip’ action B, the state will reflect the result of A followed directly by C, as if B never happened.

Redux DevTools are an indispensable tool for understanding data flow, debugging issues, and verifying the behavior of your Redux application.