如何通过NGRX使用其他功能中的选择器

Question

我有一个用于管理员的页面，其中有该页面的状态。我还想显示部分报告状态。在redux devtools中，我可以看到我已经正确加载了报告并初始化了管理状态，但是我无法让选择器访问状态的报告。

我已经阅读了官方文档，但是参考official docs对我来说不清楚单独的文件多重选择器。 我已经将状态调整为从主要状态继承，但这显然是错误的。我进行了一些其他调整，并且整天都在搜索google，但到目前为止都是徒劳的。

wageAdmin零件

在我拥有的 管理外壳 组件中

ngOnInit(): void {
// this works
    this.store.dispatch(new fromReportActions.Load());
    this.showReportCode$ = this.store.pipe(select(fromWageAdmin.getShowWageAdminCode)); 

// this returns undefined
    this.reports$ = this.store.pipe(select(queryReports.getReports)); 
    this.errorMessage$ = this.store.pipe(select(queryReports.getError)); 
    this.selectedReport$ = this.store.pipe(select(queryReports.getCurrentReport)); 
    this.displayCode$ = this.store.pipe(select(queryReports.getShowReportCode)); 
  }

在 管理模块 中，我正在导入

    StoreModule.forFeature('wageAdmins', reducers),
    EffectsModule.forFeature(
      [ WageAdminEffects, ReportEffects ]
    ),

在我拥有管理员状态的 index.ts 中

import { createFeatureSelector, createSelector, ActionReducerMap } from '@ngrx/store';
import * as fromRoot from '../../state/app.state';
import * as fromWageAdmin from './wageadmin.reducer';
import * as fromReports from '../../state/report/report.reducer';

export interface State extends fromRoot.State {
    wageAdmins: fromWageAdmin.WageAdminState;
}

export const reducers : ActionReducerMap<State> = {
    wageAdmins: fromWageAdmin.reducer,
    reports: fromReports.reducer
}

// Selector functions
export const getWageAdminFeatureState = createFeatureSelector<fromWageAdmin.WageAdminState>('wageAdmins');

export const getShowWageAdminCode = createSelector(
    getWageAdminFeatureState,
    state => state.showReportCode
);

我拥有的 wageadmin.reducer.ts 中的

import { WageAdminActionTypes, WageAdminActions } from './wageadmin.actions';

// State for this feature (WageAdmin)
export interface WageAdminState {
  showWageAdminCode: boolean;
  wageAdminError: string;
}

const initialWageAdminState: WageAdminState = {
  showWageAdminCode: true,
  wageAdminError: ''
};

export function reducer(state = initialWageAdminState, action: WageAdminActions): WageAdminState {
// etc....

报告部分

在我拥有的应用程序顶层的 app.state.ts 文件中

import * as fromReports from './report/report.reducer';

export interface State {
  reports: fromReports.ReportState
}

export { queryReports } from './report/report.selectors';
export { fromReportActions } from './report/report.actions';

我有 report.reducer.ts 中的

import { Report } from '../../classes/report';
import { ReportActionTypes, ReportActions } from './report.actions';

// State for this feature (WageAdmin)
export interface ReportState {
  showReportCode: boolean;
  currentReportId: string | null;
  reports: Report[];
  error: string;
}

export const initialState: ReportState = {
  showReportCode: true,
  currentReportId: null,
  reports: [],
  error: ''
};

export function reducer(state = initialState, action: ReportActions): ReportState {
// etc......

在我的 report.selectors.ts

import { Transport } from 'src/app/classes/transport';
import { Report } from 'src/app/classes/report';

import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromReports from './report.reducer';

// Selector functions
export const getReportFeatureState = createFeatureSelector<fromReports.ReportState>('reports');
export const getReports = createSelector(
    getReportFeatureState,
    state => state.reports
);

输出

我期望报告状态，但是我收到控制台错误输出

• 无法读取未定义的属性“报告”
• 无法读取未定义的属性'showReportCode'
• 无法读取未定义的属性'showReportCode'
• 无法读取未定义的属性'currentReportId'

Answer 1

我将减缩器组合在工资管理级别上是错误的。

我从工资管理部分的 index.ts 中删除了 减速器 。然后在模块部分中，将导入更改为

    StoreModule.forFeature('wageAdmins', reducer),
    EffectsModule.forFeature(
      [ WageAdminEffects ]
    ),

然后在构建报告的模块 report.module.ts 中，导入报告存储和reducer

    StoreModule.forFeature('reports', reducer),
    EffectsModule.forFeature(
      [ ReportEffects ]
    ),

此更改后，我的代码将按预期运行