Remote Redux DevTools 使用指南

Remote Redux DevTools 使用指南

remote-redux-devtools Redux DevTools remotely. 项目地址: https://gitcode.com/gh_mirrors/re/remote-redux-devtools

1. 项目介绍

Remote Redux DevTools 是一个用于远程监控 Redux 应用状态和动作的工具。它允许开发者在非本地环境中，如 React Native、混合应用、桌面应用和服务器端 Redux 应用中，查看和调试状态变化。这个工具通过一个远程服务器与 Redux 应用通信，使得状态的监控和动作的派发更加灵活和方便。

2. 项目快速启动

安装

首先，你需要将 Remote Redux DevTools 添加到你的项目中：

npm install --save-dev remote-redux-devtools

对于 Windows 用户，请使用 remote-redux-devtools@0.5.0 版本，因为新版本在 Windows 上存在已知问题。

使用

添加 DevTools 增强器到你的商店

如果你有一个基本的 Redux 商店，如官方 Redux 文档所述，只需将以下代码替换：

import { createStore } from 'redux';
const store = createStore(reducer);

为：

import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
const store = createStore(reducer, devToolsEnhancer());

使用 DevTools 的 compose 辅助函数

如果你设置了带有中间件和增强器的商店，如 redux-saga 等，使用 composeWithDevTools 导出是至关重要的。否则，从 Redux DevTools 派发的动作将不会流到你的中间件。

将以下代码：

import { createStore, applyMiddleware, compose } from 'redux';
const store = createStore(reducer, preloadedState, compose(applyMiddleware(...middleware), /* 其他商店增强器（如果有）*/));

替换为：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';
const store = createStore(reducer, /* preloadedState */, composeWithDevTools(applyMiddleware(...middleware), /* 其他商店增强器（如果有）*/));

启用

为了在生产环境中默认不允许，增强器仅在 process.env.NODE_ENV === 'development' 时生效。

对于 Webpack，你应该在 webpack.config.dev.js 中这样添加：

// ...
plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development')
  })
],
// ...

如果你没有设置 NODE_ENV，可以将 realtime 参数设置为 true 或设置为其他全局变量以在生产环境中关闭。

监控

使用我们的监控应用程序来检查和派发动作：

• redux-devtools-extension - 点击 "Remote" 按钮或按下 Cmd+Ctrl+Arrow up 打开远程监控。
• remotedev-rn-debugger - 在 React Native 调试器中作为码头监控器使用。
• atom-redux-devtools - 在 Atom 编辑器中使用。
• redux-dispatch-cli - Redux 远程派发的 CLI 工具。
• vscode-redux-devtools - 在 Visual Studio Code 中使用。

使用 remotedev-app 创建你自己的监控应用。

通过本地服务器通信

使用 remotedev-server CLI 在本地运行它，以便使连接更快，且不需要互联网连接。你可以在你的 server.js 脚本中导入它，并与你的开发服务器一起启动 remotedev-server：

var remotedev = require('remotedev-server');
remotedev({
  hostname: 'localhost',
  port: 8000
});

对于 React Native，你可以使用 remotedev-rn-debugger，它已经包含了 remotedev-server。

3. 应用案例和最佳实践

• 在开发 React Native 应用时，使用 remotedev-rn-debugger 可以更方便地在设备上查看和调试状态。
• 在复杂的应用中，使用 composeWithDevTools 确保 Redux DevTools 可以与你的中间件和增强器协同工作。
• 在持续集成环境中，可以设置 sendOnError 参数来捕获和记录异常，以便于问题追踪。

4. 典型生态项目

• redux-devtools-extension：Redux DevTools 的浏览器扩展。
• remotedev-rn-debugger：为 React Native 应用提供的远程调试器。
• redux-dispatch-cli：命令行工具，用于远程派发 Redux 动作。
• vscode-redux-devtools：Visual Studio Code 插件，用于集成 Redux DevTools。

以上是 Remote Redux DevTools 的使用指南，希望对你有所帮助。

remote-redux-devtools Redux DevTools remotely. 项目地址: https://gitcode.com/gh_mirrors/re/remote-redux-devtools