redux-devtools-extension

What is redux-devtools-extension?

The redux-devtools-extension package is a powerful tool for debugging Redux applications. It provides a set of tools to help developers track state changes, actions, and store updates in real-time, making it easier to understand and debug the state management in their applications.

What are redux-devtools-extension's main functionalities?

Time Travel Debugging

Time travel debugging allows developers to go back and forth through the state changes, making it easier to identify where things went wrong. The code sample shows how to integrate the Redux DevTools Extension with a Redux store using the `composeWithDevTools` function.

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools());

Action Logging

Action logging provides a detailed log of all actions dispatched to the store, along with the state before and after each action. The code sample demonstrates dispatching an action and how it would be logged by the Redux DevTools Extension.

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools());

store.dispatch({ type: 'INCREMENT' });

State Inspection

State inspection allows developers to view the current state of the Redux store at any point in time. The code sample shows how to create a store and log its current state, which can be inspected using the Redux DevTools Extension.

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools());

console.log(store.getState());

Other packages similar to redux-devtools-extension

redux-logger

redux-logger is a middleware for Redux that logs actions and state changes to the console. It provides a simpler, more lightweight alternative to redux-devtools-extension, focusing primarily on logging rather than providing a full suite of debugging tools.

redux-saga-devtools

redux-saga-devtools is a tool specifically designed for debugging Redux Saga middleware. It provides insights into the effects and actions managed by sagas, making it easier to debug complex asynchronous flows. While it is more specialized than redux-devtools-extension, it offers deeper integration with Redux Saga.

README

Redux DevTools Extension's helper

Usage

Install:

npm install --save redux-devtools-extension

and use like that:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(...middleware)
    // other store enhancers if any
  )
);

or if needed to apply extension’s options:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify here name, actionsBlacklist, actionsCreators and other options
});
const store = createStore(
  reducer,
  composeEnhancers(
    applyMiddleware(...middleware)
    // other store enhancers if any
  )
);

There’re just few lines of code. If you don’t want to allow the extension in production, just use ‘redux-devtools-extension/developmentOnly’ instead of ‘redux-devtools-extension’.

License

MIT