Home

Awesome

Redux DevTools – Diff Monitor

build status npm version npm downloads

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