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