SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第1张图片

loading 从 true 变为 false:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第2张图片

单从这个 initiator 栏,是很难找到是哪一行应用代码,发起的这个 cart 加载:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第3张图片

根据 [Cart] Load Cart 关键字搜索是能找到的:

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第4张图片

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第5张图片

最后找到了准确的代码行数,调用 CartConnector 去读取数据:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第6张图片

首先查看针对这个 cart,是否存在 pending 请求:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第7张图片

使用 withLatestFrom 操作符,查看这个 cart 是否有 PendingProcesses

 withLatestFrom(
              this.store.pipe(
                select(
                  getCartHasPendingProcessesSelectorFactory(payload.cartId)
                )
              )
            )

这里使用 withLatestFrom,从另一个 Observable 里进行数据查询。

下面这段代码组合了两个按照不同时间间隔,分别发射递增整数序列的 Observable:

// RxJS v6+
import { withLatestFrom, map } from 'rxjs/operators';
import { interval } from 'rxjs';

//emit every 5s
const source = interval(5000);
//emit every 1s
const secondSource = interval(1000);
const example = source.pipe(
  withLatestFrom(secondSource),
  map(([first, second]) => {
    return `First Source (5s): ${first} Second Source (1s): ${second}`;
  })
);
/*
  "First Source (5s): 0 Second Source (1s): 4"
  "First Source (5s): 1 Second Source (1s): 9"
  "First Source (5s): 2 Second Source (1s): 14"
  ...
*/
const subscribe = example.subscribe(val => console.log(val));

因为 host Observable 的时间间隔为 5 秒,所以每个5秒钟,console 面板新增一条输出,且 host Observable 的递增值为 5,但此时因为使用 withLatestFrom 操作符传入的输入 Observable 的时间间隔为 1 秒,因此每个 5 秒过去后,second Observable 的递增序列为 5:

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第8张图片

如果有,就不继续进行下去了,通过 filter 操作符阻止进一步执行。

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第9张图片

能进行到代码 60 行,说明此时没有 pendingProcess 施加在 Cart 上。

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第10张图片

ActiveCartServicei 依赖到 MultiCartService:

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第11张图片

isStableSelector 里加上打印语句:

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第12张图片

会频繁触发:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第13张图片

比如下面这个调用会触发:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第14张图片

此处加载当前 user 的 cart:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第15张图片

为什么会触发下面这段代码?因为 Spartacus 有大量 createSelect 的调用:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第16张图片

如下图所示:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第17张图片

createSelector 的输入参数由一个 Selector 和 projector 组成。

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第18张图片

createSelector 支持数量可变的参数,前 n - 1 个参数都被当成 selector 处理,最后一个参数为 projector:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第19张图片

下图 getCartIsStableSelectorFactory 实现体的第 58 行代码为什么会被调用?

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第20张图片

是因为 MultiCartService 的 isStable 方法在 Cart Load 场景里被调用?

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第21张图片

确实如此:
SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true_第22张图片

所以每一次可能引起 isStable 返回值发生变化的时候,getCartIsStableSelectorFactory 里的 projector 都会被调用,重新计算 isStable 的最新值。

你可能感兴趣的:(SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true)