简介
redux-promise-x 是一个基于 redux-promise 的增强版，它支持了异步操作的被取消（cancelled）的情况，同时提供较方便的异步 action 组合方式。
redux-promise-x 中的异步操作将会被包装成一个 Promise 实例，同时返回的 action 将会有几个属性：
- type：action 的类型，理论上来说，是必要的，但有些插件（例如 redux-actions）会自动为我们生成；
- payload：异步操作成功后的返回结果；
- error：如果发生了错误，则为 true，同时 payload 将会是错误信息；
- cancelled：如果发生了操作被取消则为 true。
安装
你可以通过以下命令安装 redux-promise-x 包：
npm install redux-promise-x
使用方法
- 在您的 Redux store 中包装
redux-promise-x，和普通的 redux-promise 包装方式一样：
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-x';
const store = createStore(
reducer,
applyMiddleware(promiseMiddleware)
);- 派发一个异步 action：
const loadUser = (uid) => ({
type: 'LOAD_USER',
payload: {
promise: fetch(`/api/user/${uid}`)
.then(response => response.json())
}
});在这个例子中，fetch() 方法将会请求启动一个异步操作，promise: ... 语法表示它是一个 Promise 对象。使用 payload.promise 而不是 payload 来表示其是一个异步操作，与原生的 redux-promise 相同。
- 组合异步 action：
-- -------------------- ---- -------
----- ---------- - ----- -- --
----- --------------
-------- -
-------- ------------------------- -------- ----------
-------------- -- ----------------
-------- -- ----
-
---
----- ----------------- - ----- -- ---------- -- -
-------------------------
-------- -- -------------------------
--在这个例子中，我们使用 deleteUser 删除用户并返回成功的用户 id。在组操作中，使用 deleteUser 并在操作完成后调用 loadUser，以使修改后的数据同步到 store 中。
- 处理异步结果：
redux-promise-x 的成功/失败结果会被包装成一个 action，以便您更容易地处理成功或失败结果。以下是一个完整的例子：
-- -------------------- ---- -------
----- ---- - -- ----- ---------- -- -- -
-----
--------------------
------- ----------- -- -
--------------------------- -- -
---------- ---- --- ---- ----------
---
------------------
------
--
----- ------------- - ------------- -
----------- ---------------
---------
----- -------- - -- ------ --------- -- -- -
-----
------- ------------------------ --------------
----
--------------- -- -
--- --------------
-------------- -------------
-----
---
-----
------
--
----- ----------------- - ------------- -- --
------ -----------
--- -
---------- -------------
-------------
----- ------- - ------ - - ------ -- -- ------- -- -
------ ------------- -
---- --------------------
---- ----------------------
------ - -------- ----- ------ ----------- --
---- ----------------------
------ - -------- ------ ------ -------------- --
---- ------------------------
------ - -------- ------ ------ ----------------------- -- ------- --- --------------- --
---- ---------------------
---- -----------------------
------ - -------- ------ ------ ----------- --
-
--在此示例中，我们将异步加载列表和删除用户组合在一起。当组件加载时，我们调用 loadUsers 方法，并在操作完成后更新 store 中的用户列表。当我们删除一个用户时，我们调用 deleteUser 方法，并在操作完成后更新 store 中的用户列表和通知用户他已删除。
在 reducer 中，我们在每个异步 action 的每个状态点上派发一个新的 action。示例代码中，我们处理三种状态，即“pending”（处理中）、“fulfilled”（完成）和“rejected”（失败）。
状态点的命名采用方法为：
{action.type}_PENDING{action.type}_FULFILLED{action.type}_REJECTED
总结
redux-promise-x 更好地支持了操作的被取消情况，并提供了更好的方式去组合异步 action。结合使用 react-redux、redux-actions 等工具可以快速有效地构建交互型应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567c281e8991b448e403a