Redux Devtool开发工具 – Redux教程 _redux教程

上一章Redux教程请查看：redux中间件
Redux-Devtools为我们提供了Redux应用程序的调试平台。它使我们能够进行时间旅行调试和实时编辑。官方文档中的某些功能如下-

它使你可以检查每个状态和动作有效负载。
它使你可以通过“取消”操作来使时光倒流。
如果更改reducer代码，则将重新评估每个“分阶段”操作。
如果reducer抛出异常，我们可以识别错误以及发生此错误的过程。
借助persistStateState（）存储增强器，你可以在页面重新加载期间持久保留调试会话。

Redux开发工具有两种变体，如下所示-
Redux DevTools – 可以作为软件包安装，并集成到你的应用程序中，如下所示：
https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md#manual-integration
Redux DevTools Extension – 一个为Redux实现相同开发人员工具的浏览器扩展如下-
【Redux Devtool开发工具 – Redux教程】https://github.com/zalmoxisus/redux-devtools-extension
现在让我们检查一下如何在Redux开发工具的帮助下跳过动作并返回上一步。以下屏幕截图说明了我们先前已调度以获取项目列表的操作。在这里，我们可以看到在检查器选项卡中调度的动作。在右侧，你可以看到“演示”选项卡，其中显示了状态树中的差异。

文章图片
当你开始使用它时，你将很容易熟悉它。你可以仅通过此Redux插件工具来调度操作，而无需编写实际代码，最后一行中的分派器选项将帮助你解决此问题。让我们检查上一次成功提取项目的操作。

文章图片
我们从服务器收到了一系列对象作为响应。所有数据都可以在我们的页面上显示清单，你也可以通过单击右上角的状态选项卡同时跟踪商店的状态。

文章图片
在前面的部分中，我们了解了时间旅行调试。现在，让我们检查一下如何跳过一项操作并及时返回以分析应用程序的状态。当你单击任何操作类型时，将显示两个选项：“跳转”和“跳过”。
通过单击特定操作类型上的跳过按钮，可以跳过特定操作。它的行为好像从未发生过。当你单击某些动作类型上的跳转按钮时，它将带你进入该动作发生的状态，并依次跳过所有剩余的动作。这样，你可以在发生特定操作时保留状态。此功能对于调试和查找应用程序中的错误很有用。