Redux 是一种基于 Flux 架构的 JavaScript 应用程序状态容器。它通常用于管理前端应用程序中的全局状态。redux-act-async-api 是一个开源的 npm 包，它是 redux-act 的扩展，提供了异步 API 执行的解决方案。
在本教程中，我们将介绍如何使用 redux-act-async-api 解决异步 Actions 的问题。
安装
首先，我们需要在项目中安装 redux、redux-act 和 redux-act-async-api。
npm install redux redux-act redux-act-async-api --save
配置 store
接下来，我们需要创建一个 Redux store，并添加 asyncMiddleware 作为 middleware。
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ------------- - ---- ------------ ------ - --------------- - ---- ---------------------- ----- ----------- - ----------------- -- ------------ ---------- ------ ----------------- --- --- ----- ----- - ------------------------ ----------------------------------
创建异步 Action
我们将使用 createAsyncAction 函数创建一个异步 Action。该函数接收三个参数：
actionName- 异步操作的名称promiseFn- 返回 Promise 的函数options- 包含 onSuccess 和 onError 回调函数的选项对象
import { createAsyncAction } from 'redux-act-async-api';
const fetchUser = createAsyncAction('FETCH_USER', () => {
return fetch('https://api.github.com/users/github')
.then(response => response.json());
});在该示例中，我们创建了名为 FETCH_USER 的异步 Action，它将通过 HTTP 请求获取 GitHub 上的用户数据。
Dispatch 异步 Action
接下来，我们需要 dispatch 该异步 Action，以获取数据并更新状态。
store.dispatch(fetchUser())
.then(() => {
console.log('Fetch user data succeeded');
})
.catch((error) => {
console.log('Fetch user data failed with error:', error);
});在上面的示例中，我们 dispatch 异步 Action，并使用 .then() 和 .catch() 分别处理成功和失败的回调事件。
处理异步数据
异步数据将被存储在 Redux store 中。我们可以在异步 reducer 中寻找它们数据。异步 reducer 是用来管理所有异步数据的 reducer。
-- -------------------- ---- -------
----- ----------- - -----------------
-- ------------ ----------
------ ----------------- ---
---
----- ------------ - ------- ------- -- -
-- -- ---------- ----------
-- ------------ --- --------------------- -
------ -
---------
----- --------------
--
-
------ ------
--在上面的示例中，我们使用 createReducer 函数创建了异步 reducer，并在根 reducer 中将其命名为 async。FETCH_USER_SUCCESS Action 通过 action.payload 携带了 API 返回的用户数据。我们将该数据存储在 Redux store 的 user 属性中，以便在 UI 中显示。
组合异步和同步 Action
我们可以使用 redux-act 和 redux-act-async-api 创建一个包含异步和同步 Action 的 action creator。
-- -------------------- ---- -------
------ - ------------ - ---- ------------
------ - ----------------- - ---- ----------------------
------ ----- ---------- - ----------------------------
------ ----- --------- - ------------------------------- -- -- -
------ --------------------------------------------
-------------- -- -----------------
---
------ ----- ------- - -- -- -
------ ---------- -- -
-------------------------------
----------------------
--
--在上面的示例中，我们创建了一个 action creator，它被用于在选择用户之后，获取该用户的数据。当执行该 creator 时，它将同步 Action SELECT_USER 和异步 Action FETCH_USER 组合在一起。我们可以 dispatch 该 creator 来获取并更新用户数据。
总结
在本教程中，我们介绍了如何通过 redux-act-async-api 解决 Redux 异步 Action 的问题。我们创建了异步 Action 和异步 reducer 来处理异步数据，同时使用同步 reducer 处理同步数据。我们还介绍了如何创建一个 action creator，用于组合异步和同步 Action。
希望这篇文章能够帮助您更好地理解和使用 redux-act-async-api！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bda