Redux DevTools是用于調(diào)試應用程序的狀態(tài)更改的插件，能夠幫助用戶清晰的看到當前store倉庫中的state，以及觸發(fā)的action的變化，除了Redux之外，它還可以與其他處理狀態(tài)的體系結(jié)構(gòu)一起使用，有需要的用戶不要錯過了，歡迎下載使用！

插件介紹

Redux DevTools用于調(diào)試應用程序的狀態(tài)更改。該擴展為Redux開發(fā)工作流程提供了啟動功能。這是一個開源項目。

使用方法

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

import Redux from 'redux'

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

import {createStore, applyMiddleware} from 'redux'

// 引入所有的reducer

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

export default createStore(storeReducer);

2、下載安裝redux-devtools。

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

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

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

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

import Redux from 'redux'

// 引入createStore創(chuàng)建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( )

);

安裝說明

1.下載安裝文件

下載插件，并在瀏覽器安全提示時選擇【保留】，在下載文件夾中找到下載好的文件，后綴是.crx 。

說明：若出現(xiàn)安全提示，請選擇保留。這是瀏覽器的默認設置，我們的插件不會危害你的計算機。

2. 打開擴展程序安裝頁面

復制chrome://extensions并粘貼到地址欄，按回車鍵進入擴展程序安裝頁面，打開右上角的【開發(fā)者模式】。

3. 安裝插件

將下載好的.crx文件拖拽到到擴展安裝頁面內(nèi)，等待數(shù)秒，在安裝彈窗內(nèi)點擊添加即可。