SAP Spartacus 读取 Cart 的原理分析

App.module.ts 的源代码：

export class AppModule { constructor(private config: DebugConfig,private actions$: Actions,private cartService: ActiveCartService){// console.log('Jerry config: ', this.config);this.actions$.pipe(ofType(CartActions.LOAD_CART),map((action: CartActions.LoadCart) => action.payload),tap((data) => console.log('Jerry cart: ' , data))).subscribe();this.cartService.getLoading().subscribe((data) => console.log('Jerry cart loading? ', data));}}

首先执行 ofType，这本质是一个 filter 操作：

数组的 some 方法：检查数组元素是否满足 predicate 函数指定的条件

然后执行 map 操作，返回一个 OperatorFunction，作为 pipe 的输入条件之一：

触发点：

quantity 的值来自 activeCartService 维护的 active cart 的 deliveryItemsQuantity 字段。

执行 Async pipe：

async pipe 的 transform 方法会调用 subscribe 方法：

createSubscription 最终会调用：

getActive 返回：

activeCart$ 的值来自 activeCartLoading$ 和 activeCartValue$ 两部分。

activeCartLoading$ 负责加载 cart，见代码第 139 行。

调用的是 ActiveCartService 的 loadCart 方法：

给 store 发送一个 action。

LoadCart 扩展自 EntityLoadAction，除了 payload 之外，定义了额外的字段：

比如 meta：

如果想打印出加载成功的购物车信息：

const action2 = this.actions$.pipe(ofType(CartActions.LOAD_CART_SUCCESS),map((action: CartActions.LoadCartSuccess) => action.payload),tap((data) => console.log('Jerry cart SUCCESS: ' , data)));action2.subscribe();const action3 = this.actions$.pipe(ofType(CartActions.LOAD_CARTS_SUCCESS),map((action: CartActions.LoadCartsSuccess) => action.payload),tap((data) => console.log('Jerry carts SUCCESS: ' , data)));action3.subscribe();

结果：

那么，这个加载成功的 Cart 数据，是如何通过 action 实例 subscribe 之后被读取出来的呢？

显然，单步调试第73行代码，并不会看到我们想了解的明细。因为 subscribe 只是触发 cart 的加载，而后者是一个异步过程。

F8之后断点再次触发时，cart 数据已经出现在 payload 里了。但是我们不知道是谁从哪里通过什么样的方式进行的回调。

在 subscriber 的实现里，能看到当前已经 ready 的 state 值：

ngrx-store.js 在这里将 state 片段的 carts 传入 map 回调函数里：

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus 读取 Cart 的原理分析相关推荐

SAP Spartacus NgExpressEngineDecorator 的工作原理
首先看这个 class 的 get 定义: 接收两个输入参数,类型为: NgExpressEngine SsrOptimizationOptions 返回一个包装后的 NgExpressEngine ...
SAP Spartacus读取User Address的action是如何被Effect接收的
入口是shipping-address.component.ts的ngOnInit hook: 读取当前user ID后,将id传入回调函数,在回调函数里dispatch一个UserActions.L ...
SAP Spartacus读取User Address的请求发送和接收源头
先看请求响应的接收源头: 文件:projects\core\src\user\store\effects\user-addresses.effect.ts 接收应用程序发送过来的UserActions ...
SAP Spartacus取cart的HTTP请求
取cart的url:https://spartacus-dev0.eastus.cloudapp.azure.com:9002/occ/v2/electronics-spa/users/anonymo ...
SAP Spartacus 读取payment detail数据的API
url:https://spartacus-dev0.eastus.cloudapp.azure.com:9002/occ/v2/electronics-spa/users/current/payme ...
SAP Hybris install.bat工作原理分析
以Windows平台为例,install.bat的内容: @echo off SET INSTALLER_WORKING_DIR=%~dp0 javac %INSTALLER_WORKING_DIR: ...
SAP Spartacus 的 CSS 架构
在 Angular 中,组件的 CSS 样式被封装进了自己的视图中,而不会影响到应用程序的其它部分. 通过在组件的元数据上设置视图封装模式,你可以分别控制每个组件的封装模式. 可选的封装模式一共有如下 ...
SAP UI5 应用的 OData 元数据请求响应的解析原理分析
前一篇文章 SAP UI5 应用的 OData 元数据请求的发送原理分析我们学习了 SAP UI5 应用是如何自动发送 OData 元数据的 HTTP 请求. 本文继续学习该元数据请求的响应到达客户端 ...
SAP Spartacus自定义指令cxOutlet的工作原理
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...

SAP Spartacus 读取 Cart 的原理分析

SAP Spartacus 读取 Cart 的原理分析相关推荐

最新文章

热门文章