Search code examples
angularrxjsngrxngrx-store

Angular, NgRx how to use RxJS operator in ngOnInit


I have a small problem to understand combine RxJS operators with NgRx. Below I have a simple component with NgRx store - there I have all necessary data and the selectors are working properly:

export class TestComponent implements OnInit {

    selector1$: Observable<any>;
    selector2$: Observable<any>;

    constructor(private store$: Store<StoreModel>) {
    }

    ngOnInit() {
        selector1$ = this.store$.pipe(select(selectValue1));
        selector2$ = this.store$.pipe(select(selectValue1));
    }

}

But - I would like to using RxJS operators - for example using withLatestFrom and calling there 2 selectors - where I should start .pipe?

I.

ngOnInit() {
    pipe(
        withLatestFrom(
            this.store$.pipe(select(selectValue1));
            this.store$.pipe(select(selectValue2));
        ),
        map(([respValue1, respValue2]) => {}
}

II. Or by this.store$:

this.store$.pipe(
    withLatestFrom(
        this.store$.pipe(select(selectValue1));
        this.store$.pipe(select(selectValue2));
    ),
    map(([respValue1, respValue2]) => {}
}

III. or like I./II. but using arrow?

this.store$.pipe(combineLatest(
    this.store$.pipe(select(selectValue1)),
    this.store$.pipe(select(selectValue2)),
    (respValue1, respValue2) => {
        return `${respValue1} + ${respValue2}`})).subscribe(console.log);
        

All of the solutions are not working. I should create new observable value for calling RxJS operators? Or what is the best solution for that case.

Thank you in advance.


Solution

  • withLatestFrom() is not an "Observable creation method" so you'll probably want to use combineLatest() instead (also, withLatestFrom() works differently than combineLatest()).

    combineLatest([
      this.store$.pipe(select(selectValue1)),
      this.store$.pipe(select(selectValue1)),
    ]).subscribe(([result1, result2]) => {
      // do whatever you want here
    })