NgRx: выберите несколько свойств - PullRequest
Новая
       9

NgRx: выберите несколько свойств

0 голосов
/ 18 декабря 2018

У меня есть объект, который сохраняется в магазине, и я хочу подписаться на прослушивание некоторых свойств.

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

Мое намерение состоит в том, чтобы использовать два свойства для проверки правильности загрузки данных и другие свойства для заполнения переменных компонента и рендеринга компонента,

Я написал это, но не работает, так как он слушает изменения всего магазина, а не выбранные свойства.

this.isLoading = true;
this.inicioSubs = this.store
.pipe(
  select(state => {
    return {
      temas: state.multimedia.multimedia.temas,
      series: state.multimedia.multimedia.series,
      lastSerie: state.multimedia.multimedia.lastSerie,
      lastTwoYearsSeries: state.multimedia.multimedia.lastTwoYearsSeries,
      lastTwoYearsTemas: state.multimedia.multimedia.lastTwoYearsTemas,
      loaded: state.multimedia.loaded,
      loading: state.multimedia.loading
    };
  }),
  filter(multimedia => multimedia.loaded && !multimedia.loading)
)
.subscribe(state => {
  this.multimedia = {
    temas: state.temas,
    series: state.series,
    lastSerie: state.lastSerie,
    lastTwoYearsSeries: state.lastTwoYearsSeries,
    lastTwoYearsTemas: state.lastTwoYearsTemas
  };

  this.isLoading = false;
});

1 Ответ

0 голосов
/ 18 декабря 2018

Вы можете написать селекторы следующим образом: 

export const getMultimedia = (state: AppState) => state.multimedia;
export const getMultimedia = createSelector(
    getMultimediaState,
    multimediaState => multimedia.loading
  );

Или, если вы инициализируете с корневым состоянием, как это 

StoreModule.forFeature('multimedia', reducers);

Тогда ваш файл multimedia.selectors.ts должен выглядеть следующим образомthis: 

  export const getMultimediaState createFeatureSelector<MultimediaState>('multimedia');

  export const getMultimedia = createSelector(
    getMultimediaState,
    multimediaState => multimedia.loading
  );

  export const getLoadedMultimedia = createSelector(
    getMultimediaState,
    multimediaState => multimediaState.filter(
      multimedia => multimedia.loaded && !multimedia.loading)
    );

С помощью createFeatureSelector вы можете вернуть состояние элемента верхнего уровня.

Затем в файле вашего компонента подпишитесь на селектор, как это: 

   public loadedMultimedia$;
   public isMultimediaLoading$;

   constructor(store) {
     this.loadedMultimedia$ = store.pipe(select(getLoadedMultimedia));
     this.isMultimediaLoading$ = store.pipe(select(getMultimediaLoadingStatus));
   }
...