使用 redux-devtools-extension 查看 Redux 中状态变化

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/zgd826237710/article/details/86170945

本文简单介绍了在 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