在前端开发中，Redux 及其插件是非常流行的工具之一，而 redux-saga-async-action 是一个方便且易用的 npm 包，能够帮助开发者更加高效地处理 Redux Action 中的异步操作。
什么是 redux-saga-async-action
redux-saga-async-action 是一个基于 redux-saga 的中间件，旨在为 Redux Action 的异步操作提供更好的支持。通过使用 redux-saga-async-action，开发者不需要手动调用 saga，而是可以通过一种简单的方式，实现 Redux Action 的异步操作。
如何使用 redux-saga-async-action
首先，我们需要通过 npm 安装 redux-saga-async-action，命令如下：
npm install redux-saga-async-action --save
安装完成后，在 Redux createStore 中引入 middleware：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ --------------------- ---- -------------------------- ------ ----------- ---- ------------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ------------------------------- ---------------------- -- -----------------------------
此时，我们已经成功引入了 redux-saga-async-action，接下来让我们看一下如何使用它。
在 Redux Action 中，除了常规的 type 和 payload 属性外，我们新增了两个属性：
{
type: 'FETCH_USER_LIST',
asyncAction: true,
asyncable: ['REQUEST', 'SUCCESS', 'FAILURE'],
payload: { id: 1 }
}其中，asyncable 属性用于指定异步操作的三个阶段：请求、成功和失败。
接下来，我们需要在 Redux Saga 中使用 takeAsyncAction 函数来监听这三个阶段的 Action。例如，我们可以这样编写：
-- -------------------- ---- -------
------ - ---- ---- ----- ---------- - ---- ---------------------
------ - --------------- - ---- --------------------------
------ - --------------------- -------------------- - ---- ------------
------ - ------------- - ---- --------
--------- ------------------------- -
--- -
----- -------- - ----- ------------------- ----------------
----- ------------------------------------
- ----- ------- -
----- ---------------------------------
-
-
--------- -------------------------- -
----- -----
-------- ------------------------------------- -------------------
-------- -------------------------------------------
-------- ------------------------------------------
---
-
------ ------- --------- ---------- -
----- -----
--------------------------
---
-在我们的 Saga 中，我们可以看到，通过 takeAsyncAction 函数，我们监听到了 Action 的成功和失败阶段，并分别调用了对应的处理函数。
最后，让我们添加一个示例代码：
-- -------------------- ---- -------
-- ----------
------ ----- -------------------- - --------- -- --
----- ------------------
------------ -----
---------- ----------- ---------- -----------
-------
---
------ ----- -------------------- - --------- -- --
----- --------------------------
-------
---
------ ----- -------------------- - --------- -- --
----- --------------------------
-------
---
-- ------
------ ----- ------------- - ----- --------- -- -
----- -------- - ----- -------------------------------------
----- -------- - ----- ----------------
------ ---------
--
-- ------------
------ - ----------- - ---- --------------
------ - -------------------- - ---- ------------
----- --------- - -- -- -
----- -------- - --------------
----- ----------------- - -- -- -
------------------------------- --- - ----
--
------ -
------- --------------------------------- ---- -------------
--
--以上就是使用 redux-saga-async-action 的简单教程，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559c981e8991b448d74e8