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

Question

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

Answer 1

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

它看起来像这样：

要激活Redux-Panel，只需在Debugger窗口上单击鼠标右键，然后选择Toggle redux devtools。

Answer 2

我通常使用DevTools，但这是Chrome扩展程序，不适用于Simulator。也许您可以使用它来进行远程监视：https://github.com/zalmoxisus/remote-redux-devtools我相信您可以将其设置为远程监视Simulator中的商店交互。

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

Answer 3

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

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都是有帮助的，您应该了解它如何使我们受益

Answer 4

谢谢大家的建议，我尝试了四种选择！ 我甚至为此主题写过a medium article。

我的结论， 使用React Native Debugger。 （Guide to setup）

因为，

v.s。 redux-logger：缺乏功能，每个项目都需要依赖

v.s。 Remote Redux Devtools：缺少功能，每个项目都需要依赖，代码需要。

v.s。 Reactotron：陌生的界面，每个项目的其他依赖项，其他代码。