async-action-creator 是一个可以简化 async Redux action 创建过程的 npm 包。它的主要作用是减少 Redux 中异步请求的代码量，从而使项目更加易于维护。
安装
npm install async-action-creator
使用
导入
import createAsyncActionCreators from 'async-action-creator';
创建 async action creators
const asyncActionCreators = createAsyncActionCreators('FETCH_DATA');调用 async action creators
dispatch(asyncActionCreators.request());
详细说明
创建 async action creators
createAsyncActionCreators 函数接受一个字符串作为参数，用于创建三个 Redux actions（request、success、failure）：
- request：发出异步请求前触发的 action；
- success：异步请求成功时触发的 action；
- failure：异步请求失败时触发的 action。
const asyncActionCreators = createAsyncActionCreators('FETCH_DATA');在上面的例子中，我们创建了带有 FETCH_DATA 类型的三个 action creators。
调用 async action creators
通过调用异步 action creators 来触发相应的 Redux actions。以下为使用示例：
// 发送异步请求前 dispatch(asyncActionCreators.request()); // 发送异步请求 fetchData().then( response => dispatch(asyncActionCreators.success(response)), error => dispatch(asyncActionCreators.failure(error)), );
当异步请求开始时，我们调用 request()，这将触发 Redux 中的 request action。当异步请求成功或失败时，我们分别调用 success(response) 或 failure(error)，这将触发 Redux 中的 success action 或 failure action。
在以上示例中，我们暂时忽略了 fetchData() 函数的实现细节，你只需要根据你的具体情况来实现它即可。
示例
以下是一个完整的示例：
-- -------------------- ---- -------
------ ------------------------- ---- -----------------------
-- -- ----- ------ --------
----- ------------------- - ----------------------------------------
-- -- -------
-------- --------------- - ------------- ------- -
------ ------------- -
---- -----------------------------------
------ -
---------
---------- -----
--
---- -----------------------------------
------ -
---------
----- ---------------
---------- ------
--
---- -----------------------------------
------ -
---------
------ ---------------
---------- ------
--
--------
------ ------
-
-
-- -------
----------------------------------------
-- ------
-----------------
-------- -- ------------------------------------------------
----- -- ---------------------------------------------
--指导意义
通过使用 async-action-creator，我们可以快速简化 Redux 中的异步请求的 action。这大大减少了我们的代码复杂度，并使代码更容易阅读和维护。同时，我们还可以使用默认的三个 action，这使得开发人员能够更加关注于业务逻辑的实现。
然而，使用 async-action-creator 时需要注意以下几点：
- 在异步请求处理成功或失败后，一定要分别使用
success(response)和failure(error)； - 当然，在使用
success和failure时，你需要确保异步请求处理成功或失败后将响应或错误作为参数传递给相应的 action； - 顺手添加用于控制正在进行的异步请求的状态码可能会让你的代码更加可读。
最后，我相信 async-action-creator 将会成为你在开发中的得力助手，它将为你提供更加便利和实用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a3b