NGRX 影响如何将参数传递给 withLatestFrom 运算符答案

【问题标题】：NGRX Effects how to pass parameter to withLatestFrom operatorNGRX 影响如何将参数传递给 withLatestFrom 运算符
【发布时间】：2018-10-02 13:49:32
【问题描述】：

当使用 withLatestFrom 时，我正在努力将参数传递给选择器，它是之前从加载操作有效负载映射的

loadLocalSubServices$: Observable<Action> = this.actions$.pipe(
  ofType(LocalSubServiceTemplateActions.LocalSubServicesTemplateActionTypes.LoadLocalSubService),
  map((action: LocalSubServiceTemplateActions.LoadLocalSubService) => action.payload.globalSubServiceId),
  // and below I would like to pass globalSubServiceId
  withLatestFrom(this.store.pipe(select(fromLocalSubservices.getSearchParams(globalSubServiceId)))),
  map(searchParams => searchParams[1]),
  mergeMap((params) =>
    this.subServiceService.getLocalSubServices(params).pipe(
      map(localSubServices => (new LocalSubServiceTemplateActions.LocalSubServiceLoadSuccess(localSubServices))),
      catchError(err => of(new LocalSubServiceTemplateActions.LocalSubServiceLoadFail(err)))
    )
  )
);

【问题讨论】：

这是非常混乱的描述。什么有效/无效？

标签： angular rxjs ngrx

【解决方案1】：

我想我有你（或未来的流浪者）正在寻找的食谱。您必须将初始有效负载（下面的of 运算符）映射到内部可观察对象，以便可以通过管道将其作为参数传递给withLatestFrom。然后mergeMap 会将其展平，您可以将其作为一个数组返回给下一个运算符，其中初始有效负载作为第一个值。

map(action => action.payload),
mergeMap((id) =>
    of(id).pipe(
        withLatestFrom(
            this.store.pipe(select(state => getEntityById(state, id))),
            this.store.pipe(select(state => getWhateverElse(state)))
        )
    ),
    (id, latestStoreData) => latestStoreData
),
switchMap(([id, entity, whateverElse]) => callService(entity))

【讨论】：

嗨，我想你在 id 之前错过了一个 '('
@Preda70R 你能解释一下mergeMap然后switchMap的用法吗？
@obl mergeMap 同时激活所有内部的 observable，然后发送到 switchMap，它会关闭它订阅的 observable。 MergeMap 没有终止开关。
这种形式的mergeMap好像已经被弃用了
@itwasmattgregg 这是什么新版本？

【解决方案2】：

你应该可以使用箭头函数。

loadLocalSubServices$: Observable<Action> = this.actions$.pipe(
    ofType(LocalSubServiceTemplateActions.LocalSubServicesTemplateActionTypes.LoadLocalSubService),
    map((action: LocalSubServiceTemplateActions.LoadLocalSubService) => action.payload.globalSubServiceId),
    (globalSubServiceId) => {
        return withLatestFrom(this.store.pipe(select(fromLocalSubservices.getSearchParams(globalSubServiceId))));
    },
    map(searchParams => searchParams[1]),
    mergeMap((params) =>
      this.subServiceService.getLocalSubServices(params).pipe(
        map(localSubServices => (new LocalSubServiceTemplateActions.LocalSubServiceLoadSuccess(localSubServices))),
        catchError(err => of(new LocalSubServiceTemplateActions.LocalSubServiceLoadFail(err)))
      )
    )
  );

【讨论】：