前言
在使用 Redux 进行状态管理时，我们经常需要在 reducer 中处理异步操作，例如发起网络请求、读取本地存储等。为了实现这些异步操作，我们可以使用 Redux 中间件。Redux 中间件是 Redux 提供的一种扩展机制，它可以在 action 到达 reducer 之前，对 action 进行拦截、处理，使得我们可以在 action 中进行异步操作，而不必在 reducer 中处理。
本文将介绍两种常见的 Redux 中间件：redux-promise 和 redux-saga，它们分别提供了不同的异步操作处理方式。
redux-promise
redux-promise 是一个 Redux 中间件，它可以使得我们在 action 中返回一个 Promise 对象，用来处理异步操作。当 action 中返回一个 Promise 对象时，redux-promise 会自动将该 Promise 对象进行处理，并将其转化为普通的 action 对象，然后将其传递给 reducer 进行处理。
下面是 redux-promise 的使用示例：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------------ ---- ---------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ----------------------------- -- ----- --------- - -- -- -- ----- ------------- -------- --------------------------- -- ----------- --- ----------------------------
在上述示例中，我们使用 applyMiddleware 函数将 redux-promise 中间件添加到 Redux 应用中。然后，在 action 中返回一个 Promise 对象，用来发起网络请求，并将 Promise 对象作为 payload 传递给 action。最后，我们通过 store.dispatch 函数将 action 分发给 reducer 进行处理。
需要注意的是，当 Promise 对象处于 pending 状态时，redux-promise 不会将其转化为 action 对象。只有当 Promise 对象被 resolve 或 reject 时，redux-promise 才会将其转化为 action 对象。
redux-saga
redux-saga 是一个 Redux 中间件，它可以使得我们在 action 中使用 Generator 函数，用来处理复杂的异步操作。redux-saga 提供了一种基于 Generator 函数的异步操作处理方式，使得我们可以将异步操作看作是一系列的步骤，而不必写出复杂的回调函数或 Promise 链式调用。
下面是 redux-saga 的使用示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - ----- ---- --------- - ---- ---------------------
------ ----------- ---- -------------
--------- ----------- -
--- -
----- -------- - ----- ----------- -------------
----- ---- - ----- ----------------
----- ----- ----- --------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- --------------------- -------- ----- ---
-
-
--------- ---------- -
----- ----------------------- -----------
-
----- -------------- - -----------------------
----- ----- - ------------
------------
-------------------------------
--
-----------------------------
---------------- ----- ------------ ---在上述示例中，我们首先定义了一个名为 fetchUser 的 Generator 函数，用来处理异步操作。在该函数中，我们使用 call 函数发起网络请求，并使用 put 函数将结果作为 action 分发给 reducer 进行处理。如果发生错误，我们使用 put 函数将错误信息作为 action 分发给 reducer 进行处理。
然后，我们定义了一个名为 rootSaga 的 Generator 函数，用来监听 FETCH_USER action，并将其分发给 fetchUser 函数进行处理。最后，我们使用 createSagaMiddleware 函数创建一个 redux-saga 中间件，并将其添加到 Redux 应用中。然后，我们使用 sagaMiddleware.run 函数启动 rootSaga 函数。
需要注意的是，redux-saga 需要使用 Generator 函数来处理异步操作。因此，我们需要熟悉 Generator 函数的语法和用法，才能够使用 redux-saga 中间件。
总结
本文介绍了两种常见的 Redux 中间件：redux-promise 和 redux-saga，它们分别提供了不同的异步操作处理方式。redux-promise 可以使得我们在 action 中返回一个 Promise 对象，用来处理异步操作。redux-saga 可以使得我们在 action 中使用 Generator 函数，用来处理复杂的异步操作。需要根据具体的需求选择合适的中间件。
同时，我们也需要注意到，Redux 中间件并不是必须的，我们也可以在 reducer 中直接处理异步操作，或使用其他的异步操作处理库，例如 Redux Thunk 等。因此，在选择 Redux 中间件时，需要根据具体的需求进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6631ba56d3423812e4f6b453