调试 React Native + Redux 应用程序的选项有哪些？答案

【问题标题】：What are options to debug a React Native + Redux app?调试 React Native + Redux 应用程序的选项有哪些？
【发布时间】：2019-03-22 01:00:54
【问题描述】：

我一直在研究调试 React Native + Redux 应用程序的选项。尤其是 redux 部分。您首选的方法是什么？希望知道！

【问题讨论】：

标签： reactjs react-native redux

【解决方案1】：

为此，我使用React Native Debugger 作为独立版本。它能够显示 redux 状态更改的完整历史记录，并为您提供一些方便的工具，如 Raw-View、Chart-View 或 Diff-View。而且您不必在您的应用程序代码中添加任何内容（例如 Reactotron）。

看起来像这样：

要激活 Redux-Panel，只需在 Debugger 窗口右击并选择 Toggle redux devtools。

【讨论】：

同意！我写了一个设置 React Native Debugger 的指南！ medium.com/@tetsuyahasegawa/…

【解决方案2】：

谢谢大家的建议，我尝试了四个选项！我什至就这个话题写了a medium article。

我的结论，使用React Native Debugger。 (Guide to setup)

因为，

v.s. redux-logger: 缺少功能，每个项目都有额外的依赖

v.s. Remote Redux Devtools: 缺少功能，每个项目额外的依赖，额外的代码。

v.s. Reactotron：不熟悉的界面，每个项目的额外依赖，额外的代码。

【讨论】：

【解决方案3】：

我通常使用 DevTools，但那是 Chrome 扩展程序而不是模拟器。也许您可以使用它来研究远程监控：https://github.com/zalmoxisus/remote-redux-devtools 我相信您可以将其设置为远程监控模拟器中的商店交互。

编辑：是的，在阅读更多自述文件后，它实际上是为 React Native 设计的。我肯定会用这个。

【讨论】：

对于现场解决方案 Remote Redux devtools 确实是一个不错的选择！谢谢。

【解决方案4】：

在处理redux 时，有多种工具对开发人员有利，在所有工具中，我强烈建议同时使用以下两种工具

Reactotron:

- view your application state
- show API requests & responses
- perform quick performance benchmarks
- subscribe to parts of your application state
- display messages similar to console.log
- track global errors with source-mapped stack traces including saga stack - traces!
- dispatch actions like a government-run mind control experiment
- hot swap your app's state using Redux or mobx-state-tree
- track your sagas
- show image overlay in React Native
- track your Async Storage in React Native

Redux-logger:

每当我们调度一个 redux 操作时，向您展示 previous state、current action payload 和 next state 会有所帮助，您应该会看到它对我们有什么好处

【讨论】：

Reactotron 确实有很多很酷的功能！我喜欢 redux-logger 解决方案的轻量级。谢谢！