关于rxjs:RxJs-操作符-withLatestFrom-在-SAP-电商云-Spartacus-UI-中的应用

42次阅读

共计 1825 个字符，预计需要花费 5 分钟才能阅读完成。

看上面这段代码：

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 的原创文章，尽在：” 汪子熙 ”:

正文完