模块开发之redux-devtools-extension调试工具使用详解(十一)

亦凉 2022-05-21 06:48 390阅读 0赞

## 模块开发之redux-devtools-extension调试工具使用详解(十一) ##

*   *  模块开发之redux-devtools-extension调试工具使用详解(十一)
 *  前言
 *  安装调试工具插件
 *  非侵入式
    
     *  没有使用中间件的情况
     *  使用中间件情况
 *  侵入式
    
     *  安装
     *  没有使用中间件的情况
     *  使用中间件情况
 *  总结
 *  在chrome浏览器里实战

# 前言 #

`redux-devtools`和`redux-devtools-extension`是2个不同的框架。  
`redux-devtools`是侵入式的，是开发环境下开发redux一个强大的开发工具。它使用`monitor`实时监听您的`store`。需要安装模块。  
如果你不想安装任何模块，侵入你的项目里。[`Redux DevTools Extension`][Redux DevTools Extension]是个很好的选择，它支持`chrome`，`Firefox`以及`360`浏览器,它提供了大部分常用的监听器去配置你的项目，不需要安装任何模块（其实有安装选项）。配置极其简单。

本文只介绍redux-devtools-extension。[redux-devtools-extension官方介绍][redux-devtools-extension]

> 注意，版本2.7之后，`window.devToolsExtension`被重命名为`window.__REDUX_DEVTOOLS_EXTENSION__`  
> 或`window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__`，所以项目不建议使用`window.devToolsExtension`方式了。

# 安装调试工具插件 #

[插件安装地址][Link 1]。  
当然你需要安装`googe访问助手`，下载[地址链接][Link 2] `密码：ugqj`。  
google浏览器需要6.6以下版本，因为6.7不支持拖拽安装google访问助手了,需要在线安装。

# 非侵入式 #

## 没有使用中间件的情况 ##

我们知道`createStore()` 的第二个参数是可选的, 用于设置 `state` 初始状态，一般是省略掉的。  
下面代码是在真实环境下使用的，所以我使用了 `process.env.NODE_ENV === 'production'` 去判断当前环境  
实现如下

let store = process.env.NODE_ENV === 'production' ? (
        createStore(reducer, applyMiddleware(thunkMiddleware))
    ) : (
        window.__REDUX_DEVTOOLS_EXTENSION__ ? (
            createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__())
        ) : (
            createStore(reducer, applyMiddleware(thunkMiddleware))
        )
    )

## 使用中间件情况 ##

项目里，除了中间件名称`thunkMiddleware`外，其它复制粘贴即可

let store = process.env.NODE_ENV === 'production' ? (
        createStore(reducer, applyMiddleware(thunkMiddleware))
    ) : (
        window.__REDUX_DEVTOOLS_EXTENSION__ ? (
            createStore(reducer, compose(applyMiddleware(thunkMiddleware), window.__REDUX_DEVTOOLS_EXTENSION__()))
        ) : (
            createStore(reducer, applyMiddleware(thunkMiddleware))
        )
    )

# 侵入式 #

侵入式是要安装redux-devtools-extension该模块的，在文件里引用模块。

## 安装 ##

npm install --save redux-devtools-extension

## 没有使用中间件的情况 ##

import { createStore } from 'redux';
    import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';
    
    const store = createStore(reducer, devToolsEnhancer(
      // Specify here name, actionsBlacklist, actionsCreators and other options if needed
      //一般省略不写
    ));

注意到`logOnlyInProduction`，它表示引入的模块只在生产环境起作用，即 `process.env.NODE_ENV === 'production'`时，对应的开发环境为`developmentOnly`,默认是开发环境使用。

## 使用中间件情况 ##

import { createStore, applyMiddleware } from 'redux';
     import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
    
    const composeEnhancers = composeWithDevTools({
       // options like actionSanitizer, stateSanitizer
     });
    const store = createStore(reducer, composeEnhancers(
       applyMiddleware(...middleware)
     ));

# 总结 #

我推荐方式还是非侵入式的。

# 在chrome浏览器里实战 #

[打开测试网址][Link 3]  
[项目源码][Link 4]  
chrome操作界面如下  
![这里写图片描述][70]

我们可以用时间线还原上一次`state`数据。  
其实界面功能也简单。只要按简单的例子重复学习，即能掌握`redux-devtools-extension`功能。

参考文档  
[redux-devtools攻略][redux-devtools]  
[官方github文档][Link 1]

[Redux DevTools Extension]: https://github.com/reduxjs/redux-devtools
[redux-devtools-extension]: http://extension.remotedev.io/
[Link 1]: https://github.com/zalmoxisus/redux-devtools-extension#usage
[Link 2]: https://pan.baidu.com/s/1D4qWmQyZzHwJLgbsZ9OeTw
[Link 3]: http://zalmoxisus.github.io/examples/counter/
[Link 4]: https://github.com/zalmoxisus/redux-devtools-extension.git
[70]: /images/20220521/a4b37e5fae0845d78e3f8c4a092c94f1.png
[redux-devtools]: http://www.94dreamer.com/index.php/Home/Article/index/id/57