Redux - 开发工具

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

• 它可以让您检查每个状态和操作负载。

• 它可以让您通过"取消"操作回到过去。

• 如果更改reducer代码，每个"暂存"操作都将重新评估。

• 如果reducer抛出异常，我们可以识别错误以及发生错误的操作。

• 使用 persistState() 存储增强器，您可以在页面重新加载时保留调试会话。

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

Redux DevTools − 它可以作为包安装并集成到您的应用程序中，如下所示 −

https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md#manual-integration

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

https://github.com/zalmoxisus/redux-devtools-extension

现在让我们检查一下如何在 Redux 开发工具的帮助下跳过操作并及时返回。 以下屏幕截图解释了我们之前为获取项目列表而执行的操作。 在这里我们可以看到检查器选项卡中调度的操作。 在右侧，您可以看到"演示"选项卡，其中显示了状态树中的差异。

当您开始使用这个工具时，您就会熟悉它。 您可以仅通过此 Redux 插件工具来调度操作，而无需编写实际代码。 最后一行的调度程序选项将帮助您完成此操作。 让我们检查成功获取项目的最后一个操作。

我们收到了一组对象作为来自服务器的响应。 所有数据均可在我们的页面上显示列表。 您还可以通过点击右上角的状态选项卡同时跟踪store的状态。

在前面的部分中，我们学习了时间旅行调试。 现在让我们检查如何跳过一项操作并及时返回来分析应用程序的状态。 当您单击任何操作类型时，将会出现两个选项："跳跃"和"跳过"。

通过单击特定操作类型上的跳过按钮，您可以跳过特定操作。 它表现得好像该动作从未发生过。 当您单击某些动作类型上的跳转按钮时，它将带您到该动作发生时的状态，并按顺序跳过所有剩余的动作。 这样您就可以在发生特定操作时保留状态。 此功能对于调试和查找应用程序中的错误非常有用。

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