2

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.

3
  • It depends on what behavior you want to get
    – martin
    Feb 4, 2020 at 14:28
  • I would like to call 2 selectors check if one of them is null - should be - if yes, dispatch action.
    – profiler
    Feb 4, 2020 at 14:30
  • Never do that. Use a selector to combine your data.
    – maxime1992
    Feb 4, 2020 at 15:29

3 Answers 3

1

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
})
3
  • Can I check value from selectValue1 before dispatch action in subscriber? I would like dispatch new action only when got value (I would like to check that value) from select1....
    – profiler
    Feb 4, 2020 at 15:01
  • 1
    So you don't want to be using selectValue2 at all?
    – martin
    Feb 4, 2020 at 15:14
  • In main component I called dispatch action, which one fetching data to store. Select value1 is a boolean which one is false - when fetching data from dispatch action was stopped or true - during fetching that data. I would like combine multiple selectors - but only when fetching data is false. Now - in combineLatest - two selector starting at the same moment. And always I got undefined.
    – profiler
    Feb 4, 2020 at 20:28
1
ngOnInit() {
    combineLatest(
        this.store$.pipe(select(selectValue1)),
        this.store$.pipe(select(selectValue2))
    ).subscribe(console.log);
}

Edit:

ngOnInit() {
    combineLatest(
        this.store$.pipe(select(selectValue1)),
        this.store$.pipe(select(selectValue2))
    ).pipe(tap(console.log))
        .subscribe()
}
4
  • But if I would like to use pipe with another operators? Or using map? Before subscribe I can put pipe and add another parameters?
    – profiler
    Feb 4, 2020 at 14:29
  • Thank You. I can't put pipe or subscribe in that place. Have the error - TS2339: Property 'pipe' does not exist on type 'OperatorFunction<{}, [{}, string, string[]]>'
    – profiler
    Feb 4, 2020 at 14:33
  • 1
    Oh, I thought it said combineLatest instead. withLatestFrom is a pipeable operator, you probably want combineLatest. Feb 4, 2020 at 14:39
  • Use selectors instead of combining data through observables
    – maxime1992
    Feb 5, 2020 at 14:11
0

Why not keeping it simple, and combine selectors with createSelector? This will also lead to lesser change detections.

export const selectValueOneAndTwo = createSelector(
  selectValue1, 
  selectValue2,
  (one, two) => one + two
)
ngOnInit() {
    selector$ = this.store$.pipe(select(selectValueOneAndTwo));
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.