如何从ngrx中的实体特征中选择扩展状态?

时间:2018-02-24 18:58:49

标签: angular redux ngrx

问题: 此选择器entity.selectAll将不包含扩展状态。

问题:

如何在selectAll中包含我的扩展状态?如何为我选择的状态创建自定义选择器?

我的UxeGallery模型是:

export interface UxeGallery {
  id: string;
  imgSrc: string;
  name: string;
  details?: string;
}

这里我有我的EntityState,我已经添加了一些状态:

export interface State extends EntityState<UxeGallery> {
  selectedItem: string | null;
  hiddenItem: string | null;
  bottombarTemplate: boolean;
  topbarTemplate: boolean;
  topbarTemplateType: string;
  modalTemplate: boolean;
  canvasTemplate: boolean;
  canvasImg: string | null;
}

我创建了适配器:

export const adapter: EntityAdapter<UxeGallery> = createEntityAdapter<UxeGallery>();

设置初始状态:

export const initialState: State = adapter.getInitialState({
  ids: ['0'],
  entities: {
    '0': {
      imgSrc: 'url',
      name: 'dog',
      details: 'some dog',
    }
  },
  selectedItem: null,
  hiddenItem: null,
  topbarTemplateType: TopbarType.WHITE,
  topbarTemplate: false,
  bottombarTemplate: false,
  modalTemplate: false,
  canvasTemplate: false,
  canvasImg: null,
});

创建我的featureSelector:

export const getState = createFeatureSelector<any>('uxeGallery');

导出适配器选择器:

export const {
  selectIds,
  selectEntities,
  selectAll,
  selectTotal,
} = adapter.getSelectors(getState);

从我的应用程序组件中,我从我的实体中选择所有:

import * as fromUxeGallery from '../../reducers/uxe-gallery.reducer';
import { UxeGallery } from '../../uxe-gallery.model';


export class UxeGalleryMasterComponent implements OnInit {
  private obs: Observable<UxeGallery[]>;
  private obsExtended: Observable<any>;

  constructor(private store: Store<fromUxeGallery.State>) { }

  ngOnInit() {
    this.obs = this.store.pipe(select(fromUxeGallery.selectAll));
    this.obs.subscribe(console.log);
    /**
      This will return
      [
        {
          details:"some dog",
          imgSrc:"url",
          name:"dog"
        }
      ]
    */
  }
}

如何制作一个从我的实体模型中获取扩展状态的选择器?

e.g

  selectedItem: null,
  hiddenItem: null,
  topbarTemplateType: TopbarType.WHITE,
  topbarTemplate: false,
  bottombarTemplate: false,
  modalTemplate: false,
  canvasTemplate: false,
  canvasImg: null,

更新:

我补充说:

export const getState = createFeatureSelector<any>('uxeGallery');
export const selectFeatureExtended = createSelector(getState, (state: State) => {
  return  {
    selectedItem: state.selectedItem,
    hiddenItem: state.hiddenItem,
    bottombarTemplate: state.bottombarTemplate,
    topbarTemplate: state.topbarTemplate,
    topbarTemplateType: state.topbarTemplateType,
    modalTemplate: state.modalTemplate,
    canvasTemplate: state.canvasTemplate,
    canvasImg: state.canvasImg,
  };
});

感觉非常冗长但是如果没有其他解决方案它按预期工作:(

0 个答案:

没有答案