Angular/Rxjs run store (ngrx) calls synchronously

Question

I need to perform an action, after retrieving 2 objects from my store (ngrx), so, I need both calls to have responded before performing my action, like this :

const item1$: Observable<Item> = this._store$.select(
  ItemStoreSelectors.selectItemById(this.id1)
);

const item2$: Observable<Item> = this._store$.select(
  ItemStoreSelectors.selectItemById(this.id2)
);

let item1: Item;
item1$.pipe(take(1)).subscribe((item: Item) => {
  item1 = item;
});

let item2: Item;
item2$.pipe(take(1)).subscribe((item: Item) => {
  item2 = item;
});

// here, items might not have been initialized
doSomething(item1, item2);

I tried to look out for a solution in rxjs with switchMap, mergeMap, etc, but couldn't apply it to my needs. I think I found a solution doing async/await, but I'm not sure this is a good practice.

Thanks for your help.

Answer 1

Refactor into the following code :

import { forkJoin } from 'rxjs';

const item1$: Observable<Item> = this._store$.select(
  ItemStoreSelectors.selectItemById(this.id1)
);

const item2$: Observable<Item> = this._store$.select(
  ItemStoreSelectors.selectItemById(this.id2)
);

forkJoin([item1$.pipe(take(1)), item2$.pipe(take(1))])
   .subscribe(([item1,item2])=>doSomething(item1,item2));
  

Answer 2

combineLatest will be triggered every time one of the observable fire, if this is what you want, try this out:

item1$: Observable<Item> = this._store$.select(
  ItemStoreSelectors.selectItemById(this.id1)
);

item2$: Observable<Item> = this._store$.select(
  ItemStoreSelectors.selectItemById(this.id2)
);

result$: Observable<any> = combineLatest(this.item1$, this.item2$, this.doSomething());

Answer 3

Alternatively you could use withLatestFrom in an effect. Something like this

@Effect()
  myAction$ = this.actions$.pipe(
    ofType<MyAction>(MyActionTypes.MyAction),
    withLatestFrom(this.store.select(mySelector)),
    withLatestFrom(this.store.select(myOtherSelector)),
    exhaustMap(([[action, item1], item2]) =>
      this.myService.myRequest(/*...*/)
      .pipe(
        map(myResult => new GetResultSuccess(myResult)),
        catchError(error => of(new GetResultFailure(error))),
      ),
    ),
  );