如果你是一个前端开发者，肯定知道 Redux 这个状态管理库是很重要的一个工具。在使用 Redux 过程中， dispatch 异步 action 是一个很常见的需求。但是 Redux 默认并不支持异步 action，这时候就需要通过 redux-thunk 或者 redux-saga 等中间件去支持异步 action。不过使用这些中间件还需要写很多繁琐的代码，为了解决这个问题，本文介绍一款 npm 包：redux-minimal-code-async-actions，让 Redux 支持异步 action 的过程更加简单。
安装
首先，我们需要安装 redux-minimal-code-async-actions 包。通过 npm 命令行可以很容易安装：
npm install --save redux-minimal-code-async-actions
使用
在使用 redux-minimal-code-async-actions 的过程中，我们需要定义三种类型的 action：
- Request（请求）：用于触发异步请求的 action。
- Received（接收成功）：用于接收请求成功返回数据的 action。
- Error（错误）：用于接收请求失败返回的 action。
Request 类型 action
在 Redux 中 dispatch 一个 Request 类型的 action 大概是这样的：
dispatch({ type: "FETCH_DATA_REQUEST" });使用 redux-minimal-code-async-actions 包后，会自动帮我们生成一个 Request 类型的 action，无需手动编写。代码如下：
import asyncActionCreator from 'redux-minimal-code-async-actions';
export const fetchData = asyncActionCreator('FETCH_DATA', 'http://example.com/data');这里的 asyncActionCreator 函数生成的对象包括 Request、Received 和 Error 类型的 action。
Received 类型 action
Received 类型的 action 用于保存请求成功后的结果数据，而且需要手动定义 payload（负载）属性。代码如下：
dispatch({
type: "FETCH_DATA_RECEIVED",
payload: {...}
});使用 redux-minimal-code-async-actions 后，我们不再需要手动定义 payload 属性。Received 类型的 action 会自动创建，代码如下：
import asyncActionCreator from 'redux-minimal-code-async-actions';
export const fetchData = asyncActionCreator('FETCH_DATA', 'http://example.com/data');
async function fetchDataDispatch() {
const data = await fetchData.dispatchAsync(dispatch);
console.log(data) // payload will be logged
}这里 fetchData.dispatchAsync(dispatch) 返回一个 Promise 对象，可以用来获取异步请求的结果数据。
Error 类型 action
Error 类型的 action 用于保存请求失败后的错误信息，手动编写的代码如下：
dispatch({
type: "FETCH_DATA_ERROR",
payload: {...}
});使用 redux-minimal-code-async-actions 包后，Error 类型的 action 也不再需要手动编写。代码如下：
-- -------------------- ---- -------
------ ------------------ ---- -----------------------------------
------ ----- --------- - -------------------------------- ---------------------------
----- -------- ------------------- -
--- -
----- ----------------------------------
- ----- --- -
-------------- -- ----- ---- -- ------
-
-这里 fetchData.dispatchAsync(dispatch) 通过 catch 捕获错误，如果发生错误则会进入 catch 代码块。
示例代码
下面是一个基于 redux-minimal-code-async-actions 包的使用示例代码：
-- -------------------- ---- -------
------ ------------------ ---- -----------------------------------
-- ---- ----- ---- ------
------ ----- --------- - -------------------------------- ---------------------------
-- ---- ----------------- --
----- -------- ------------------- -
--- -
----- ---- - ----- ----------------------------------
----------------- -- ------- ---- -- ------
- ----- --- -
-------------- -- ----- ---- -- ------
-
-总结
redux-minimal-code-async-actions 包让 Redux 支持异步 action 的实现更加简单，可以大大减少我们编写冗余代码的量。在使用 redux-minimal-code-async-actions 包时，我们需要按照固定的格式定义 Request、Received 和 Error 类型的 action，并使用 asyncActionCreator 函数生成异步 action 类型的对象。如果你正在使用 Redux 并且需要支持异步 action，不妨尝试一下 redux-minimal-code-async-actions 包，它将帮助你减少代码量并提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572d581e8991b448e90b9