NGRX Effects how to pass parameter to withLatestFrom operator

You can now use the contactLatestFrom to handle this.

Replace:

withLatestFrom(this.store.pipe(select(fromLocalSubservices.getSearchParams(globalSubServiceId)))),

with:

concatLatestFrom(globalSubServiceId =>
 this.store.pipe(select(fromLocalSubservices.getSearchParams(globalSubServiceId)))

https://v11.ngrx.io/api/effects/concatLatestFrom


I think I have the recipe you (or future wanderers) are looking for. You have to map the initial payload (of operator below) to an inner observable so that it can be piped and passed as a param to withLatestFrom. Then mergeMap will flatten it and you can return it to the next operator as one array with the initial payload as the first value.

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))

You should be able to use an arrow function.

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)))
      )
    )
  );     

Tags:

Angular

Rxjs

Ngrx