Redux Remote DevTools 使用教程

Redux Remote DevTools 使用教程

redux-remotedev Redux DevTools for production (web and React Native) with a highly flexible API. 项目地址: https://gitcode.com/gh_mirrors/re/redux-remotedev

1. 项目介绍

Redux Remote DevTools 是一个用于生产环境的 Redux DevTools 工具，支持 Web 和 React Native 应用。它允许你在生产环境中接收日志和报告，并将这些数据与 Redux DevTools 扩展或其他监控应用同步。与传统的 Redux DevTools 不同，Redux Remote DevTools 针对生产环境进行了优化，适用于不同的使用场景。

2. 项目快速启动

安装

首先，通过 npm 安装 redux-remotedev：

npm install --save redux-remotedev

如果需要支持 Node 和不支持 fetch 的浏览器，可以安装 isomorphic-fetch 和 es6-promise：

npm install --save isomorphic-fetch es6-promise

使用

在你的 Redux 应用中，添加 redux-remotedev 作为 store 增强器：

import remotedev from 'redux-remotedev';
import 'isomorphic-fetch';
import { createStore } from 'redux';
import reducer from './reducers';

const store = createStore(
  reducer,
  remotedev({
    sendTo: 'http://localhost:8000',
    sendOn: 'SOME_ACTION',
    maxAge: 50
  })
);

3. 应用案例和最佳实践

应用案例

假设你有一个生产环境中的 React 应用，希望在用户遇到错误时自动发送错误报告到远程服务器，并在开发环境中使用 Redux DevTools 进行调试。你可以使用 redux-remotedev 来实现这一功能。

最佳实践

1. 错误报告：通过 sendOnError 选项，监听应用中的所有异常，并在发生异常时自动发送报告。

const store = createStore(
  reducer,
  remotedev({
    sendTo: 'http://localhost:8000',
    sendOnError: true,
    sendingStatus: {
      started(report) {
        console.log('Sending a report', report);
      },
      done(reportId) {
        console.info('The report sent, Open this url to replicate:', `http://localhost:3000/?remotedev_report=${reportId}`);
      },
      failed(error) {
        console.warn('Report cannot be sent', error);
      }
    }
  })
);

2. 自定义发送逻辑：通过 sender 选项，自定义发送报告的逻辑，例如使用 fetch 或直接记录数据。

const store = createStore(
  reducer,
  remotedev({
    sender: (data) => {
      console.warn(data);
    }
  })
);

4. 典型生态项目

remotedev-server

remotedev-server 是一个用于接收和存储来自 redux-remotedev 的日志和报告的服务器端工具。它可以帮助你在生产环境中集中管理和分析应用的运行状态。

Redux DevTools Extension

Redux DevTools Extension 是一个浏览器扩展，用于在开发环境中调试 Redux 应用。通过 redux-remotedev，你可以将生产环境中的数据同步到该扩展中，进行详细的调试和分析。

isomorphic-fetch

isomorphic-fetch 是一个用于在 Node 和浏览器中提供 fetch API 的 polyfill。在 redux-remotedev 中，它用于确保在不同环境中都能正常发送数据。

通过这些工具的结合使用，你可以在生产环境中实现高效的日志收集和调试，提升应用的稳定性和开发效率。

redux-remotedev Redux DevTools for production (web and React Native) with a highly flexible API. 项目地址: https://gitcode.com/gh_mirrors/re/redux-remotedev