NgRx Dynami c Переключатель регистр поведения параметризованный селектор - PullRequest
Новая
       23

NgRx Dynami c Переключатель регистр поведения параметризованный селектор

0 голосов
/ 02 марта 2020

У меня есть компонент, в котором я получаю несколько данных из разных состояний NgRx. Я не очень хорошо разбираюсь в Rx JS, и я борюсь с упорядочением потока данных.

Приведенный ниже код запускается при инициализации компонента: 

// UI related display context
this.displayContextId$ = this.store.select(selectCurrentDisplayContextId);
this.displayContextId$.subscribe();

// Data related to this component's parent
this.currentItem$ = this.store.select(selectCurrentItem);

// Some data from the state
this.featureAData$ = this.store.select(featureADataByItemId(this.subItem.id));
this.featureBData$ = this.store.select(selectfeatureBDataByItemId(this.subItem.id));

this.featureBData$.subscribe();

// Some data that needs featureAData to be fetched
this.featureCData$ = this.featureAData$.pipe(
    mergeMap(featureA => this.store.select(selectSomeDataById(featureA.someId)))
);

this.featureCData$.subscribe();

Псевдокод описывает суть того, чего я пытаюсь достичь и в настоящее время не работает: 

// When displayContextId changes, select one specific item from the store which is identified by an id issued of the concatenation of other ids (from the data model specs)

this.displayContextId$.pipe(
).subscribe(displayContextId => {
    switch (displayContextId) {
        case DisplayContexts.TypeA:
            this.displayContextItem$ = this.featureAData$.pipe(
                mergeMap(featureA => this.store.select(selectDisplayContextItemById(displayContextId + '-' + featureA.someId)))
            );
            break;
        case DisplayContexts.TypeB:
            console.log(d);
            this.displayContextItem$ = this.featureCData$.pipe(
                mergeMap(featureC => this.store.select(selectDisplayContextItemItemById(displayContextId + '-' + featureC.someId)))
            );
            break;
    }
});

this.displayContextItem$.subscribe();

Я прекрасно понимаю, что это не Rx JS способ сделать это. Моя цель состоит в том, чтобы динамически повторно выбирать данные из хранилища на основе различных источников ввода, которые развиваются в течение жизненного цикла компонента.

Кроме того, я не знаю, где поместить это в жизненный цикл компонента.

Какая может быть рабочая реализация этого?

Большое спасибо,

1 Ответ

1 голос
/ 02 марта 2020

Попробуйте сделать что-то вроде этого: 

import { switchMap } from 'rxjs/operators
....
this.displayContextItem$ = this.displayContextId$.pipe(
  // take the value of displayContextId and switch to a new observable depending on its value
  switchMap(displayContextId => {
    switch (displayContextId) {
        case DisplayContexts.TypeA:
            return this.featureAData$.pipe(
                mergeMap(featureA => this.store.select(selectDisplayContextItemById(displayContextId + '-' + featureA.someId)))
            );
        case DisplayContexts.TypeB:
            console.log(d);
            return this.featureCData$.pipe(
                mergeMap(featureC => this.store.select(selectDisplayContextItemItemById(displayContextId + '-' + featureC.someId)))
            );
    }
  }),
);
// after you initialized it, you can subscribe to it
this.displayContextItem$.subscribe();
...