在调试一个Chrome插件的时候,第一次用到了Redux DevTools的远程模式,进而了解到React Native的开发朋友们平时都是怎么调试redux store的。
使用远程模式,需要App在启用Redux DevTool的基础上,再添加[remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools)这个库。按照Github上的指示,只需要做以下几件事:
打开命令行工具,指向项目目录,运行以下命令行:
npm i remote-redux-devtools -D
import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
const store = createStore(reducer, devToolsEnhancer(options));
这里将remote-redux-devtools
提供的devToolsEnhancer
作为redux中间件传入。devToolsEnhancer
可以接受一个Object类型的配置。没有提供域名配置的话,它会默认使用一个[remotedev.io](http://remotedev.io/)
的远程服务器(看了一下github issue发现好像经常会挂)来帮助通信,这就会把你的数据通过网络传送到远程服务器,插件再进行显示。
大部分人应该都不希望自己的数据被传到公用的服务器吧。因此它也提供了可以设置自己本地服务器的方案。就是使用remotedev-server这个node开源项目在自己电脑上设置一个简单的本地服务器。
假设我们将这个服务器挂在localhost:8000
上,代码修改如下:
import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
const store = createStore(reducer, devToolsEnhancer({
hostname: 'localhost',
port: 8000
));
来指示中间件把数据发送到本地服务器。
如果有多个redux中间件的话,那就用composeEnhancers
:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';
const composeEnhancers = composeWithDevTools({
realtime: true,
port: 8000
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware)
));
如上所述,本地的redux dev tool服务器需要在本地安装remotedev-server。
npm i remotedev-server -D
然后便可以在项目目录中,通过如下命令启动它:
npx remotedev --hostname=localhost --port=8000
这里,我们指定的hostname与port要跟上一步“修改创建Store”代码的设置一样。(localhost:8000其实是remotedev-server的默认配置,启动的时候可以不指定)。
这里remote-dev-tools
只会在两种情况下被启用:
NODE_ENV
为development
开发模式的时候composeWithDevTools()
选项中有realtime: true
的时候简单来说,记得启动开发调试服务器的时候带上这个环境变量,如:
$: NODE_ENV=development npm start
然后打开Redux DevTool 的远程调试模式。方法有多种,我感觉最简单的就是直接在浏览器里打开 http://localhost:8000
,就是我们刚刚启动 RemoteDev Server的地址。
或者你也可以在Chrome里通过Redux DevTools插件打开。在任何一个网页的地址栏右边图标(找不到的话点击三个点的那个图标打开的下拉列表第一行)里点击Redux DevTools图标:
可以看到里面有一个Open Remote DevTools
的选项。点击会打开如下窗口:
这就是远程模式的Redux插件啦!但是现在没有任何东西, 因为它默认是跟[remotedev.io](http://remotedev.io/)
通信。我们需要告诉它应该跟我开的本地服务器localhost:8000
通信才对:
点击提交,应该就能看到你的redux store啦!
对了,在配置的时候,我并没有一下就成功,远程模式一直都没有办法接收到数据。最后发现App在发送数据的时候提示websocket无法连接上我的本地服务器,顺藤摸瓜发现有人提交了Chrome v77在websocket API上有bug?,希望看此文的小伙伴不要跟我一样被坑。