RxJs 操作符 withLatestFrom 在 SAP 电商云 Spartacus UI 中的应用
看下面这段代码:
getSupportedDeliveryModes(): Observable<DeliveryMode[]> {return this.checkoutStore.pipe(select(CheckoutSelectors.getSupportedDeliveryModes),withLatestFrom(this.checkoutStore.pipe(select(getProcessStateFactory(SET_SUPPORTED_DELIVERY_MODE_PROCESS_ID)))),tap(([, loadingState]) => {if (!(loadingState.loading || loadingState.success || loadingState.error)) {this.loadSupportedDeliveryModes();}}),pluck(0),shareReplay({ bufferSize: 1, refCount: true }));}
调用 withLatestFrom 的 Observable 对象,起到主导数据产生给下游观察者的作用。作为参数被调用的 Observable 对象只能贡献新的数据,而不能控制数据的产生时机。
换句话说,上述 Spartacus 的例子,CheckoutSelectors.getSupportedDeliveryModes Observable 对象是向下游产生数据的主导者,而 select(getProcessStateFactory(SET_SUPPORTED_DELIVERY_MODE_PROCESS_ID 只是数据片段的贡献者。
下图第 54 行的语法是元祖,元祖也是数组,但各个元素的数据类型不一定必须相同。
第 54 行的 loadingState,代表的就是从 ngrx store 里取出的 setDeliveryModeProcess 的状态。第 55 行的语义是,如果状态是 loading 或者 成功,或者是 error ,则不做任何事情,否则调用 58 行的 loadSupportedDeliveryModes, 进行 mode 的加载。
这里我们巧妙的使用了 withLatestFrom, 将 delivery mode 的加载状态,引入到 getSupportedDeliveryModes 的交互之中。
再看另一个例子:
protected buildRestoreSavedCartEvents<T>(mapping: ActionToEventMapping<T>): () => void {const eventStream$ = this.getAction(mapping.action).pipe(switchMap((action) =>of(action).pipe(withLatestFrom(this.multiCartService.getCart(action.payload.cartId)))),map(([action, cart]) =>createFrom(mapping.event as Type<T>, {...action.payload,cartCode: cart.code,saveCartName: cart.name,saveCartDescription: cart.description,...(cart.saveTime && { saveTime: cart.saveTime }),})));
这里调用 withLatestFrom 的 Observable 对象的类型为 Action,包含一个类型为 string 的字段 type 和类型为 any 的 payload 字段。
贡献数据即传入 withLatestFrom 操作符函数的输入参数,类型为 146 行 this.multiCartService.getCart 的返回参数,类型为 Cart,如下图所示:
因此,在 pipe 操作符下游即 149 行代码里,map 的输入参数为元祖:[ action, cart], 两个元素的数据类型分别为:
以及:
值得一说的是,combineLatest 和 withLatestFrom 有本质的区别。在前者的调用里,所有参与运算的 Observable 地位都是均等的,只要有任意一个发生变化,combineLatest 都会从所有的输入 Observable 对象中拿出最后一次产生的数据,组合成数组的数据类型,传递给下游。
更多Jerry的原创文章,尽在:“汪子熙”:
RxJs 操作符 withLatestFrom 在 SAP 电商云 Spartacus UI 中的应用相关推荐
- Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...
- 如何在 SAP 电商云 Spartacus UI 中创建新的页面
Spartacus 中的页面基于使用相关 API 从 SAP Commerce 后端获取的 CMS 页面.来自 SAP Commerce 端的数据定义了元数据,如 url.标题等,以及页面的结构.结构 ...
- SAP 电商云 Spartacus UI 中的 cx-message 和 global message
前者如果消息类型为 ERROR,除非用户手动点击 X,否则不会消失: 后者为 Global Message,数秒钟后会自动消失: 后者通过 globalMessageService 的 add 方法抛 ...
- SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
- SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
- SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
- 在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...
- SAP 电商云 Spartacus UI Quick Order 主页的实现
存货单位(英語:stock keeping unit,SKU/ˌɛsˌkeɪˈjuː/),也翻译为库存单元,是一個會計學名詞,定义为库存管理中的最小可用单元,例如纺织品中一个SKU通常表示规格.颜色. ...
最新文章
- PyTorch中torchvision介绍
- 新手搭建阿里云FTP服务器
- 几u产品结构计算机什么意思,计算机u系统组成.ppt
- php页面上限制字符串长度,PHP如何限制字符串显示长度
- 合约实战,代币合约,DAPP开发
- Android okHttp上传图片
- [ZZ] 使用rsync来实现快速删除大量文件
- 企业运维经典面试题汇总(3)
- yolov3从头实现(二)-- 数据增强
- apache2: unrecognized service
- Element源码系列——搭建Karma测试环境及Eslint语法检测
- 圣多米尼克高中有计算机课吗,院校库_VPEA北美留学院校数据查询中心
- php中怎么添加css样式_html怎么添加css样式?
- PAT甲级 1116
- 毫秒为单位产生随机数
- OpenAI API及ChatGPT系列教程1:快速入门
- 深圳租房数据可视化分析【Plotly库绘图】
- D2x神符之语中英文对照图文豪华版
- grep命令 linux
- 手游虚拟机中连接不到服务器,自由幻想手游模拟器进不去游戏 登录失败解决办法...
热门文章
- mysql常用sql语句优化
- 爬取json Swaggerui界面
- Python cmd中输入'pip' 不是内部或外部命令,也不是可运行的程序或批处理文件。...
- [reprint]如何编写引导程序 Hello World
- “Zhuang.Data”轻型数据库访问框架(一)开篇介绍
- linux查找替换grep以及正则表达式
- 【Java】生成 .json格式文件工具类
- Java基础实战Bank项目01-04
- 求矩阵中各列数字的和 Exercise08_01
- bzoj 4880 [Lydsy1705月赛]排名的战争 贪心