How to combine angular ngrx multiple select in single call

Question

How I can combine both select in single function. I have tried few method eg: combineLatest and it's not calling Other stackoverflow disccusion. Is there any way I can both in sigle function?

constructor(private store: Store<fromStore.AppState>) {}

ngOnInit(): void {
  this.store
    .select("userInfo", "user")
    .pipe(takeUntil(this._unsubscribeAll))
    .subscribe((userInfo) => {
      console.log(userInfo);
    });

  this.store
    .select("cart")
    .pipe(takeUntil(this._unsubscribeAll))
    .subscribe((detail) => {
      console.log(detail);
    });
}

Answer 1

Use selectors, then create a selector based on the user selector and cart selector.

• https://brandonroberts.dev/blog/posts/2020-12-14-maximizing-simplifying-component-views-ngrx-selectors/
• https://timdeschryver.dev/blog/solving-angular-slow-renders-with-ngrx-selectors
• https://timdeschryver.dev/blog/sharing-data-between-modules-is-peanuts

Answer 2

In order to use combineLatest, each observable must emit at least one value. If you are not sure whether some observables emit or not, you can use startWith operator to guarantee that the observables emit first value. Whenever one of the observables inside combineLatest emits new value, it reflects the changes.

this.userInfo$ = this.store
    .select("userInfo", "user")
    .pipe(startWith(null),takeUntil(this._unsubscribeAll));
    

  this.detail = this.store
    .select("cart")
    .pipe(startWith(null),takeUntil(this._unsubscribeAll));
    

    combineLatest([this.userInfo$, this.detail$]).subscribe(([userInfo,detail])=>{...});

Answer 3

You can combineLatest with an startWithoperator since each observable should emit at least one value to execute the subscribe.

ngOnInit(): void {
  const userInfo$ = this.store.select("userInfo", "user")
                        .pipe(
                          startWith(null),
                          takeUntil(this._unsubscribeAll)
                         );
    
  const cart$ = this.store.select("cart")
                    .pipe(
                      startWith(null),
                      takeUntil(this._unsubscribeAll)
                     );

  combineLatest([userInfo$, cart$])
    .subscribe(([userInfo, cart])=>{ consolse.log(userInfo, cart)});        
}

Answer 4

Finally I did this way:

let user$: Observable<any> = null;
let detail$: Observable<any> = null;

user$ = this.store.select('userInfo', 'user');
detail$ = this.store.select('cart');

combineLatest([user$, onboardingId$])
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe((responses) => {.....}

Answer 5

i hope it work

combineLatest([
            this._store.select(selectIsLoaded),
            this._store.select(selectDeptIsLoaded)])
            .pipe(
                untilDestroyed(this),
                filter(([compIsloaded, deptIsLoaded]) => compIsloaded && deptIsLoaded),
                withLatestFrom(
                    this._store.select(selectCompanies),
                    this._store.select(selectDepartments1),
                    this._store.select(selectDepartments2),
                    this._store.select(selectDepartments3),
                ),
                tap(([_, companies, departments_1, departments_2, departments_3]) => {
                    this.mapStructure({
                        companies,
                        departments_1,
                        departments_2,
                        departments_3,
                    })
                })
            ).subscribe();