I have a selector with props (of type MemoizedSelectorWithProps). I'd like to use it in an effect inside WithLatestFrom. The thing is - the parameter for the selector (the props) is ing from the action payload. And I can't make the withLatestFrom access the action payload.

I'm using angular 7 (and naturally ngrx7). I've tried using a map to somehow create a new observable, but nothing is working...

these are some demo lines I've wrote here, to simplify my use case:

action:

export const GET_INVENTORY = '[App] Get Inventory';

export class GetInventory implements Action {
  readonly type = GET_INVENTORY;
  constructor (public branchId: number) {} 
}

effect:

@Effect()
getInventory$ = this.actions$.pipe(
  ofType(GET_INVENTORY)
  withLatestFrom(this.store$.pipe(select(getIsStoreInventoryLoaded, {branchId: action.branchId}))), // this is not working obviously, since action is unknown
  switchMap([action, loaded]: [GetInventory, boolean] => {
  if (loaded) {
    console.log('already loaded inventory for this branch', action.branchId);
  } else {
    console.log('never loaded inventory for this branch', action.branchId);
  }
}

although this is a simplified version of my code, the design is kinda similar in my real project - I have a store with keys per "branch" inventory. say I'm a chain of supermarkets and each branch has it's own inventory page with lots of data and I want to not-fetch again if I already fetched. So if you have a different approach then working with MemoizedSelectorWithProps - feel free to suggest that too.

I have a selector with props (of type MemoizedSelectorWithProps). I'd like to use it in an effect inside WithLatestFrom. The thing is - the parameter for the selector (the props) is ing from the action payload. And I can't make the withLatestFrom access the action payload.

I'm using angular 7 (and naturally ngrx7). I've tried using a map to somehow create a new observable, but nothing is working...

these are some demo lines I've wrote here, to simplify my use case:

action:

export const GET_INVENTORY = '[App] Get Inventory';

export class GetInventory implements Action {
  readonly type = GET_INVENTORY;
  constructor (public branchId: number) {} 
}

effect:

@Effect()
getInventory$ = this.actions$.pipe(
  ofType(GET_INVENTORY)
  withLatestFrom(this.store$.pipe(select(getIsStoreInventoryLoaded, {branchId: action.branchId}))), // this is not working obviously, since action is unknown
  switchMap([action, loaded]: [GetInventory, boolean] => {
  if (loaded) {
    console.log('already loaded inventory for this branch', action.branchId);
  } else {
    console.log('never loaded inventory for this branch', action.branchId);
  }
}

although this is a simplified version of my code, the design is kinda similar in my real project - I have a store with keys per "branch" inventory. say I'm a chain of supermarkets and each branch has it's own inventory page with lots of data and I want to not-fetch again if I already fetched. So if you have a different approach then working with MemoizedSelectorWithProps - feel free to suggest that too.

• javascript
• angular
• typescript
• rxjs
• ngrx

• Possible duplicate of NGRX Effects how to pass parameter to withLatestFrom operator – voll Commented Aug 20, 2019 at 21:03
• Can you show your selector – Tony Commented Aug 21, 2019 at 4:49

1 Answer 1

A simple switchMap or a mergeMap with a bineLatest should do the trick.

For example:

@Effect()
getInventory$ = this.actions$.pipe(
  ofType(GET_INVENTORY),
  mergeMap(action =>
    bineLatest(
      of(action),
      this.store$.pipe(select(getIsStoreInventoryLoaded, {branchId: action.branchId}))
    )
  ),
  tap(([action, loaded]) => {
    // The rest of your code...
  })
)