SAP Spartacus Unit List树形数据的加载触发

数据加载的url：

https://spartacus-dev0.eastus.cloudapp.azure.com:9002/occ/v2/powertools-spa/users/current/orgUnitsRootNodeTree?lang=en&curr=USD

第三行触发listData$的读取：

pipeInstance.transform的输入参数是一个Observable：

this.service.hasGhostData

从上图Observable对象的属性里能找到该Observable的生成逻辑：

async pipe的transform方法实现：

Async pipe的transform方法就是简单的调用subscribe方法：

action类型：[B2BUnitNode] Load Tree

最后在org-unit.effect.ts里发起org unit数据的读取请求：

@Effect()
  loadTree$: Observable<
    OrgUnitActions.LoadTreeSuccess | OrgUnitActions.LoadTreeFail
  > = this.actions$.pipe(
    ofType(OrgUnitActions.LOAD_UNIT_TREE),
    map((action: OrgUnitActions.LoadOrgUnit) => action.payload),
    switchMap(({ userId }) => {
      return this.orgUnitConnector.getTree(userId).pipe(
        map(
          (orgUnit: B2BUnitNode) => new OrgUnitActions.LoadTreeSuccess(orgUnit)
        ),
        catchError((error: HttpErrorResponse) =>
          of(
            new OrgUnitActions.LoadTreeFail({
              error: normalizeHttpError(error),
            })
          )
        )
      );
    })
  );

加了注解@Effect()的实现，相当于一个桥梁的作用，用ofType表明接收何种类型的Actions，调用map将action payload里包含的输入参数提取出来，使用switchMap根据输入参数进行耗时间的网络请求，最后将网络请求获取的结果再通过map操作符，构造一个LoadTreeSuccess的action payload:

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