Redux - 开发工具

Redux-Devtools 为我们提供了 Redux 应用的调试平台。它允许我们执行时光倒流调试和实时编辑。官方文档中的一些功能如下：

• 它允许你检查每个状态和 action 的 payload。

• 它允许你通过“取消” action 回到过去。

• 如果你更改 reducer 代码，每个“暂存”的 action 将被重新评估。

• 如果 reducers 抛出错误，我们可以识别错误以及发生错误的 action。

• 使用 persistState() store enhancer，你可以跨页面重新加载持久化调试会话。

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 开发工具跳过 action 并回到过去。下面的截图解释了我们之前为了获取项目列表而分发的 action。在这里，我们可以看到在检查器选项卡中分发的 action。在右侧，你可以看到 Demo 选项卡，它显示了状态树的差异。

当你开始使用这个工具时，你就会熟悉它。你无需编写实际代码，只需从这个 Redux 插件工具中就可以分发一个 action。最后一行的“分发器”选项将帮助你做到这一点。让我们检查一下最后成功获取项目的 action。

我们从服务器收到了一个对象数组作为响应。所有数据都可用于在我们的页面上显示列表。你也可以通过点击右上角的“状态”选项卡来同时跟踪 store 的状态。

在之前的章节中，我们学习了时间旅行调试。现在让我们检查一下如何跳过一个 action 并回到过去来分析应用程序的状态。当你点击任何 action 类型时，会出现两个选项：“跳转”和“跳过”。

通过点击某个 action 类型的“跳过”按钮，你可以跳过特定的 action。它的作用就像该 action 从未发生过一样。当你点击某个 action 类型的“跳转”按钮时，它会将你带到该 action 发生时的状态，并跳过序列中所有剩余的 action。这样你就可以保留特定 action 发生时的状态。此功能在调试和查找应用程序中的错误时非常有用。

我们跳过了最后一个 action，所有来自后台的列表数据都消失了。它回到了项目数据尚未到达的时候，我们的应用程序没有数据可以在页面上渲染。它实际上使编码更容易，调试也更容易。