Angular, NGRX, как использовать оператор rxjs в ngOnInit

Привет,

У меня есть небольшая проблема, чтобы понять объединить операторы rxjs с ngrx. Ниже у меня есть простой компонент с хранилищем ngrx - там у меня есть все необходимые данные, и селекторы работают правильно:

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

}

Но - я хотел бы использовать операторы rxjs - например, используя withLatestFrom и вызывая там 2 селектора - где я должен начать .pipe?

Я.

ngOnInit() {

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

II . Или этим. Магазином $.

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

III . или как I./II. но стрелкой?

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

            })).subscribe(console.log);

Все решения не работают. Я должен создать новое наблюдаемое значение для вызова операторов RXJS? Или каково лучшее решение для этого случая.

Заранее спасибо.

2
profiler 4 Фев 2020 в 17:25

2 ответа

ngOnInit() {
    combineLatest(
        this.store$.pipe(select(selectValue1)),
        this.store$.pipe(select(selectValue2))
    ).subscribe(console.log);
}

Редактировать:

ngOnInit() {
    combineLatest(
        this.store$.pipe(select(selectValue1)),
        this.store$.pipe(select(selectValue2))
    ).pipe(tap(console.log))
        .subscribe()
}
1
ritaj 4 Фев 2020 в 14:40

Почему бы не сделать это простым и комбинировать селекторы с createSelector? Это также приведет к меньшему количеству обнаруженных изменений.

export const selectValueOneAndTwo = createSelector(
  selectValue1, 
  selectValue2,
  (one, two) => one + two
)
ngOnInit() {
    selector$ = this.store$.pipe(select(selectValueOneAndTwo));
}
0
timdeschryver 4 Фев 2020 в 20:27