Redux DevTools Extension如何在Mac本安装与项目中启用

Redux DevTools在react项目开发中可快速进行bug定位，调试真的很方便，安装和启用也很简单。

• 安装
  Mac本上安装也很方便，我用的是Chrome浏览器，直接在Chrome应用商店安装就可以了。https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=zh-CN
  

• 项目中启用
  安装后需要改动一点代码。例如我未启用之前代码为：

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import rootReducer from './reducers'

const store = createStore(rootReducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

然后引入redux的 applyMiddleware, compose，和redux-thunk的thunk，稍微改动点代码后就可以正常启用Redux DevTools插件了。最终代码改为如下：

import React from 'react'
import {render} from 'react-dom'
import {createStore, applyMiddleware, compose} from 'redux';
import {Provider} from 'react-redux'
import thunk from 'redux-thunk';
import App from './components/App'
import rootReducer from './reducers'

const store = createStore(rootReducer, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : f => f
))

render(
  <Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'))

插件启用后效果如下：

该插件官方还提供了其他几种启用方式说明，大家可以自行选择合适的方式接入。😆