【React.js 09】Redux调试工具

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)

Done!