使用Redux DevTools浏览器插件调试redux

与redux的Devtools模块不一样，该工具主要依赖浏览器插件完成。模式也比Devtools简单点。git

step1 下载插件

Chrome地址（360极速模式也能够用）：
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljdgithub

火狐地址：
https://addons.mozilla.org/en-US/firefox/addon/remotedev/web

step2 添加createstore最后一个参数

原来代码：chrome

const store = createStore(
   reducer /* preloadedState, */
 );

修改成：redux

const store = createStore(
   reducer, /* preloadedState, */
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

那么若是你使用了Middleware，原代码是浏览器

const store = createStore(
   reducer, /* preloadedState, */
   applyMiddleware(thunk)
 );

怎么办？app

这样修改svg

store = createStore(
        combineReducers(reducers),
        compose(applyMiddleware(thunk),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) //插件调试，未安装会报错
    );

使用插件首先要导入compose，而后再使用compose将Middleware和插件调用组合起来。工具

好了问题又来了，没有安装插件的同窗发现运行出错了。怎么办？很简单，作个判断便可，再继续修改一下：ui

import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import * as reducers from './auto/reducers';
import thunk from 'redux-thunk';

let store;
if(!(window.__REDUX_DEVTOOLS_EXTENSION__ || window.__REDUX_DEVTOOLS_EXTENSION__)){
    store = createStore(
        combineReducers(reducers),
        applyMiddleware(thunk)
    );
}else{
    store = createStore(
        combineReducers(reducers),
        compose(applyMiddleware(thunk),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) //插件调试，未安装会报错
    );
}

export default store;

这样先判断一下是否安装了插件，未安装则不使用插件，不然使用插件。

参考原文连接：
https://github.com/zalmoxisus/redux-devtools-extension?utm_source=tuicool&utm_medium=referral

另外一种Devtools模块方式介绍请移步下面文章：
http://www.jianshu.com/p/a2d4c1856560