引言
Redux 是一个非常流行的 JavaScript 应用程序状态管理库，它提供了一种简单的方法来管理应用程序中的状态。Redux Saga 是一种 Redux 中间件，它允许我们在 Redux 应用程序中使用基于 Generator 的异步编程模型。本文将介绍 Redux Saga 的最佳实践，以便您可以使用 Saga 编写更有效和可靠的应用程序。
Redux Saga 基础
在深入探讨 Redux Saga 的最佳实践之前，我们需要了解一些 Saga 基础知识。Redux Saga 允许我们定义称为 Effect 的生成器函数，这些生成器函数使我们能够处理异步操作，如 API 请求或定时器。我们可以将这些 Effect 组合起来以创建更复杂的异步流程。
下面是一个使用 Redux Saga 处理 API 请求的示例：
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- --------------------
------ - -------------------- -------------------- ------------------- - ---- --------------------
------ --- ---- --------------
--------- ------------------ -
--- -
----- ----- - ----- --------------------
----- ----- ----- -------------------- ----- --
- ----- --- -
----- ----- ----- -------------------- -------- --------- --
-
-
--------- ----------------- -
----- ------------------------------ -----------
-
------ ------- ---------------在上面的代码中，我们定义了两个 Saga 函数：fetchUsers 和 watchFetchUsers。fetchUsers 函数负责调用 API 并将 API 响应存储在 Redux 状态中。如果 API 请求失败，则会抛出一个错误，并将错误消息存储在 Redux 状态中。 watchFetchUsers 函数负责监听 FETCH_USERS_REQUEST action，并在该 action 被分发时调用 fetchUsers 函数。
1. 将所有的 Effects 集中在一个文件中
将所有的 Effects 集中在一个文件中可以使您更轻松地了解应用程序中的所有异步流程。这也可以使代码更加易于维护和测试。
例如，您可以按照以下方式组织 Saga 文件：
src/
sagas/
index.js
users.js
posts.js
...在 index.js 中，您可以导出所有的 Saga 函数：
-- -------------------- ---- -------
------ - --- - ---- --------------------
------ --------------- ---- ---------
------ --------------- ---- ---------
------ ------- --------- ---------- -
----- -----
------------------
------------------
-- -
--
-2. 在 Effects 中使用状态选择器
使用状态选择器让我们更轻松地访问 Redux 状态。这意味着我们可以在 Saga 中使用选择器来获取当前状态，而不是在其他地方编写选择器。
import { select } from 'redux-saga/effects'
function* fetchUsers(action) {
const token = yield select(state => state.auth.token)
// call API with token
}在上面的代码中，我们使用选择器获取 Redux 中的 token 状态，并将该状态传递给 API 调用。这样我们就不需要在组件或其他地方重复访问 token 状态。
3. 使用 takeLeading 替代 takeEvery
在许多情况下，我们只需要处理最新的 action，而不是处理每个 action。这种情况下，我们可以使用 takeLeading 代替 takeEvery。takeLeading 会忽略旧的 action，只关注最新的 action。
-- -------------------- ---- -------
------ - ----- ---- ----------- - ---- --------------------
------ - -------------------- -------------------- ------------------- - ---- --------------------
------ --- ---- --------------
--------- ------------------ -
--- -
----- ----- - ----- --------------------
----- ----- ----- -------------------- ----- --
- ----- --- -
----- ----- ----- -------------------- -------- --------- --
-
-
--------- ----------------- -
----- -------------------------------- -----------
-
------ ------- ---------------4. 拆分 Saga 函数并重用 Effects
拆分 Saga 函数可以使我们更好地组织代码，并减少重复编写相同代码的次数。在拆分 Saga 函数时，我们可以将 Effect 提取为单独的函数，并重用这些 Effect。
-- -------------------- ---- -------
------ - ----- --- - ---- --------------------
------ - -------------------- ------------------- - ---- --------------------
------ --- ---- --------------
--------- ------------ -
--- -
----- ----- - ----- --------------------
----- ----- ----- -------------------- ----- --
- ----- --- -
----- ----- ----- -------------------- -------- --------- --
-
-
--------- ---------- -
-- ---- ----- -------
----- ----------------
-- ---- ----- -------
-
--------- --------------- -
-- ---- ----- -------
----- ---------------------- ---------
-- ---- ----- -------
-
------ ------- -------------在上面的代码中，我们将 fetchUsers 函数提取为单独的函数，并在 getUsers 函数中重用该函数。这样我们就可以将编写 fetchUsers 的代码与写 getUsers 函数的代码分开。这也使我们更容易测试这些函数，因为我们现在可以测试 fetchUsers 函数无需编写需要测试 API 访问的逻辑的 getUsers 函数。
结论
Redux Saga 是处理异步操作的一种灵活且高效的方式，可以在 Redux 应用程序中使用。本文介绍了 Redux Saga 的最佳实践，包括将所有的 Effects 集中在一个文件中，使用状态选择器，使用 takeLeading，以及拆分 Saga 函数并重用 Effects。如果您遵循这些最佳实践，您将能够使用 Redux Saga 编写更有效和可靠的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67516df38bd460d3ad899cb3