前言
redux-saga 是一个流行的 Redux 中间件，可用于处理异步操作。但是，当您的应用程序变得越来越复杂时，调试它可能会变得更加困难。这就是为什么 redux-saga-devtools 很有用的原因，它提供了一个强大的工具，帮助您理解应用程序的执行流程。在本文中，我们将学习如何使用 redux-saga-devtools 来调试 Redux 应用程序中的 saga 功能。
安装
首先，我们需要安装 redux-saga-devtools 包。您可以使用以下命令：
npm install --save-dev redux-saga-devtools
此命令将下载最新版本的 redux-saga-devtools并将其添加到您的 package.json 中。
设置
要使用 redux-saga-devtools，我们需要将其添加到我们的应用程序中。这是通过将 redux-saga的 middleware 与 DevTools 扩展组合实现的。以下是如何实现这一点的示例：
-- -------------------- ---- ------- ------ - ------------ ---------------- ------- - ---- -------- ------ -------------------- ---- ------------- ------ - ------------------- - ---- --------------------------- ------ -------- ---- ---------- ------ ----------- ---- ------------- ----- -------------- - ----------------------- ----- ---------- - ----------------- ----- --------- - --------------------------------------- ----------------------- ----- ----- - ------------------------ ----------- -----------------------------
上面代码中，我们使用了 createSagaMiddleware 工具创建了一个 sagaMiddleware。然后，我们将其作为中间件传递给 applyMiddleware。最后，我们使用 composeWithDevTools 来创建我们的增强器。此增强器将使我们能够使用 redux-devtools-extension 的 DevTools 扩展。
你也可以在 createStore 中使用 composeWithDevTools 直接创建 store。
const store = createStore( rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware)) );
使用
现在，您已经配置了 redux-saga-devtools。在 Redux DevTools 中切换到 Sagas 选项卡就可以查看 Saga 的调用情况。我们可以看到每个 saga 的名称、状态、参数、返回值等。
示例如下：
如图所示，我们可以看到 saga 名称、输入参数、输出结果等。此外，我们还可以查看每个 saga 的调用堆栈，并逐个观察每个 saga 的运行情况，更好地调试我们的应用程序。
下面是一个使用 redux-saga-devtools 的简单示例：
-- -------------------- ---- -------
------ - ----- ----- ---- --------- - ---- ---------------------
------ - ------------------ - ---- -------------
--------- ----------- -
--- -
----- ---- - ----- --------------------
----- ------------------------------
- ----- --- -
-- ------ -----
-
-
--------- ---------------- -
----- ----------------------- -----------
-
--------- ---------- -
----- ---------------------
-
------ ------- ---------在上面的例子中，我们使用 call 来执行异步 API 请求。当执行成功时，我们使用 put 将返回结果存储在 Redux store 中。我们还定义了一个名为 watchFetchUser 的 saga，它将监听 FETCH_USER 的所有请求并执行 fetchUser 导出变量。
总结
redux-saga-devtools是一个有用的工具，可用于调试应用程序中的 saga 功能。虽然在大多数情况下，使用 console.log来调试应用程序的工作方式可能足够了，但是当我们的应用程序变得越来越复杂时，我们需要更多的工具和技术来帮助我们更好地了解应用程序的执行流程，调试错误和优化代码。
使用 redux-saga-devtools，我们可以对我们的应用程序的 saga 功能进行逐个观察，并分析其执行。这使我们能够更好地理解应用程序的状态，并更容易地调试错误代码。
参考链接
- redux-saga-devtools github 仓库
- redux-devtools-extension npm 包
- Getting Started with Redux Saga (Course)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a42