介绍
redux-actions-async 是一个用于处理异步操作的 npm 包。它是 redux-actions 的一个扩展，可以帮助你更方便地处理异步 action 和 reducer。redux-actions-async 提供了一种简单的方式来将异步代码从你的 action creator 中分离出来，使你的代码更加清晰和易于管理。
安装
通过 npm 安装 redux-actions-async：
npm install --save redux-actions-async
使用
创建异步 Action Creator
Redux 的标准做法是将网络请求转移到 Redux 中。
创建一个异步的 action creator，可以使用 redux-actions-async 中的 createActionAsync 方法。
import { createActionAsync } from 'redux-actions-async'
const fetchUserData = createActionAsync('FETCH_DATA', async () => {
const response = await fetch('https://example.com/users')
const data = await response.json()
return data
})createActionAsync 接受两个参数：action type 和一个返回 Promise 结果的异步函数。它返回一个对象，包含三个 action creator：FETCH_DATA_STARTED，FETCH_DATA_SUCCEEDED 和 FETCH_DATA_FAILED。
在这个例子中，我们向 https://example.com/users 发送了一个网络请求，并使用 response 对象的 json() 方法获取响应数据。然后使用 Promise 来处理异步操作。
使用异步 Action Creator
在你的应用程序中，你可以像使用任何其他的 action creator 一样使用这个异步 action creator：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ - ------------- - ---- -----------
----- ----------- ------- --------- -
------------------- -
----- - ------------- - - ----------
---------------
-
-------- -
----- - ---------- ---- - - ----------
-- ----------- -
------ ---------------------
-
------ ---------------------------------
-
-
----- --------------- - ----- -- --
---------- -------------------------
----- -------------------
--
----- ------------------ - -
-------------
-
------ ------- ------------------------ --------------------------------在这个例子中，我们使用了 react-redux 的 connect() 函数将 MyComponent 组件与 Redux store 相连接。在 componentDidMount 生命周期中，我们调用了 fetchUserData 方法来获取用户数据。在 render 函数中，我们根据 isLoading 属性来显示“Loading…”或用户数据。
处理异步操作
最后，我们需要在 reducer 中处理异步操作。
redux-actions-async 提供了一个 reducerAsync 函数，用于自动生成 reducer。你只需要传递它的参数：action type 和一个对象，用于更新 state。在这个对象中，你需要提供三个函数：started、succeeded 和 failed，分别对应异步操作的不同阶段。
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------
----- ------------ - -
---------- ------
----- --
-
----- ------- - --------------------------- -
-------- ----- -- --
---------
---------- ----
---
---------- ------- ------- -- --
---------
---------- ------
----- --------------
---
------- ----- -- --
---------
---------- ------
------ ------- -- ----- ---- ------
--
-- -------------在这个例子中，我们使用了刚刚创建的 fetchUserData action creator。我们定义了三个不同的函数，处理异步操作的三个不同阶段。started 函数在 action 已经被发送后执行，succeeded 函数在异步操作成功后执行，failed 函数在异步操作失败后执行。
我们还传递了一个 initialState 参数用于初始化 state。
示例代码
创建一个简单的 Redux 应用来展示如何使用 redux-actions-async。该应用使用 GitHub 的 API 来获取用户数据。你需要提供自己的 GitHub 用户名和存储库，才能在本地测试该应用。
安装依赖：
npm install --save redux-actions-async react-redux
App.js：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ - ----------------- - ---- ---------------------
----- ------------- - ------------------------------------ ----- ---------- ----------- -- -
----- -------- - ----- ----------------------------------------------------------------------------
----- ---- - ----- ---------------
------ ----
--
----- --- - -- ---------- ----- ------ ------------- -- -- -
------------ -- -
------------------------------------- -------------------
-- ---
------ -
-----
---------- -- ----------------------
------------ - - -- -
----
--------------------- -- -
--- ---------------------
------------------------------------ -----------------------------
-----
---
-----
--
------ -- -------------------
------
-
-
----- --------------- - ----- -- --
---------- -------------------------
----- --------------------
------ --------------------
--
----- ------------------ - -
-------------
-
------ ------- ------------------------ ------------------------reducers.js：
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------
------ - ------------- - ---- -----------
----- ------------ - -
---------- ------
----- ---
------ ---------
-
----- --------------- - --------------------------- -
-------- ----- -- --
---------
---------- ----
---
---------- ------- ------- -- --
---------
---------- ------
----- --------------
---
------- ------- ------- -- --
---------
---------- ------
------ --------------
--
-- -------------
------ ------- ---------------actions.js：
import { createActionAsync } from 'redux-actions-async'
export const fetchUserData = createActionAsync('FETCH_USER_DATA', async (username, repository) => {
const response = await fetch(`https://api.github.com/repos/${username}/${repository}/contributors`)
const data = await response.json()
return data
})store.js：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- ------- ------ ----- ---- ------------- ------ --------------- ---- ------------ ----- ----------- - ----------------- --------- ---------------- -- ------ ----- ----- - ------------------------ -----------------------
结论
redux-actions-async 是一个非常有用的 npm 包，用于处理异步操作。它可以帮助你更轻松地管理你的 Redux 应用程序，并使代码更清晰易懂。使用它可以使你的应用程序更加简洁和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c4a