redux 调试

集成 remote-redux-devtools 便于 redux 调试；

• redux-devtools-extension https://github.com/zalmoxisus/redux-devtools-extension

• remote-redux-devtools https://github.com/zalmoxisus/remote-redux-devtools

Installation

npm install --save-dev remote-redux-devtools

Usage

There are 2 ways of usage depending if you're using other store enhancers (middlewares) or not.

Add DevTools enhancer to your store

If you have a basic store as described in the official redux-docs, simply replace:

import { createStore } from 'redux';
const store = createStore(reducer);

with

import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
const store = createStore(reducer, devToolsEnhancer());
// or const store = createStore(reducer, preloadedState, devToolsEnhancer());

Note: passing enhancer as last argument requires redux@>=3.1.0

When to use DevTools compose helper

If you setup your store with middlewares and enhancers like redux-saga and similar, it is crucial to use composeWithDevTools export. Otherwise, actions dispatched from Redux DevTools will not flow to your middlewares.

In that case change this:

import { createStore, applyMiddleware, compose } from 'redux';

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

to:

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

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

or with devTools' options:

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

const composeEnhancers = composeWithDevTools({ 
realtime: true,
// port: 8000 
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

Enabling

In order not to allow it in production by default, the enhancer will have effect only when process.env.NODE_ENV === 'development'.

For Webpack you should add it as following (webpack.config.dev.js):

// ...
plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development')
  })
],
// ...

In case you don't set NODE_ENV, you can set realtime parameter to true or to other global variable to turn it off in production:

const store = createStore(reducer, devToolsEnhancer({ realtime: true }));

Monitoring

Use one of our monitor apps to inspect and dispatch actions:

• web
• redux-devtools-extension - Click "Remote" button (or press Cmd+Ctrl+Arrow up) to open remote monitoring.
• remotedev-rn-debugger - Used in React Native debugger as a dock monitor.
• atom-redux-devtools - Used in Atom editor.
• redux-dispatch-cli - A CLI tool for Redux remote dispatch.
• vscode-redux-devtools - Used in Visual Studio Code.

Use remotedev-app to create your own monitor app.