使用 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