使用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項目，這時就能夠使用調試工具調試了。