在前面的文章中，我们已经了解了 Redux 中的基本数据流。然而，在实际开发中，我们经常需要处理异步操作，例如异步数据请求、定时器等等。这时，Redux 提供了一些方法来简化异步流程，并使 Redux 更加强大和灵活。
本文将介绍 Redux 中的异步数据流及其处理方式，包括中间件的使用、异步 action 的创建以及对异步数据的处理。希望能够帮助读者深入理解 Redux，并为实际开发提供指导。
中间件的使用
在 Redux 中，中间件是对 action 和 reducer 之间的处理过程的一种封装。它可以截取、转换和改变 Redux 中的数据流，并且可以按顺序链式调用多个中间件函数。
Redux 提供了一个 applyMiddleware() 方法来使用中间件。该方法需要传入一个或多个中间件，并返回一个可以作为 store 创建函数的 enhancer 函数。因此，一般的 store 创建过程如下：
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducer';
import middleware1 from './middleware1';
import middleware2 from './middleware2';
const enhancer = applyMiddleware(middleware1, middleware2);
const store = createStore(reducer, enhancer);中间件的基本结构为函数，函数接收三个参数：store（Redux store 对象）、next（下一个中间件函数）、action（当前处理的 action）。其代码结构如下：
const logger = store => next => action => {
console.log('dispatching', action);
const result = next(action);
console.log('next state', store.getState());
return result;
}上述代码实现了一个简单的日志中间件，它会在每个 action 被处理时输出 action 和 next state。在应用中使用该中间件的代码如下：
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducer';
const logger = ...; // 上面的代码
const store = createStore(reducer, applyMiddleware(logger));以上代码为 store 应用了一个名为 logger 的中间件，该中间件会输出 action 和 next state。
异步 action 的创建
在 Redux 中，action 必须为一个普通的 JavaScript 对象，其结构为 {type: 'ACTION_TYPE', payload: {} }。在异步流程中，由于异步操作的结果需要在后继的 action 中使用，因此 Redux 提供了一种特殊的 action 类型，即异步 action。
异步 action 通常包含三个 action 级别的操作：开始请求、请求成功和请求失败。我们可以在异步 action 中使用 Promise 对象包含异步操作，并在操作结束后分发不同类型的 action。
例如，假设我们需要从服务器获取用户信息。我们可以创建以下类型的异步 action:
-- -------------------- ---- -------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
------ -------- ------------- -
------ ----- -------- -- -
---------- ----- ------------------ --
--- -
----- -------- - ----- -------------------------
----- ---- - ----- ---------------
---------- ----- ------------------- -------- ---- --
- ----- --- -
---------- ----- ------------------- -------- - --
-
-
-上述代码定义了 FETCH_USER_REQUEST、FETCH_USER_SUCCESS 和 FETCH_USER_FAILURE 三个类型的 action。其中，fetchUser 函数是一个异步 action，它会依次分发 FETCH_USER_REQUEST、FETCH_USER_SUCCESS 或 FETCH_USER_FAILURE 类型的 action。
在 fetchUser 函数中，我们使用了 async/await 关键字来处理异步请求，这样代码更加简洁明了。当异步请求成功时，我们将获得的数据作为 payload 传递给 FETCH_USER_SUCCESS action；当请求出错时，我们将错误信息作为 payload 传递给 FETCH_USER_FAILURE action。
对异步数据的处理
在 Redux 中，异步操作会造成 state 数据的更新延迟。因此，在实际开发中，我们经常需要显示 Loading 状态、缓存数据或显示错误信息等等。
为了解决这些问题，我们可以在 state 中增加一个 status 和 error 字段，并根据异步 action 不同的类型来更新这些字段。下面是一个示例的 reducer：
-- -------------------- ---- -------
------ - ------------------- ------------------- ------------------ - ---- ------------
----- --------- - -
----- -----
------- ---
------ ----
--
------ -------- ----------------- - ---------- ------- -
------------------- -
---- -------------------
------ -
---------
------- ----------
------ ----
--
---- -------------------
------ -
---------
----- ---------------
------- ----------
------ ----
--
---- -------------------
------ -
---------
------- --------
------ --------------
--
--------
------ ------
-
-上述代码中，我们在 initState 中初始化 state，并使用 FETCH_USER_REQUEST、FETCH_USER_SUCCESS 和 FETCH_USER_FAILURE 动作来更新 status 和 error 字段。根据不同的 value，我们可以在应用中做出不同的响应。
结语
本文介绍了 Redux 中的异步数据流，包括中间件的使用、异步 action 的创建以及对异步数据的处理。希望读者可以加深对 Redux 的理解，并在实际开发中使用这些技术。如果有什么问题或建议，欢迎留言交流。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67c95ec8e46428fe9e0b44e2