Redux Devtool开发工具 – Redux教程-srcmini

上一章Redux教程请查看：redux中间件

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

Redux开发工具有两种变体，如下所示-

Redux DevTools – 可以作为软件包安装，并集成到你的应用程序中，如下所示：

Redux DevTools Extension – 一个为Redux实现相同开发人员工具的浏览器扩展如下-

现在让我们检查一下如何在Redux开发工具的帮助下跳过动作并返回上一步。以下屏幕截图说明了我们先前已调度以获取项目列表的操作。在这里，我们可以看到在检查器选项卡中调度的动作。在右侧，你可以看到“演示”选项卡，其中显示了状态树中的差异。

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

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

在前面的部分中，我们了解了时间旅行调试。现在，让我们检查一下如何跳过一项操作并及时返回以分析应用程序的状态。当你单击任何操作类型时，将显示两个选项：“跳转”和“跳过”。

通过单击特定操作类型上的跳过按钮，可以跳过特定操作。它的行为好像从未发生过。当你单击某些动作类型上的跳转按钮时，它将带你进入该动作发生的状态，并依次跳过所有剩余的动作。这样，你可以在发生特定操作时保留状态。此功能对于调试和查找应用程序中的错误很有用。

我们跳过了最后一个操作，所有来自后台的列表数据都消失了。这需要追溯到项目数据尚未到达且我们的应用程序没有要在页面上呈现的数据的时间。它实际上使编码变得容易，调试也更加容易。

Redux Devtool开发工具 – Redux教程