在 ngrx 效果中使用 rxjs 链接的异步问题

Question

@Effect({ dispatch: false })
public setJwtDataParcoursPage = this.actions$.pipe(
  ofType(INIT_FORM_SUCCESS_ACTION),
  map((action: InitFormSuccessAction) => action.payload),
  withLatestFrom(this.store.select(this._apiHeadersSelector.getJwt) as Observable<string>),
  switchMap(([payload, jwt]: [InitResponse, string]) => {
    const params = { jwt, userId: payload.jwt.user.id }
    return forkJoin([
      of(payload),
      iif(
        () => payload.subscriptionManagement,
        this.subscriptionService.getSubscriptionInfo(params).pipe(map(subscription => subscription.body)),
        of(null)
      )
    ])
  }),
  map(([payload, subscriptionData]) => {
    const subscriptionStatus = this.getValue(subscriptionData?.status, payload.jwt.env.subscriptionManagement);
    this._analyticsService.updateParcoursVars(payload, subscriptionStatus, "parcours", "form");
    this.store.dispatch(new GetSubscriptionInfoSuccessAction(subscriptionData))
  }),
  catchError(_ => {
    ...
    return of([])
  })
);

我还有其他任务发生在//中。

当

payload.subscriptionManagement

=

false

一切都按我的预期进行。我的意思是链接不会被其他任务打断 // 。

但是当

payload.subscriptionManagement

=

true

时，代码不会立即到达最后

map(([payload, subscriptionData]) => {.. 

稍后再回到这部分。

我的问题如何编辑此代码以保持链接不间断？

更新我已经尝试过这种方式：

@Effect({ dispatch: false })
public setJwtDataParcoursPage = this.actions$.pipe(
  ofType(INIT_FORM_SUCCESS_ACTION),
  map((action: InitFormSuccessAction) => action.payload),
  withLatestFrom(this.store.select(this._apiHeadersSelector.getJwt) as Observable<string>),
  switchMap(([payload, jwt]: [InitResponse, string]) => {
    const params = { jwt, userId: payload.jwt.user.id }
    return forkJoin([
      of(payload),
      iif(
        () => payload.jwt.env.subscriptionManagement,
        of(this.subscriptionService.getSubscriptionInfo(params)),
        of(null)
      )
    ])
  }),
  map(([payload, subscriptionData]) => {
    subscriptionData.subscribe(subscription => {

      const subscriptionStatus = this.getValue(subscription?.body.status, payload.jwt.env.subscriptionManagement);
      this._analyticsService.updateParcoursVars(payload, subscriptionStatus, "parcours", "form");
      this.store.dispatch(new GetSubscriptionInfoSuccessAction(subscription.body))
    })
}),

现在当

payload.subscriptionManagement

=

true

我进入

 map(([payload, subscriptionData]) => {

但效果会在

subscribe

时中断

Answer 1

我认为你可能把这个问题过于复杂化了。我认为您并不真正需要

forkJoin

。另外，我建议不要在

switchMap

之后进行映射，只需使用要切换到的可观察对象的

tap

即可。无需使用

map

，因为您并非在每种情况下都从效果中调度。下面的示例可能并不完美，但它应该可以帮助您朝着正确的方向前进。

@Effect({ dispatch: false })
public setJwtDataParcoursPage = this.actions$.pipe(
  ofType(INIT_FORM_SUCCESS_ACTION),
  map((action: InitFormSuccessAction) => action.payload),
  concatLatestFrom() => (this.store.select(this._apiHeadersSelector.getJwt) as Observable<string>), 
  switchMap(([payload, jwt]: [InitResponse, string]) => {
    const params = { jwt, userId: payload.jwt.user.id }

    if (!payload.subscriptionManagement) {
      const subscriptionStatus = this.getValue(null, payload.jwt.env.subscriptionManagement);
      this._analyticsService.updateParcoursVars(payload, subscriptionStatus, "parcours", "form");
      return;
    }
    return this.subscriptionService.getSubscriptionInfo(params).pipe(
      map(subscription => subscription.body),
      tap((subscriptionData) => {
        const subscriptionStatus = this.getValue(subscriptionData?.body.status, payload.jwt.env.subscriptionManagement);
        this._analyticsService.updateParcoursVars(payload, subscriptionStatus, "parcours", "form");
        this.store.dispatch(new GetSubscriptionInfoSuccessAction(subscriptionData?.body))
      })
    );
  }),
  catchError(_ => {
    ...
    return EMPTY
  })
);

此外，您应该使用

concatLatestFrom

。也建议现在使用

createEffect

。