Redux DevTools 调试工具

在 chrome 应用商店安装 Redux DevTools 扩展程序，可以帮助开发者更好地调试 Redux。

Redux DevTools 默认是关闭的。官方建议在开发环境下开启，在生产环境下关闭，以避免数据泄漏。

在基础的 Store 中开启 Redux DevTools 。

// store/index.js
import {createStore} from 'redux'
import reducer from './reducer'

export default createStore(
   reducer,
   // 需判断环境，仅在开发环境下添加以下一行代码
	window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

在使用了中间件的 Store 中开启 Redux DevTools 。

import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

// 需判断环境，仅在开发环境下添加以下一行代码
// 如果安装了 redux devtools 扩展程序，则使用 redux devtools 扩展程序，否则使用 redux 中默认提供的 compose
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

export default createStore(reducer, composeEnhancers(applyMiddleware(thunk)))