2019-03-19 Redux调试工具介绍

remotedev-app 和 redux-devtools

1. redux-devtools 是什么

DevTools for Redux with hot reloading, action replay
本地调试（比如react）

2. remote-redux-devtools 是什么

Redux DevTools remotely.
远程调试（比如react native）

3. remotedev-app 是什么？

Web, Electron and Chrome app for monitoring remote-redux-devtools.
比如 ：remotedev.io.
remote-redux-devtools 的 监视器

基于 remotedev-app 或 redux-devtools 、redux-devtools 的redux 调试工具有哪些？

• redux-devtools-extension.
• react-native-debugger - Electron app, which already includes remotedev-server, remotedev-app and even React DevTools.
• remotedev-rn-debugger - Injecting remotedev-app monitor into official Remote debugger of React Native.

• atom-redux-devtools - Used in Atom editor.
• vscode-redux-devtools - Used in Visual Studio Code.

React 开发时如何调试Redux

使用 redux-devtools-extension

1. 使用浏览器插件的形式：
   Chrome浏览器：下载浏览器插件 Chrome Web Store;
   于是浏览器的全局对象window中就有了以下api

window._REDUX_DEVTOOLS_EXTENSION_ （适用于基础的store）
window._REDUX_DEVTOOLS_EXTENSION_COMPOSE_ （适用于有middleware 的store）

然后

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware)
  ));

2. 或者通过npm包的形式

npm install --save-dev redux-devtools-extension

然后

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

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

React Native 开发时如何调试redux

react-native-debugger

The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools

react-native-debugger 是用 electron 构建的app，包含React Inspector、Redux DevTools

在GitHub下载此APP，然后集成的方法同上