如果你是一名前端开发人员，那么你一定会经常使用 Redux 来管理数据流。Redux 是一个可预测的状态容器，它可以使开发人员更好地管理应用程序的状态。但是 Redux 的工作机制需要仔细理解和处理，这就给开发人员带来了一定的困难。为了帮助开发人员更好地处理 Redux 中的异步操作，开发人员在 Redux 的基础上开发了一个名为 redux-saga 的 npm 包，这个包允许开发人员以一种更加简单和可预测的方式处理异步操作。
在本篇文章中，我们将一起了解 npm 包 redux-saga-thunk 的使用教程。
什么是 redux-saga-thunk？
redux-saga-thunk 是一个基于 redux-saga 和 redux-thunk 的库，用于处理异步操作。redux-saga-thunk 的目标是简化 Redux 应用程序中的异步数据流程，允许开发人员更加轻松地处理异步操作。
redux-saga-thunk 可以处理所有常见的异步操作，如数据获取、表单提交、网络请求等。
安装
通过 npm 安装 redux-saga-thunk，使用以下命令：
npm install redux-saga-thunk --save
如何使用 redux-saga-thunk？
redux-saga-thunk 的基本目标是让开发人员更好地处理 Redux 中的异步操作，让他们能够以一种更加简单和可预测的方式处理异步操作。
redux-saga-thunk 包括以下两个主要部分：异步 action creator 和 saga。
异步 action creator
redux-saga-thunk 允许你创建异步 action creator，例如处理数据获取操作。
首先，我们需要新建一个 action creator 和一个 saga。
-- -------------------- ---- ------- -- ------ -------- ------ ----- ---------- - ------------- ------ ----- ------------------ - --------------------- ------ ----- --------------- - ------------------ ----- ---------------- - ---- -- -- ----- ------------------- ----- --- ----- ------------- - ----- -- -- ----- ---------------- ------ --- ------ ----- --------- - -- -- -- ----- ----------- -------- -- -- ----------------------- ---------- ----------------- ------- -------------- ---
在上面的代码中，我们创建了一个名为 fetchData 的异步 action creator，它使用了 redux-saga-thunk 提供的 promise 和 onSuccess/onFail 回调函数。
promise 函数返回一个 Promise，它将被 saga 处理，并在完成时将 result 以 FETCH_DATA_SUCCESS action 的形式返回。
onSuccess 回调函数将在成功时被调用，并将 result 以 FETCH_DATA_SUCCESS action 的形式返回。
onFail 回调函数将在失败时调用，并将 error 以 FETCH_DATA_FAIL action 的形式返回。
Saga
现在让我们来编写一个 saga，以便处理我们刚才创建的异步 action creator：
-- -------------------- ---- -------
------ - ---------- - ---- ---------------------
------ - ----------- ----------------- ------------- - ---- ------------
--------- --------------------- -
--- -
----- -------- - ----- -----------------
----- -------------------------------------
- ----- ------- -
----- --------------------------
-
-
------ ------- --------- ---------- -
----- ---------------------- ---------------
-在上面的代码中，我们编写了一个名为 fetchDataSaga 的 saga，它使用了 redux-saga-thunk 提供的 takeLatest 方法，以便于对每个 FETCH_DATA action 进行响应。
当 fetchDataSaga 被调用时，它会尝试通过 action.promise() 发起网络请求。
如果请求成功，then 块中的 fetchDataSuccess(action.data) 会被调用，这将使用响应数据更新 Redux store，并触发 FETCH_DATA_SUCCESS action。
如果请求失败，catch 块中的 fetchDataFail(error) 会被调用，这将触发 FETCH_DATA_FAIL action。
结合 redux-logger
为了方便调试，我们可以使用 redux-logger 将 Redux 的状态记录到控制台中。只需在创建 store 时将下面的代码添加到中间件中即可。
-- -------------------- ---- ------- ------ -------------------- ---- ------------- ------ ----- ---- -------------- ------ ------ ---- --------------- ------ ----------- ---- ------------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----------- - ------- --------------- -------- ----- ----- - ------------------------ --------------------------------- -----------------------------
示例代码
最后，为了更好地理解 redux-saga-thunk 的使用，可以参考下面的示例代码：
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ ----- ---------- - -------------
------ ----- ------------------ - ---------------------
------ ----- --------------- - ------------------
----- ---------------- - ---- -- -- ----- ------------------- ---- ---
----- ------------- - ----- -- -- ----- ---------------- ----- ---
------ ----- --------- - -- -- --
----- -----------
-------- -- -- -----------------------
---------- -----------------
------- --------------
---
-- --------
------ - ----------- --- - ---- ---------------------
------ - ----------- ----------------- ------------- - ---- ------------
--------- --------------------- -
--- -
----- -------- - ----- -----------------
----- -------------------------------------
- ----- ------- -
----- --------------------------
-
-
------ ------- --------- ---------- -
----- ---------------------- ---------------
-
-- -----------
------ - ------------------- --------------- - ---- ------------
----- ------------ - -
----- ---
------ ---
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------
------ - --------- ----- ----------- --
---- ----------------
------ - --------- ------ ------------ --
--------
------ ------
-
--
------ ------- ------------
-- --------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ ----- ---- --------------
------ ------ ---- ---------------
------ ----------- ---- -------------
------ -------- ---- ----------
----- -------------- - -----------------------
----- ----------- - ------- --------------- --------
----- ----- - ------------------------ ---------------------------------
-----------------------------
------ ------- ------总结
通过本文，我们学习了如何使用 redux-saga-thunk 处理 Redux 中的异步操作。我们了解了 redux-saga-thunk 的目标、安装方法和使用方法，并通过示例代码深入学习和理解了 redux-saga-thunk 的使用与原理。
希望本文对你的工作有所帮助。如果你有任何疑问或不懂的地方，请随时联系作者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a9a