使用redux-devtools工具

　　在vue中型項目開發的過程中，一般都是要用到vuex這個狀態管理工具的，這樣可以方便我們管理全局的狀態，同時，為了在開發的過程中，更加方便地實時查看到state狀態，我們會使用 vue-devtool 工具，這樣就可以在瀏覽器中實時看到 state 的變化以及觸發的 mutations 等等。 

　　

　　在react的開發過程中也是如此，redux類似於vue中的vuex，也是狀態管理工具，同樣，為了實時觀察（而不是討厭的console.log()），我們一般都會選擇使用redux-devtools工具來進行使用了redux項目的開發。 

　　

　　我們先來看看最終安裝的效果吧：

    

 

　　如上所示： 通過redux-devtools， 我們可以清晰的看到當前 store 倉庫中的 state 是怎么樣的，在可視化工具的左邊，我們還可以看到觸發的action的變化。 這樣，使得我們開發過程中很方便地進行調試。 

 

　　下面介紹使用方法：

 

第一步：項目的基本配置

　　首先，我們要安裝到項目的一些基本使用，如： 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);

 

 

第二步： 在谷歌應用商店下載redux-devtools

　　去谷歌應用商店搜索redux-devtools直接安裝即可。 成功后，在瀏覽器的右上角會有相關的顯示。 

 

 

 

第三步： 項目中安裝  redux-devtools-extension  插件

　    即在項目中直接執行下面的安裝命令：

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

　　

 

 

第四步： 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(
    )
);

 

 

 

ok! 到這里，我們就可以運行react-redux項目，這時就可以使用調試工具調試了。