Redux DevTools – Diff Monitor

5.0 has been released with support for React 15. It contains other improvements to performance (such as calculating diff only when an action is expanded) and some cosmetic changes.

This project provides an alternate monitor for Redux DevTools. The primary goal of this monitor is to highlight the changes to an application's state from action to action. This tool includes the main features from the default DevTools monitor (rollback, commit, reset and individual action toggles).

Imgur

Installation Examples

See the Redux Devtools documentation for full details about how to use monitors.

Standalone Monitor

To use Diff Monitor by itself along with Redux Devtools, simply pass it to the createDevTools function directly.

Install from npm: npm install --save-dev redux-devtools redux-devtools-diff-monitor

import React from 'react';
import { createDevTools } from 'redux-devtools';
import DiffMonitor from 'redux-devtools-diff-monitor';

export default createDevTools(
  <DiffMonitor />
);

Using DockMonitor

The DockMonitor component provides common docking functionality that makes monitors easier to work with. See the documentation for additional details.

Install from npm: npm install --save-dev redux-devtools-dock-monitor redux-devtools-diff-monitor

import React from 'react';
import { createDevTools } from 'redux-devtools';
import DiffMonitor from 'redux-devtools-diff-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

export default const DevTools = createDevTools(
    <DockMonitor
        toggleVisibilityKey='ctrl-h'
        changePositionKey='ctrl-q'
    >
        <DiffMonitor theme='tomorrow' />
    </DockMonitor>
);

Usage

New actions appear at the top of the monitor as they occur.
Actions will be minimized by default; actions shown in green are causing a state mutation.
Click an action name to expand its pane to view the state mutations the action caused.
Click "disable" next to any action name to ignore that action and roll back the state mutations that action caused.
As in the default Redux DevTools, click 'Commit' to reset the monitor and set the current app state as the rollback point. If you click rollback after clicking commit, actions will be replayed through the commit point.

Current Tags