Redux Saga 是一个用于管理 Redux 应用程序的中间件，它可以帮助开发者在应用程序中处理副作用。Redux Saga 允许您在 Redux 状态管理中使用生成器功能，以声明性方式处理异步请求和复杂的同步操作。
在这篇文章中，我们将通过一个示例项目来学习如何在实际应用中使用 Redux Saga。
示例项目简介
我们的示例项目是一个简单的 React 应用，它显示了一个漫威英雄的列表。我们打算使用 Redux Saga 来处理异步数据请求，包括从 Marvel Comics API 获取英雄信息和从本地存储加载和保存用户收藏。
安装和配置 Redux Saga
首先，我们需要安装 Redux Saga。
npm install redux-saga
在 Redux 中使用 Redux Saga 需要在 createStore 函数中配置。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ -------------------------------- -- ----------------------------- ------ ------- ------
在上述代码中，我们首先导入创建应用程序的必要模块（包括 Redux 和 Saga 中间件）以及我们的应用程序 reducer 和 saga 。然后我们创建 Saga 中间件并将其附加到应用程序的 Redux 存储对象中。接着我们运行 rootSaga，这是我们应用程序的所有 Saga 根。
尝试获取 Marvel 文档数据
首先我们需要尝试连接到 Marvel Comics API，并尝试从中请求数据。
-- -------------------- ---- -------
------ - ----------- ----- --- - ---- ---------------------
------ - ---------------------- ---------------- - ---- -------------
----- ------- - ----- --- --- ------
----- -------- - -------------------------------------------
--------- ---------------- ------- -- -
----- - ------ ------ - - --------
--- -
----- -------- - ----- ----------- ----------------------------------------------------------------------------
----- ---- - ----- ----------------
----- --------- - -------------
----- ------------------------------- -------------
- ----- ------- -
---------------------
-
-
------ ------- --------- ---------- -
----- --------------------------------- ----------------
-在上述代码中，我们定义了一个名为 fetchDocuments 的 Saga，它尝试获取 Marvel Comics API 中的数据。我们使用 call 将该请求发送到 API，并使用 put 分发一个 documentsFetched 动作来将该数据添加到应用程序中。
处理收藏列表
我们还需要处理用户的收藏列表。对于这个操作，我们需要读取和写入数据到本地存储。
-- -------------------- ---- -------
------ - ----------- ----- ---- --- - ---- ---------------------
------ - ---------------------- ----------------- -------------------- -------------- --------------------- --------------- - ---- -------------
----- ------- - ----- --- --- ------
----- -------- - -------------------------------------------
----- ------------- - ------------
--------- ---------------- ------- -- -
----- - ------ ------ - - --------
--- -
----- -------- - ----- ----------- ----------------------------------------------------------------------------
----- ---- - ----- ----------------
----- --------- - -------------
----- ------------------------------- -------------
- ----- ------- -
---------------------
-
-
--------- -------------- ------- -- -
----- --------- - ----------------------------------- -- -----
----- ------------ - ----------------------
----- - -- - - --------
-- ---------------------------- -
----------------------
-
----------------------------------- ------------------------------
----- ---------------------------------
-
--------- --------------- -
----- --------- - ----------------------------------- -- -----
----- ------------ - ----------------------
----- -----------------------------------
-
------ ------- --------- ---------- -
----- -----
--------------------------------- ----------------
------------------------------- --------------
-------------------------------- ---------------
---
-在上述代码中，我们定义了三个 Saga 函数：fetchDocuments, saveFavorite, and loadFavorites。fetchDocuments 函数用于获取漫威英雄数据，saveFavorite 函数用于保存用户的收藏信息，loadFavorites 函数负责从本地存储中加载已保存的收藏信息。
React 组件代码示例
最后，我们需要在 React 组件中添加对 Redux 中 Saga 的调用。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------------------- ------------------ ------------------ - ---- -------------
----- ---------- - -- ---------- ------ ---------- ------------- -------------- -------- -- -- -
------------ -- -
----------------
-- -----------------
------ -
-----
----
------------------ -- -
--- -------------
-------------------
------- ----------- -- ------------------------------------------------- - -------- - ---- -- --------------------
-----
---
-----
------
--
--
----- --------------- - ----- -- --
---------- ----------------
------ ------------
---------- ----------------
---
----- ------------------ - -------- -- --
-------------- ------ -- --------------------------------------
------------- -- -- --------------------------------
-------------- -- -- -------------------------------
---
------ ------- ------------------------ --------------------------------在上述代码中，我们定义了一个名为 HeroesList 的组件，该组件负责渲染我们的列表。我们将该组件与 Redux 存储连接，以便能够调用 fetchDocumentsStart, saveFavoriteStart 和 loadFavoritesStart 动作。我们还使用 useEffect 钩子在组件加载时加载加Favorites，以确保该列表在组件中正确加载。
结论
在这篇文章中，我们学习了如何在一个 React 和 Redux 应用中使用 Redux Saga。我们通过一个示例解释了如何在实际应用中使用 Redux Saga 来处理异步请求以及从本地加载并保存用户收藏。我们学习了如何设置 Saga 中间件并使用基本的生成器函数来创建 Saga。
Redux Saga 提供了一个非常强大的工具，帮助我们更好地管理 Redux 应用程序中的副作用。使用 Redux Saga，开发者可以更容易地跟踪应用程序的状态和流程。希望这篇文章能够帮助您更好地理解如何使用 Redux Saga 实现更高效的应用程序开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f38cabe1e8e99bfaf82b1b