如果您正在开发 React 应用程序并使用 Redux，那么您一定听说过 redux-thunk。它是一个 Redux 中间件，允许您编写异步的 action creators，这些 action creators 可以返回一个函数而不是一个普通的 action 对象。但是，您知道吗？您可以使用其他方法来处理异步流程而不必依赖 redux-thunk。在本篇文章中，我们将探讨如何替换 redux-thunk，并提供一些示例代码。
1. 基于 Promise 的中间件
一个不依赖 redux-thunk 的替代方案是基于 Promise 的中间件。这种中间件可以让您的 action creators 返回 Promise，从而将异步流程处理从 Redux store 中分离出来。不仅如此，它还可以让您更好地控制 Promise 的生命周期，例如处理错误和超时。
下面是一个基于 Promise 的中间件示例：
const promiseMiddleware = ({ dispatch }) => next => action => {
if (typeof action.then === 'function') {
return Promise.resolve(action).then(dispatch)
}
return next(action)
}它允许您编写像这样的 action creator：
const fetchData = () => dispatch => {
return fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data })
})
}这个 action creator 返回一个函数而不是一个 action 对象，但是返回的函数返回的是一个 Promise。在这个例子中，fetchData 会发起一个 HTTP 请求，并在请求成功后将数据 dispatch 到 Redux store 中。
通过使用上面的 promiseMiddleware，它将识别到 fetchData 的结果是一个 Promise，它会等待 Promise 执行完成并将结果 dispatch 到 Redux store 中。
2. 基于 async/await 的中间件
async/await 是一种 JavaScript 特性，它可以让您更方便地编写异步代码。为了使用 async/await，您需要使用一个带有 async 关键字修饰符的异步函数。在 Redux 中，您可以使用基于 async/await 的中间件来处理异步流程。
下面是一个基于 async/await 的中间件示例：
-- -------------------- ---- -------
----- --------------- - -- -------- -- -- ---- -- ----- ------ -- -
----- - ----- ------- - - ------
----- ----- - ---------------
-- --------- --- -------- -
------ ------------
-
---------- ----- ------------------- --
--- -
----- ------ - ----- ---------
---------- ----- ---------------------- -------- ------ --
- ----- ----- -
---------- ----- -------------------- ------ ----- -------- --- --
-
-这个中间件基于 action.types，监听所有以 ASYNC 结尾的 action，并将其传递到下一个 middleware 或 Redux store。如果 action 的类型是以 ASYNC 结尾的，asyncMiddleware 就会发起一个新的 action，例如 START 或 ERROR，以反映异步操作的状态。然后，它会等待 Promise 解析，然后 dispatch 我一个新的 action 来传递异步操作的结果。
3. 使用 Sagas
Sagas 是 Redux 的第三方库，它延伸了 Redux 的理念以支持更高级别的中间件应用程序。Sagas 将异步操作看作是一个可交互的事务，并使用一组生成器函数来描述这些事务。这可以让您控制异步操作的生命周期，并让它们更具预测性。
下面是一个 Saga 示例：
-- -------------------- ---- -------
--------- ----------------- -
--- -
----- -------- - ----- ----------- -------------------------------
----- ---- - ----- --------------- ---------------
----- ----- ----- --------------------- -------- ---- --
- ----- ----- -
----- ----- ----- ------------------- ------ ----- -------- --- --
-
-
--------- ---------------- -
----- ----------------------------- ----------
-
------ ------- --------- ---------- -
----- -----------------------
-这里，我们定义了两个生成器函数：一个处理异步数据获取的 fetchData 和一个监听 FETCH_DATA_ASYNC action 的 watchFetchData。在 fetchData 中，我们使用 call 效用函数来调用异步 API，并使用 put 效用函数将数据 dispatch 给 Redux store。在 watchFetchData 中，我们使用 Saga 的 takeEvery 函数来监听 FETCH_DATA_ASYNC action，以启动 fetchData。
结论
Redux-thunk 是一种流行的 Redux 中间件，让我们可以更好的处理异步行为，但是我们也可以使用其他替代方案来处理异步行为。本文介绍了一些可供选择的 Redux 中间件，包括基于 Promise 的中间件、基于 async/await 的中间件以及 Sagas。选择合适的替代方案可以使您的代码更简洁而且更可读，同时也可以更好的控制您的异步行为生命周期。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675264148bd460d3ad93b6b3