Redux-Saga：如何在 Redux 应用中使用
Redux-Saga 是一个用于管理应用程序副作用（例如异步数据获取和不纯的操作）的 Redux 中间件。它允许您通过利用 ES6 的生成器功能创建可重用的异步逻辑来处理这些副作用。本文将讲解如何在 Redux 应用中使用 Redux-Saga。
安装
首先，您需要安装 Redux-Saga。您可以通过 npm 进行安装：
npm install redux-saga
或者你可以使用 yarn 安装：
yarn add redux-saga
使用
添加 middleware
将 Redux-Saga 添加到您的 Redux 中间件中。您可以使用 redux-saga 提供的中间件函数 applyMiddleware。在创建 store 的时候，将 Redux-Saga 添加到中间件队列中：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------------------ --------------------------------- ----------------------------- ------ ------- ------
其中，rootSaga 是一个生成器函数。我们将在下文中讨论如何编写 rootSaga。
编写 Saga
一个 Saga 是一个生成器函数，用于拦截 Redux 动作并为其提供额外的行为。Saga 可以发起任意数量的异步操作，并可以处理来自多个源的并行并行活动。以下是 Saga 生成器函数的示例：
-- -------------------- ---- -------
------ - ----------- ----- --- - ---- ---------------------
------ - --------------- -------------- - ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
--------- ----------------- -
--- -
----- -------- - ----- ------------------
----- ------------------------------
- ----- ------- -
----- ---------------------------
-
-
------ ------- --------- ------------------ -
----- -------------------- -----------------
-这个 Saga 提供一个拦截名为 GET_USER 的动作的方式。在拦截到这个动作之后，它会调用 getUserDataFlow 函数。
getUserDataFlow 函数是一个生成器，它将使用 call 指令调用名为 getUserData 的外部 API 函数，以获取用户数据。这个函数还将捕获任何在调用期间可能发生的错误，并将 use put 指令触发 getUserSuccess 或 getUserFailure 动作。
在 watchGetUserData 函数中， 我们使用 takeLatest 指令创建了一个非阻塞的 dispatch 最新请求的模式。如果用户多次点击“获取用户”按钮，takeLatest 只会处理最新的请求，并忽略较旧的请求。
在这个例子中，我们假设 getUserData 是在 api.js 文件中定义的函数，它使用 fetch API 从某个 URL 获取数据。你可以在你的应用中使用 axios、jQuery 或其他的 HTTP 库来获取异步数据。
Watcher Saga
在 Redux-Saga 中，需要至少一个 Watcher 为您的 Saga 提供监听。Watcher Saga 是一个生成器函数，它监听 Redux 动作。这个 Saga 的主要功能是为其子 Saga（我们将在下文中介绍）提供启动和停止功能。
例如：
import userSaga from './userSaga.js';
import postSaga from './postSaga.js';
export default function* rootSaga() {
yield all([userSaga(), postSaga()]);
}所有的 Saga 都被放在 all() 函数中，以在启动时并行处理。
三种类型的 Saga
由于 Redux-Saga 可以处理多个异步操作，因此 Saga 可以分类为三种类型：阻塞、非阻塞和单次。
阻塞
阻塞型 Saga 会等待每个异步操作完成后才能继续处理下一步。这是 Redux-Saga 的默认行为。阻塞型 Saga 可能是您的一个子 Saga，因此 Watcher Saga 需要管理它们的生命周期。
-- -------------------- ---- -------
------ - ---- - ---- ---------------------
------ - ------- - ---- ------------
------ - --------------- ------------ ----------- - ---- -------------------
--------- ----------------- -
----- - -- - - -------
--- -
----- ---- - ----- ------------- ----
----- ----- ----- ------------ ---- ---
- ----- --- -
----- ----- ----- ------------ -------- --------- ---
-
-
--------- ---------------- -
----- ------------------------- -----------
-
------ ------- ---------------阻塞型 Sagas 的例子包括等待维护幂等序列生成器的循环更改，或等待异步完成的拍卖模块。
非阻塞
非阻塞的 Saga 允许多个异步操作同时进行。当两个异步操作几乎同时发生（例如，当应用程序同时获取第一帧和第二帧时），非阻塞 Saga 可以同时处理它们。
-- -------------------- ---- -------
------ - ---- ----- ----- ----- ----- ------ ------ - ---- ---------------------
------ - --------------- ------------ ----------- - ---- -------------------
------ - ------- - ---- ------------
--------- ------------- -
--- -
----- ---- - ----- ------------- ----
----- ----- ----- ------------ ---- ---
- ----- --- -
----- ----- ----- ------------ -------- --------- ---
-
-
--------- ---------------- -
----- ------ -
----- - -- - - ----- ---------------------
----- --------- - ----- --------------- ----
----- ----------------- ------ -----------------------
-- ------ ------------ ----- ------------------
-
-
------ ------- ---------------非阻塞 Saga 的一个例子是在 Reels 视频轮播的两个轨道上同时根据时间戳启动音频并行播放。
单次
单次 Saga 类似于非阻塞 Saga，但只允许一个异步操作同时进行。这可以确保数据不会并发传输，从而减少了应用程序的负载。
-- -------------------- ---- -------
------ - ---- ----- ----- ----- - ---- ---------------------
------ - ------------------ --------------- -------------- - ---- -------------------
------ - ------------ - ---- ---------------
--------- ------------------ -
--- -
----- ------- - ----- -------------------
----- ----- ----- --------------- ------- ---
- ----- --- -
----- ----- ----- --------------- -------- --------- ---
-
-
--------- ------------------- -
--- ----------
----- ------ -
----- ------------------------
-- ------------ --------- - ----- -----------------------
----- ----------------- ------ --------------------------
-- ------ ------------ --------- - ----------
-
-
------ ------- ------------------单次 Saga 的例子是长轮询从服务器获取消息的聊天应用程序。
总结
Redux-Saga 是一个可重用的副作用管理中间件，可以处理在 Redux 应用程序中发生的异步操作和不纯操作。您可以使用 Redux-Saga 作为 Generator 函数创建可读性高且易于管理的异步代码。本文介绍了如何将 Redux-Saga 添加到 Redux 应用程序中，并创建了三种类型的 Saga，阻塞、非阻塞和单次。通过利用 Redux-Saga 的强大功能，您可以编写易于维护并具有优秀用户体验的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ab0cd968c7c53b0a33064