NgRx：选择多个属性答案

【问题标题】：NgRx: Select multiple propertiesNgRx：选择多个属性
【发布时间】：2018-12-18 12:25:58
【问题描述】：

我有一个保存在商店里的对象，我想订阅监听一些属性。

我正在使用NgRx 6.1.2，但我有很多关于如何监听某些状态属性的变化的问题，包括 nested 属性。

我的意图是使用两个属性来验证加载数据是否已完成，并使用其他属性来填充组件变量并渲染组件，

我写了这个，但没有用，因为它监听整个商店的变化而不是选定的属性。

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

【问题讨论】：

标签： angular redux ngrx

【解决方案1】：

你可以这样写选择器：

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

或者如果您使用这样的根状态进行初始化

StoreModule.forFeature('multimedia', reducers);

那么您的 media.selectors.ts 文件应该如下所示：

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

【讨论】：