在现代的前端开发中，状态管理成了一个不可避免的问题，而 Redux 是一个非常流行的状态管理工具。基于 Redux，衍生出了许多实用的工具包，其中就包括了 redux-act-async 这个 npm 包。
redux-act-async 提供了一种便捷的方式来管理异步请求状态。 使用它可以给我们省去大量重复的工作，同时保证代码的清晰和结构的清晰。在本篇文章中，我们将探讨使用 redux-act-async 包的方法，并通过具体示例来加深理解。
安装 redux-act-async
我们需要先通过 npm 安装 redux-act-async 包，具体的命令如下：
npm install redux-act-async
创建异步操作
redux-act-async 中主要有5种异步操作类型：request（请求）、success（请求成功）、error（请求失败）、abort（请求取消）、clear（清除）。我们可以通过 createAsyncAction 函数来创建异步操作，该函数的参数为一个名称空间和该名称空间中的异步操作类型。
import { createAsyncAction } from 'redux-act-async';
const FETCH_DATA = 'FETCH_DATA';
const fetchDataAction = createAsyncAction(FETCH_DATA);上面代码中，我们定义了一个 FETCH_DATA 的名称空间，并使用 createAsyncAction 函数创建了该名称空间下的异步操作类型。
定义 Redux 中的 action
接下来，我们需要定义 Redux 中的 action，以便在应用中调用。这里我们为 FETCH_DATA 创建五个不同的 action：
import { fetchDataAction } from './namespaces';
export const fetchData = fetchDataAction.request;
export const receiveData = fetchDataAction.success;
export const fetchDataError = fetchDataAction.error;
export const abortFetchData = fetchDataAction.abort;
export const clearFetchData = fetchDataAction.clear;上面代码中，我们为 FETCH_DATA 创建了五个 Action，分别是 request、success、error、abort 和 clear。
定义 Redux 中的 reducer
现在，我们可以定义 Redux 中的 reducer 来处理上面的这些 action。我们可以使用 createAsyncReducer 函数来创建 reducer：
import { createAsyncReducer } from 'redux-act-async';
import { fetchDataAction } from './namespaces';
export default createAsyncReducer(fetchDataAction);上面代码中，我们使用 createAsyncReducer 函数创建了 reducer，然后将它导出为默认用户。
在组件中使用
最后，我们可以在 React 组件中使用 FETCH_DATA：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- -------------- - ---- ------------
----- --- ------- --------- -
------------------- -
-----------------------
-
---------------------- -
----------------------------
-
-------- -
----- - --------- ----- ----- - - -----------
-- ---------- -
------ ------------------
-
-- ------- -
------ --------------
-
------ -
-----
--------- ---------
-------------------------- ----- ---------
------
--
-
-
----- --------------- - ------- -- -
----- - --------- ----- ----- - - ----------------
------ - --------- ----- ----- --
--
----- ------------------ - - ---------- -------------- --
------ ------- ------------------------ -------------------------上面代码中，我们使用 connect 函数连接了 Redux 和 React 组件。在组件中，我们在 componentDidMount 函数内部调用了 fetchData 函数，从而触发 Redux action 的 request 操作，开始异步请求数据。在 componentWillUnmount 函数内部我们调用了 abortFetchData 函数，以便在组件卸载时中断请求。在组件内部，我们展示了数据、错误信息或加载中的 UI。
结论
redux-act-async 是一个非常实用的工具，可以帮助我们更轻松地管理 Redux 中的异步请求状态。通过本文中的介绍和示例代码，相信大家已经可以掌握 redux-act-async 的基本使用方法，并开始在自己的项目中应用它了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8bd7