CODEWITHSUNDEEP
angularrxjsngrx
Jake11
Jake11

Reputation: 831

NGRX Effects how to pass parameter to withLatestFrom operator

I am struggling with passing parameter to selector when by using withLatestFrom, which was mapped earlier from load action payload 

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

Upvotes: 15

Views: 15668

Answers (3)

wlf
wlf

Reputation: 3393

You can now use the concatLatestFrom 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

Upvotes: 5

Juan M. Medina
Juan M. Medina

Reputation: 638

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

Upvotes: 5

Preda70R
Preda70R

Reputation: 988

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

Upvotes: 33

Related Questions