Ngrx效果:有条件地返回switchMap内部的操作，而不是http响应

Question

我目前正在开发一个Angular 5应用程序，它将通过ngrx-store使用一些缓存策略，允许用户查看项目并返回到主列表，而不必再次发出请求。

我正在使用一个效果来请求数据，并使用一个reducer根据我的htp响应来更新我的全局状态。正如您所看到的，如果成功，则触发RequestPartnersSuccess操作；如果发生错误，则触发RequestPartnersFail。

来自我的全局状态的属性'internalAppDynamic.searchPartners.recoverLatest‘指示我是否应该从缓存中恢复我的列表，在这种情况下，效果应该在这个' if’语句中返回一个方法，并结束我的流。

@Effect()
  loadPartners$ = this.actions$
    .ofType(SearchPartnersActions.REQUEST_PARTNERS)
    .withLatestFrom(this.store$, (action, state) => {
      action = Object.assign(action, {recoverLatest: state.internalAppDynamic.searchPartners.recoverLatest})
      return action
    })
    .pipe(switchMap((action: any) => {
      if (action.recoverLatest) {
        return new SearchPartnersActions.RequestPartnersRecoverCache()
      }
      return this.internalPartnersService.getPartners(action.payload).pipe(
        map(partners => new SearchPartnersActions.RequestPartnersSuccess(partners)),
        catchError(error => of(new SearchPartnersActions.RequestPartnersFail(error)))
      )
    }))

这是我的服务中的getPartners()函数：

getPartners (body): Observable<any> {
    return this.http
    .post(this._baseUrl + 'internal-app/get-partners', body, this.httpOptions)
    .pipe(catchError((error: any) => this.errorHandler(error)))
  }

问题是我找不到实现这个结果的方法。我刚接触SearchPartnersActions.RequestPartnersRecoverCache()和Observables，我认为switchMap操作符需要的是另一种类型的返回，而不是我的rxjs类的一个新实例。

我该怎么做才能达到预期的效果呢？有没有人能更好地向我解释一下，从这一系列可观察到的数据中能得到什么？

谢谢!

Answer 1

我能够通过创建一个辅助的可观察对象来实现所需的行为，以便能够在流中传递我的操作，如下所示：

  auxObservable () {
    return Observable.create((observer) => {
      observer.next()
    })
  }

  @Effect()
  loadPartners$ = this.actions$
    .ofType(SearchPartnersActions.REQUEST_PARTNERS)
    .withLatestFrom(this.store$, (action, state) => {
      action = Object.assign(action, {recoverLatest: state.internalAppDynamic.searchPartners.recoverLatest})
      return action
    })
    .pipe(switchMap((action: any) => {
      if (action.recoverLatest) {
        return this.auxObservable().pipe(
          map(res => new SearchPartnersActions.RequestPartnersRecoverCache())
        )
      }
      return this.internalPartnersService.getPartners(action.payload).pipe(
        map(partners => new SearchPartnersActions.RequestPartnersSuccess(partners)),
        catchError(error => of(new SearchPartnersActions.RequestPartnersFail(error)))
      )
    }))

如果您需要在流内传递操作对象以使用它的类型或有效负载进行其他操作，则应将其作为auxObservable参数传递，如下所示：

  auxObservable (action) {
    return Observable.create((observer) => {
      observer.next(action)
    })
  }

  @Effect()
  loadPartners$ = this.actions$
    .ofType(SearchPartnersActions.REQUEST_PARTNERS)
    .withLatestFrom(this.store$, (action, state) => {
      action = Object.assign(action, {recoverLatest: state.internalAppDynamic.searchPartners.recoverLatest})
      return action
    })
    .pipe(switchMap((action: any) => {
      if (action.recoverLatest) {
        return this.auxObservable(action).pipe(
          map(res => new SearchPartnersActions.RequestPartnersRecoverCache())
        )
      }
      return this.internalPartnersService.getPartners(action.payload).pipe(
        map(partners => new SearchPartnersActions.RequestPartnersSuccess(partners)),
        catchError(error => of(new SearchPartnersActions.RequestPartnersFail(error)))
      )
    }))

我认为将来可能会有人需要这项技术，所以我将分享我的解决方案=)

如果有人能想出一种更好的方法来拦截满足条件的默认流行为，并触发不同的reducer情况，请与我们分享！

更新：

正如Alexander指出的，auxObservable不是必需的，并且可以只返回(New rxjs )，确保您从rxjs导入了'of‘运算符。

谢谢!