使用 redux-devtools-extension 查看 Redux 中狀態變化

本文簡單介紹了在 Redux 使用 redux-devtools-extension 插件的用法，能夠對狀態變化進行可視化查看。

本文例子源碼

源碼地址

歡迎 Star！歡迎 Watch！

前提條件

請先安裝 redux：npm install redux -S

redux-devtools-extension 的使用

用法很是簡單，只須要三步，並且代碼修改極少，跟着下面的提示進行操做便可

在項目中安裝插件

$ npm install redux-devtools-extension -D
複製代碼

在谷歌瀏覽器中安裝 Redux DevTools 擴展工具

• 若是能夠訪問谷歌擴展程序，直接在 Chrome 網上應用商店下載便可

• 若是不能訪問，能夠百度搜索資源進行下載

• 下載完成以後

  • 能夠在瀏覽器工具欄右上角能夠看到圖標（當應用能夠使用該工具時，圖標變亮）

    

  • 在頁面上右鍵能夠看到 Redux DevTools 選項

  • 打開控制檯，在菜單欄能夠找到 Redux 菜單欄 此時項目中還沒有應用工具，面板應該這樣顯示：

    

在代碼中添加用法

const { createStore } = require('redux');
// 引入工具插件
const { composeWithDevTools } = require('redux-devtools-extension');
// 建立 store 時，傳入參數
const store = createStore(reducer, composeWithDevTools());
複製代碼

此時啓動應用，在控制檯找到 Redux 菜單，點擊切換，就能夠正常顯示的場景：

擴展

當 Redux 包含其餘中間件進行使用時

// 建立 Store 的參數稍微發生改變
const { createStore, applyMiddleware } = require('redux');
// 引入工具插件
const { composeWithDevTools } = require('redux-devtools-extension');
// 建立 Store
const storeCompose = createStore(reducer, composeWithDevTools(
    applyMiddleware(...middleware)
    // other store enhancers if any
));
複製代碼

只但願在開發環境使用

const enhancers = process.env.NODE_ENV === "development" ? composeWithDevTools(
        applyMiddleware(middleware)
        // other store enhancers if any
    )
    :
    applyMiddleware(thunk);
const storeEnv = createStore(counters, enhancers);
複製代碼

官方說明

更多信息能夠查看：redux-devtools-extension 官方 Github