介绍
redux-quick-action 是一个快速创建 Redux Action 的 npm 包，它通过规范化 Action 的定义方式，使得创建 Action 变得更加简单、直观。
redux-quick-action 相比于 Redux 官方推荐 Action 创建方式，它的定义方式更加简洁明了，避免了书写大量样板代码。
此外，redux-quick-action 还提供了一些便捷函数，帮助我们更方便地创建异步操作，如 redux-thunk 和 redux-saga 等中间件完美集成。
安装
使用 npm 安装：
npm install redux-quick-action
使用
我们首先需要按照规范定义我们的 Action，一个典型的 Action 需要定义 type 和 payload 两个属性，例如：
{
type: 'SET_USER_INFO',
payload: {
username: 'alice',
age: 18
}
}而 redux-quick-action 提供了一种简单、规范的定义方式，我们只需要提供一个字符串类型的 type 和一个任意类型的 payload 就可以了：
export const setUserInfo = createAction('SET_USER_INFO');对比之下，我们可以发现，使用 redux-quick-action 定义 Action 变得十分简单。
createAsyncAction
redux-quick-action 还提供了 createAsyncAction 便捷函数，来帮助我们更方便地创建异步操作：
export const fetchUserInfo = createAsyncAction('FETCH_USER_INFO');
export const fetchUserInfoSaga = createAsyncEffect(fetchUserInfo, async (payload) => {
const res = await fetchUserInfoApi(payload.id);
return res.data;
});在上述代码中，我们使用 createAsyncAction 创建一个名为 fetchUserInfo 的 Action，然后使用 createAsyncEffect 创建一个名为 fetchUserInfoSaga 的 Saga。
配合 redux-thunk 中间件使用
redux-thunk 中间件非常适合处理异步操作，我们可以非常方便地使用 redux-quick-action 和 redux-thunk 配合使用：
-- -------------------- ---- -------
------ ----- ------------- - -------------------------------------
------ ----- ------------------ - --------- -- ----- ---------- -- -
--------------------------------
--- -
----- --- - ----- -----------------------------
------------------------------------------
- ----- ------- -
------------------------------------
-
--
-- -----
-------------------------------- -----我们首先使用 createAsyncAction 创建一个 Action，然后定义一个 thunk 用于触发异步操作。在 thunk 中，我们首先 dispatch 了一个 start action，用于表示异步操作已经开始。
然后，我们使用 try…catch 语句处理异步操作。在 try 中，我们使用 fetchUserInfoApi 发起异步请求，并将请求的结果通过 dispatch 发送给 reducer。
如果异步操作中出现了异常，我们会通过 catch 局部优化该异常。这些异常的信息会被转化为一个失败的 action，并通过 dispatch 发送到 reducer。
配合 redux-saga 中间件使用
除了 redux-thunk 外，redux-quick-action 还可以与 redux-saga 中间件一起使用：
-- -------------------- ---- -------
------ ----- ------------- - -------------------------------------
------ --------- ------------------------- -
--- -
----- --- - ----- ---------------------- -------------------
----- -------------------------------------
- ----- ------- -
----- -------------------------------
-
-
------ --------- ---------- -
----- ------------------------- -------------------
-在上述代码中，我们首先使用 createAsyncAction 创建一个名为 fetchUserInfo 的 Action，然后通过 createAsyncEffect 创建了一个 Saga。
在 Saga 中，我们使用 try…catch 语句处理异步操作。在 try 中，我们使用 call 函数调用 fetchUserInfoApi 函数并传递参数 action.payload.id，然后将得到的结果转化为成功 action 并通过 put 发送到 reducer。
catch 中的逻辑和 redux-thunk 相似，将异常信息转为失败 action 并发送到 reducer。
最后，我们需要将 fetchUserInfo 和 fetchUserInfoSaga 注册到 rootSaga 中，这样，当我们 dispatch fetchUserInfo action 时，redux-saga 就会自动执行我们定义的 Saga 了。
示例代码
-- -------------------- ---- -------
------ -------------- ------------------ ------------------ ---- ---------------------
-- ------- ------
------ ----- -------- - --------------------------
-- ------ ----------- -----
------ ----- ------------- - -------------------------------------
------ ----- ------------------ - --------- -- ----- ---------- -- -
--------------------------------
--- -
----- --- - ----- -----------------------------
------------------------------------------
- ----- ------- -
------------------------------------
-
--
-- ------ ---------- -----
------ ----- ------------- - -------------------------------------
------ --------- ------------------------- -
--- -
----- --- - ----- ---------------------- --------------------------
----- ------------------------------------------
- ----- ------- -
----- -------------------------------
-
-
------ --------- ---------- -
----- ------------------------- -------------------
-总结
通过本篇文章，我们了解了 redux-quick-action 的原理和使用方式，可以发现，使用 redux-quick-action 可以让我们更加规范地定义 Action 和处理异步操作，避免繁琐的样板代码，提升代码可读性和可维护性。
因此，在日常的 React 和 Redux 开发中，使用 redux-quick-action 将会给我们带来极大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067011e361a36e0bce8d80