Redux是用来开发复杂应用的，所以对应的调试工具，就很有必要。
调试工具，官方推荐的是redux-devtools-extension，除了安装外，我们还需要在代码中配置一下。
例子依旧使用上一篇文章中所说的例子，代码有对应的贴在上面了。
第一步，我们安装redux调试工具，是在Chrome中去安装的：
打开谷歌网上应用店：搜索redux
搜索结果
安装第一个，当然，这里我已经安装了。
装好了建议重启一下谷歌浏览器。
（PS:说上不了谷歌网上应用店的，请参照我的这篇文章谷歌插件应用，里面有能让你上谷歌的好东西。）
第二步，在代码中新建store的时候去判断window.devToolsExtension函数是存在，不存在，以一个空函数去替换掉它：
const reduxDevtools = window.devToolsExtension ? window.devToolsExtension : ()=>{}
引入compose，并使用compose结合thunk和window.devToolsExtension结合起来：
//引入compose
import { createStore ,applyMiddleware ,compose} from 'redux'
// 通过reducer创建store，通过compose把几个函数组合起来
const store = createStore(manageCompany, compose(
applyMiddleware(thunk),
reduxDevtools
))
这样，在Chrome的调试窗的redux选项卡，可以实时看到state
注意看右上角的Redux选项卡
这样，调试工具会实时打印出Redux相关的
action、state、Diff等很多详细的信息，具体有什么帮组，要在实际项目中才会体现出来。
上代码：（因为本文仅修改了案例中的index.js文件，所以只上这个文件的）
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { createStore ,applyMiddleware ,compose} from 'redux'
import thunk from 'redux-thunk'
import { manageCompany, hire ,fire ,hireAsync} from './index.redux'
const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : ()=>{}
// 通过reducer创建store，通过compose把几个函数组合起来
const store = createStore(manageCompany, compose(
applyMiddleware(thunk),
reduxDevtools
))
// 定义一个render()函数去渲染页面
function render() {
ReactDom.render(
<App store={store} hire={hire()} fire={fire()} hireAsync={hireAsync()}/>,
document.getElementById('root')
)
}
// 先手动调用一次看看页面效果
render()
// 然后再把render方法传入subscribe作为监听变化时自动刷新调用的方法
store.subscribe(render)
