在现代的 Web 应用中，前端的网络请求几乎不可避免。在处理多个 API 请求时，我们常常需要考虑如何管理异步请求状态以及数据的一致性问题。Redux 提供了一个优秀的解决方案：使用它的中间件机制来处理异步数据流，可以方便地管理应用的状态，并保证数据的一致性。本文将介绍如何使用 Redux 处理多个 API 请求，并提供示例代码。
什么是 Redux 中间件
在 Redux 中，中间件是指在派发一个 action 到达 reducer 之前，先经过一系列工具的加工处理。中间件允许我们在 action 到达 reducer 前执行一些额外的操作，如记录日志、发送网络请求或触发异步 action 等。Redux 官方提供了一些常见的中间件，如redux-thunk、redux-saga等。
对于多个 API 请求的场景，redux-thunk是最常用的中间件。它允许 action 创建函数返回一个函数而不是一个 action 对象。这个返回的函数可以包含任何异步操作，等异步操作执行完成后再 dispatch 真正的 action。
如何使用 Redux 处理多个 API 请求
处理多个 API 请求可以分为以下几个步骤：
- 创建 action 创建函数，它返回一个异步函数。
- 创建一个 reducer 来处理异步数据流。
- 创建一个中间件来处理异步请求。
- 应用中间件并使用异步 action 创建函数。
下面我们将围绕这几个步骤进行详细介绍。
创建异步 action 创建函数
我们通过 action 创建函数向 store 中派发 action。对于多个 API 请求，我们需要创建一个返回异步函数的 action 创建函数，如下所示：
-- -------------------- ---- -------
------ ----- ---------- - -- -- -
------ ----- ---------- -- -
----- - ----- ----- - - ----- ------------------------
----------
----- ----------------------
-------- ------
---
--
--在上面的代码中，fetchUsers 函数返回一个异步函数，该函数会发送 HTTP GET 请求，然后将返回的数据发送给 reducer。在异步函数中，我们使用 async 和 await 创建一个 Promise，以等待请求的返回。在数据返回时，我们 dispatch 一个 action，告诉 reducer 请求成功，并将请求的数据作为 action 的 payload。
编写异步 reducer
异步 reducer 处理的是异步请求的中间状态，比如正在加载、已加载等状态。在我们的示例中，我们需要管理三个状态：loading、error、和items。下面是一个处理多个 API 请求的异步 reducer 的示例：
-- -------------------- ---- -------
----- ------------ - -
------ ---
-------- ------
------ ---
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ -
---------
-------- -----
--
---- ----------------------
------ -
---------
-------- ------
------ ---------------
--
---- ----------------------
------ -
---------
-------- ------
------ ---------------
--
--------
------ ------
-
--在上面的代码中，FETCH_USERS_REQUEST 可以表示请求加载的中间状态。在这个状态下，我们不能确定数据是否可用，需要显示一个 loading 标志。当 FETCH_USERS_SUCCESS action 被派发时，我们把 loading 状态设置为 false，并将请求的数据存储在 items 状态中。如果在请求数据时出现错误，则派发 FETCH_USERS_FAILURE 操作，并将错误信息存储在 error 中。
创建 middleware 处理异步请求
我们需要使用中间件来处理异步请求，因此要创建一个中间件，例如：
const middleware = ({ dispatch }) => (next) => async (action) => {
if (typeof action === 'function') {
await action(dispatch);
} else {
next(action);
}
};在上面的代码中，我们创建了一个名为 middleware 的函数，它接收一个对象并返回一个函数。在这个函数中，我们检查传入的 action 是否为一个函数。如果是函数，我们就执行这个函数，并用 await 等待请求的结果。否则，我们继续按照正常的方式派发 action。使用这个函数作为中间件impl,能够让我们的应用管理异步状态，重用性高效。
应用中间件并使用异步 action 创建函数
最后一个步骤是将中间件应用到 Redux 中，并使用异步 action 创建函数。下面的代码演示了如何使用 applyMiddleware 方法将中间件应用到 Redux 中:
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ ------- ---- ------------ ------ ---------- ---- --------------- ----- ----- - ------------ -------- -------------------------------- ----------- --
在上面的代码示例中，我们使用了 thunkMiddleware 和 middleware 两个 Redux 中间件。 最后，我们可以像下面这样使用 action 创建函数：
import { fetchUsers } from './actions';
store.dispatch(fetchUsers());上面的代码中，我们使用 fetchUsers 获取请求数据。我们通过对 store.dispatch 函数的调用来触发 fetchUsers action 创建函数。
总结
在这篇文章中，我们介绍了使用 Redux 处理多个 API 请求的方法。通过创建异步 action 创建函数，编写异步 reducer 和创建 middleware，我们可以方便地管理应用的状态，并在需要的时候调用异步请求数据。如果你正在处理一个多个 API 请求的应用程序，那么这些示例代码将对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645db191968c7c53b0018d14