首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >NgRx:选择多个属性

NgRx:选择多个属性
EN

Stack Overflow用户
提问于 2018-12-18 02:10:48
回答 1查看 3.3K关注 0票数 1

我有一个保存在商店中的对象,我想订阅一些属性。

我正在使用NgRx 6.1.2,但是我有很多关于如何倾听某些状态属性(包括嵌套属性)的变化的问题。

我的意图是使用两个属性来验证加载数据是否完成,而其他属性用于填充组件变量和呈现组件,

我写了这个,但没有工作,因为它监听整个商店的变化,而不是选择的属性。

代码语言:javascript
代码运行次数:0
运行
复制
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;
});
EN

回答 1

Stack Overflow用户

发布于 2018-12-18 04:09:18

您可以这样编写选择器:

代码语言:javascript
代码运行次数:0
运行
复制
export const getMultimedia = (state: AppState) => state.multimedia;
export const getMultimedia = createSelector(
    getMultimediaState,
    multimediaState => multimedia.loading
  );

或者,如果您正在使用根状态初始化,如下所示

代码语言:javascript
代码运行次数:0
运行
复制
StoreModule.forFeature('multimedia', reducers);

那么您的multimedia.selectors.ts文件应该如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
  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,您可以返回顶级特性状态。

然后,在组件文件中订阅选择器,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
   public loadedMultimedia$;
   public isMultimediaLoading$;

   constructor(store) {
     this.loadedMultimedia$ = store.pipe(select(getLoadedMultimedia));
     this.isMultimediaLoading$ = store.pipe(select(getMultimediaLoadingStatus));
   }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53825476

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档