Redux-DevTools是一款非常好用的谷歌瀏覽器調(diào)試插件，用于調(diào)試應(yīng)用程序的狀態(tài)更改，提供redux-devtools離線安裝crx文件，通過(guò)redux-devtools， 我們可以清晰的看到當(dāng)前store倉(cāng)庫(kù)中的state是怎么樣的，在可視化工具的左邊，我們還可以看到觸發(fā)的action的變化，感興趣的朋友不要錯(cuò)過(guò)了。

使用方法

1、在使用Chrome Redux調(diào)試插件之前，我們需要做一些項(xiàng)目的基本配置。我們要安裝到項(xiàng)目的一些基本使用，如： react、redux、react-redux等?；究蚣苋缦?

import Redux from 'redux'

// 引入createStore創(chuàng)建store，引入applyMiddleware 來(lái)使用中間件

import {createStore, applyMiddleware} from 'redux'

// 引入所有的reducer

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

export default  createStore(storeReducer);

2、下載安裝redux-devtools。

3、要想使用chrome redux調(diào)試插件，還需要在項(xiàng)目中安裝 redux-devtools-extension 插件。其安裝方法如下：

即在項(xiàng)目中直接執(zhí)行下面的安裝命令：

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

4、安裝成功后，還需要redux-devtools在項(xiàng)目中的配置，實(shí)際上就是在創(chuàng)建store的時(shí)候把redux-devtools安裝即可。

import Redux from 'redux'

// 引入createStore創(chuàng)建store，引入applyMiddleware 來(lái)使用中間件

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(    )

);