简介
redux-promise-action 是一个 npm 包，它为 Redux 中的异步操作提供了一种更加易用的方法。它使用 Promise 的方式来封装异步操作，并且提供了一种统一的 action 格式，方便 reducer 的处理。
使用 redux-promise-action 可以使得 Redux 更加简洁和易于维护。
安装
可以使用 npm 或者 yarn 来进行安装：
npm install --save redux-promise-action
或者
yarn add redux-promise-action
使用方法
定义 action
使用 redux-promise-action 的第一步就是定义一个 promiseAction。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------
----- -------- - -----------
----- ---------------- - -------------------
----- -------------------- - ------ -- -
------ ------------------------------- -- -- -
------ --- --------------- -- -
------------- -- -
----------------
-- -----
---
--
-
----- ------- - ------ -- -
------ -
----- ---------
----
-
-
----- ------- - -
--------
--------------------
-使用 promiseAction 创建了一个 promiseAction 函数，该函数接受两个参数：
- type：字符串类型，在 reducer 中用来区分不同类型的 action。
- promise：一个返回 Promise 实例的函数，该函数在 action 被 dispatch 之后会被执行。
处理 action
在 reducer 中处理 promise action：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - --------------- ---------------- ---------------- ---- -----------------------
----- -------- - -----------
----- ---------------- - -------------------
----- ----------- - ------ - --- ------- -- -
------------------- -
---- ---------
------ -
---------
-
----- -----------
-
-
--------
------ -----
-
-
----- ---------- - -----------------
------------
------------------- ------ - --- ------- -- -
--------------------- -
---- ----------
------ --------------------- --------
---- -----------
------ ---------------------- --------
---- -----------
------ ---------------------- --------
--------
------ ------
-
-
--
------ ------- ----------在 reducer 中使用了 pendingReducer、resolvedReducer 和 rejectedReducer 这三个辅助函数来处理 action 的状态。
Dispatch action
在 action 中 dispatch promise action：
dispatch(addTodoPromiseAction("Learn React!")).then(() => {
console.log("Todo added!")
})当执行 dispatch(addTodoPromiseAction("Learn React!")) 时，会返回一个 promise，可以使用 then 方法来处理 action 的状态。
总结
使用 redux-promise-action 可以提高 Redux 的开发效率，让异步操作更加简单易于维护，同时也可以使得代码更加清晰易读。
我们可以使用 Promise 的方式来封装异步操作，并且可以使用统一的 action 格式来处理异步操作的状态，在 reducer 中使用辅助函数来处理异步操作的状态，使得代码更加清晰易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e481e8991b448e0745