介绍
redux-optimist-promise 是一个 Redux 的扩展包，提供了基于 redux-promise 和 redux-optimist 的乐观（Optimistic）异步流程处理方式。它的主要功能是在进行异步流程（如 Ajax 请求）时，先以预先设定的初始状态显示页面，接着在后续得到请求响应后更新页面状态。通过这种方式，能够快速响应用户的操作，避免让用户等待过久。
该库提供了 Action 和 Reducer 处理匹配方法，以及用于创建相应 Action 的 Action Creator 方法。用户只需配置相应的回调函数即可使用。
安装
可以通过 npm 进行安装，使用如下命令即可：
npm install redux-optimist-promise
使用步骤
1. 导入
首先，需要在代码文件中导入该库：
import { createAction } from "redux-optimist-promise";2. 配置 Callback
配置相应的回调函数，例如：
const promise = (payload) => {
return new Promise((resolve, reject) => {
// 异步操作，并根据结果调用 resolve 或 reject
})
}3. 创建 Action Creator
使用 createAction 方法创建 Action Creator，例如：
const actionCreator = createAction("YOUR_TYPE", promise, {
start: () => ({ type: "START" }),
finish: () => ({ type: "FINISH" }),
error: () => ({ type: "ERROR" }),
optimist: {
onCommit: (nextState) => ({ type: "COMMIT", nextState })
}
})其中，"YOUR_TYPE" 是你希望自定义的 Action 类型。promise 是上文提到的异步操作函数，用于在 Action Creator 中进行处理。start, finish, error 分别对应异步操作开始，完成和出错时的回调函数。optimist 对象中是处理乐观异步操作的回调函数。其中 onCommit 回调函数，可以在异步操作成功后提交乐观状态的 Action。
4. 使用 Action
使用创建好的 Action Creator 创建 Action，例如：
dispatch(actionCreator(payload))
5. 处理 State
通过 reducer 处理 State：
-- -------------------- ---- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ------------
-- -- -------
------ -
---------
-------- --------------
-
---- --------
-- -- ----- ------
------ -
---------
-------- ----
-
---- ---------
-- -- ------ ------
------ -
---------
-------- -----
-
---- --------
-- -- ----- ------
------ -
---------
------ ----
-
---- ---------
-- -- ------ ------
------ -
---------
-------- ----------------
-
--------
------ -----
-
-示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - ------------ - ---- -------------------------
----- ------- - --------- -- -
------ --- ----------------- ------- -- -
-- -------------- ------- - ------
--
-
----- ------------- - ------------------------- -------- -
------ -- -- -- ----- ------- ---
------- -- -- -- ----- -------- ---
------ -- -- -- ----- ------- ---
--------- -
--------- ----------- -- -- ----- --------- --------- --
-
--
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ------------
-- -- -------
------ -
---------
-------- --------------
-
---- --------
-- -- ----- ------
------ -
---------
-------- ----
-
---- ---------
-- -- ------ ------
------ -
---------
-------- -----
-
---- --------
-- -- ----- ------
------ -
---------
------ ----
-
---- ---------
-- -- ------ ------
------ -
---------
-------- ----------------
-
--------
------ -----
-
-
-- -- ------ ------- -- ------
--------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c4e