在前端开发中，异步请求已成为不可避免的部分。Redux Saga 是一个用于管理 Redux 应用中副作用（例如异步流程和故障处理）的库。在 React 应用中使用 Saga 可以将异步操作拆解成离散的步骤，方便维护和测试。
安装 Redux Saga
首先，我们需要在项目中安装 Redux Saga。
--- ------- ----------
创建 Saga Generator
在 Redux 中，每个 action 都由 reducer 处理，而在 Redux Saga 中，每个 action 都与一个 generator 关联。一个 generator 是一个 JavaScript 函数，用于处理异步操作，采用 yield 关键字来表达 action 序列。Redux Saga 会将这些 yield 按照顺序执行，通过编写生成器代码来控制应用的异步流程。
我们可以创建一个 Saga 文件，命名为 demoSaga.js。
------ - ---------- ----- --- - ---- ---------------------
------ - ----------- ------------------- ------------------ - ---- ---------------
--------- ----------- -
--- -
----- -------- - ----- ----------- ----------------------------------------------
----- ---- - ----- ----------------
----- ----- ----- ------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- ------------------ ---
-
-
------ ------- --------- ---------- -
----- --------------------- -----------
-在上面的代码中，我们首先导入 takeEvery、call 和 put 函数。takeEvery 函数接收两个参数：要监听的 action 类型和执行的 generator 函数。当 Redux Store 中发出与指定类型匹配的 action 时，函数将在后台自动调用指定的 generator。
在 fetchData 函数中，我们使用 call 函数发起一个异步请求，put 函数用于 dispatch 一个新的 action 来通知 reducer，请求数据已经存储到了应用的状态树中。
建立 Saga Middleware
接下来，我们需要将 Saga 集成到应用程序中。为此，我们需要创建 middleware：
------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------- ------ -------- ---- ------------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ------------------------------- -- -----------------------------
在上面的代码中，我们导入了 createSagaMiddleware 函数并创建了一个 sagaMiddleware 实例。然后，我们将其与 store 使用了 applyMiddleware() 中间件相结合，并使用 sagaMiddleware.run() 函数运行我们的 demoSaga。
触发 Saga
现在，当应用程序中有 FETCH_DATA action 时，Saga 将监听它并调用 fetchdata，该函数负责发出网络请求并将数据存储到 Store 中。我们可以在组件中 dispatch 一个 FETCH_DATA action，以触发 Saga：
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ------------
-------- ----- -
----- -------- - --------------
----- ---- - ----------------- -- ------------
------------ -- -
----------------------
-- ----
------ -
--
-------------- -- -
---- --------------------------------
---
---
--
-
------ ------- ----在代码中，我们使用 useEffect 钩子函数和 fetchData action Creator，在渲染组件时触发异步请求。请求成功后，将数据保存在 Redux Store 中，使用 useSelector 来访问该数据以更新 UI。
结论
通过 Redux Saga，我们可以轻松地处理任何类型的异步操作。Saga 可以缩短异步任务的执行时间，提高应用程序的性能，并减少了可读性和可维护性方面的妥协。在上面的示例中，我们已经看到，Redux Saga 可以将异步操作拆分成更小的部分、做出更直观的错误处理和更好的代码可读性。
希望这篇文章能够对你在 React 中使用 Redux Saga 处理异步流程有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6709db3ed91dce0dc87c7a32