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