Redux 中的中间件和异步行为
在 Redux 应用程序中，处理异步行为是非常常见的操作。Redux 中的中间件就提供了一种解决异步行为的方案。本文将会介绍 Redux 中的中间件和异步行为，并提供示例代码，帮助你更好地理解这两个概念。
概述
在 Redux 中，所有的状态变更都由 action 触发。这些 action 会被发送到 reducers，reducers 会根据 action 的类型去更新状态。但是，当我们需要处理异步行为时，如何触发 action 呢？
最传统的方法是使用 Redux-Thunk。Redux-Thunk 允许 action 创建函数（即返回对象的函数）返回一个函数，这个函数就是一个异步任务。Redux-Thunk 的工作原理是将 action 函数的传递给一个中间件，这个中间件会负责执行函数中的异步逻辑。这种方式已经被广泛使用，但是在处理更加复杂的异步逻辑时，这种方式可能有点力不从心。
Redux 中的中间件
Redux 官方文档提供了一个名为 Redux-Saga 的中间件，它支持使用 Generator 函数来实现更加复杂的异步逻辑。
Redux-Saga 允许在应用程序中使用 yield 表达式来执行诸如 API 调用、延迟和回放等操作。Redux-Saga 还提供了一些额外的功能，例如定义各种类型的组件之间的消息交互模型。
Redux-Saga 的使用如下：
-- -------------------- ---- -------
------ - ---- ----- ---- --------- - ---- --------------------
--------- ------------------ -
----- ----- - ----- ---------------------
----- ----- ----- ----------------- ----- ---
-
--------- ----------------- -
----- ------------------------ ------------
-
------ ------- --------- ---------- -
----- -----
-----------------
---
-从代码中可以看到，我们定义了一个名为 fetchUsers 的 Generator 函数，这个函数负责获取用户数据并更新状态。我们还定义了 watchFetchUsers 函数，这个函数使用 takeEvery 方法来监听 FETCH_USERS 动作，当它被触发时会调用我们的 fetchUsers 函数。
在 rootSaga 函数中，我们将 watchFetchUsers 添加到 all 方法中，这表明我们的应用程序将监听 FETCH_USERS 动作，并在这个动作被触发时调用 fetchUsers 函数。
Redux 异步行为示例
下面是一个使用 Redux-Saga 处理异步操作的示例代码：
-- -------------------- ---- -------
------ - ---- ----- ---------- - ---- ---------------------
------ ----- ---- --------
--------- ---------- -
--- -
----- -------- - ----- --------------- -------------------------------------------
----- ------ - ----------------------
----- ---------- -------------- ---- ---------
- ----- ------- -
----- ---------- ------------------- --------
-
-
------ ------- --------- ---------- -
----- ----------------------- ----------
-在这个示例中，我们定义了一个名为 fetchDog 的函数，这个函数通过调用 axios 来向后端请求数据。当应用程序拿到数据后，我们会触发 FETCHED_DOG 动作，并将数据作为 payload 发送出去。如果请求数据失败，我们会触发 FETCH_DOG_FAILED 动作，并包含错误信息。
在 rootSaga 函数中，我们使用 takeLatest 函数监听 FETCH_DOG 动作，当这个动作被触发时，我们就会执行 fetchDog 函数来处理异步逻辑。
结论
在 Redux 中，使用中间件来处理异步逻辑已经非常普遍了。Redux-Saga 利用 Generator 函数的特性，可以更好地处理复杂的异步操作，是一个非常有用的工具。
在本文的示例中，我们展示了如何使用 Redux-Saga 处理异步操作，你可以根据自己的需求来调整代码并强化自己的 Redux 技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f13a4f6fbf96019737c41e