前言
在使用 Redux Saga 进行状态管理时，我们通常会希望能够方便地调试我们的代码。这时候，一个好用的工具就是 Redux Saga DevTools。它可以帮助我们更好地追踪我们的 saga 是否按照预期执行，以及它们的执行路径。
本文介绍如何使用 npm 包 @instamotor-labs/redux-saga-devtools 来集成 Redux Saga DevTools 到我们的项目中。
安装
使用下面的命令安装该 npm 包：
--- ------- ------------------------------------ ----------
安装成功后，我们可以在项目的 node_modules 目录中找到 @instamotor-labs/redux-saga-devtools 包。
添加到项目中
在我们的项目中添加 Redux Saga DevTools，通常需要在我们的代码中设置一个 sagaMonitor 对象。在这个对象中，我们可以指定我们想要使用的 saga 监视器。我们需要使用 @instamotor-labs/redux-saga-devtools 中导出的 createSagaMonitor 函数来生成一个 saga 监视器。
下面是一个示例：
------ - ----------------- - ---- --------------------------------------- ----- ----------- - -------------------- ----- -------------- - ---------------------- ------------ --- ----- ----- - ------------ ------------ -------------------------------- --
在上述示例中，我们先导入了 createSagaMonitor 函数。然后使用它创建了一个 sagaMonitor 对象。这个对象可以被传递给 createSagaMiddleware 函数，这样我们就可以使用 Redux Saga DevTools 进行监视了。
配置 Redux DevTools 工具
我们还需要将 Redux DevTools 工具集成到我们的项目中，以便于我们能够使用它来监视我们的 saga。我们需要添加一个新的调试工具检测器。
------ - --------------- - ---- --------
------ - ---------------- - ---- ---------------------------
------ - ------------------- - ---- ---------------------------------------
----- -------- - -----------------
-----
------------- --------------------
-----
---
----- -------- - --------
----------------
-----
--
------------------
----- --- ---------
--------- -
-----
----- -----
--
-----
---
--
----- ----- - ------------
---------
---------
--在上述代码中，我们先导入了 devToolsEnhancer。然后在 createStore 函数中使用了这个了这个增强器。我们在 devToolsEnhancer 的配置选项中添加了 saga: true。这样，我们就可以在 Redux DevTools 工具中看到我们的 saga 的执行过程了。
示例代码
下面是我在项目中使用 Redux Saga DevTools 的示例代码：
------ - ----------------- - ---- ---------------------------------------
----- ----------- - --------------------
----- -------------- - ----------------------
------------
---
----- -------- - -----------------
-----
------------- --------------------
-----
---
----- -------- - --------
----------------
---------------
-----
--
------------------
----- --- ---------
--------- -
-----
----- -----
--
-----
---
--
----- ----- - ------------
---------
---------
--结论
通过本文的介绍，我们了解了如何使用 npm 包 @instamotor-labs/redux-saga-devtools 来集成 Redux Saga DevTools 到我们的项目中。同时，我们也了解了如何使用其它工具（如 Redux DevTools）来辅助我们调试我们的代码。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005685f81e8991b448e4621