Redux DevTools：Redux調試工具

Redux DevTools Chrome插件開發背景

在vue中型項目開發的過程中，一般都是要用到vuex這個狀態管理工具的，這樣可以方便我們管理全局的狀態，同時，為了在開發的過程中，更加方便地實時查看到state狀態，我們會使用 vue-devtool工具，這樣就可以在瀏覽器中實時看到 state的變化以及觸發的mutations 等等。 在react的開發過程中也是如此，redux類似于vue中的vuex，也是狀態管理工具，而我們今天要介紹的是一款可以在瀏覽器中選擇使用redux-devtools工具來進行使用了redux項目的開發的chrome插件，通過redux-devtools， 我們可以清晰的看到當前 store 倉庫中的 state 是怎么樣的，在可視化工具的左邊，我們還可以看到觸發的action的變化。 這樣，使得我們開發過程中很方便地進行調試。 

Redux DevTools Chrome插件使用方法

1.在使用Chrome Redux調試插件之前，我們需要做一些項目的基本配置。我們要安裝到項目的一些基本使用，如： react、redux、react-redux等。基本框架如下:

import Redux from 'redux' 

// 引入createStore創建store，引入applyMiddleware 來使用中間件

 import {createStore, applyMiddleware} from 'redux' 

// 引入所有的reducer

import storeReducer from '../Reducer/index.jsx'

export default  createStore(storeReducer);

2.在谷歌應用商店下載redux-devtools，去谷歌應用商店搜索redux-devtools直接安裝即可。也可以在本站離線下載安裝chrome redux調試插件，離線安裝的方法參照：chrome插件的離線安裝方法。最新chrome瀏覽器下載地址：http://www.djfsmith.com/category/chrome/。插件安裝成功后，在瀏覽器的右上角會有相關的顯示。 
3.要想使用chrome redux調試插件，還需要在項目中安裝 redux-devtools-extension 插件。其安裝方法如下：
即在項目中直接執行下面的安裝命令：

npm install redux-devtools-extension --save-dev

4. 安裝成功后，還需要redux-devtools在項目中的配置，實際上就是在創建store的時候把redux-devtools安裝即可。

import Redux from 'redux'

// 引入createStore創建store，引入applyMiddleware 來使用中間件

import {createStore, applyMiddleware} from 'redux'

// 引入所有的reducer

import storeReducer from '../Reducer/index.jsx'

// 利用redux-logger打印日志

import {createLogger} from 'redux-logger'

// 安裝redux-devtools-extension的可視化工具。

import { composeWithDevTools } from 'redux-devtools-extension'

// 使用日志打印方法， collapsed讓action折疊，看著舒服。

const loggerMiddleware = createLogger({collapsed: true});

export default  createStore(   

 storeReducer,   

 composeWithDevTools(    )

);

Redux DevTools Chrome插件聯系方法

內容由：https://github.com/zalmoxisus/redux-devtools-extension提供