Как использовать селектор из другой функции с NGRX - PullRequest
0 голосов
/ 05 июня 2019

У меня есть страница для администратора, где у меня есть состояние для этой конкретной страницы.Я также хочу показать части отчета о состоянии.Я могу видеть, что в devx-файлах-редукторах я правильно загрузил отчеты и инициализировал часть состояния администратора, но не могу заставить селекторы получить доступ к части состояния отчетов.

Я прошелмне не понятна официальная документация, но мультиселекторы отдельных файлов ref official docs .Я скорректировал свое состояние, чтобы наследовать от основного состояния, но это было явно неправильно.Я внёс некоторые другие изменения и искал в Google весь день, но пока напрасно.

wageAdmin Part

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

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

redux image

в административном модуле Я импортирую

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

Вывод

Я ожидал состояние отчета, но я получаю сообщение об ошибке консоли

  • Невозможно прочитать свойство 'reports' из неопределенного
  • Невозможно прочитать свойство 'showReportCode' из undefined
  • Невозможно прочитать свойство 'showReportCode 'из неопределенного
  • Невозможно прочитать свойство' currentReportId 'из неопределенного

1 Ответ

1 голос
/ 06 июня 2019

Я ошибся, объединив редукторы на уровне wageAdmin.

wrong redux implementation

Я удалил редукторы из index.ts в административной части заработной платы.Затем в модульной части я изменил импорт на

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

И затем в модуле, где я создаю отчеты, report.module.ts , я импортирую хранилище отчетов и редуктор


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

После этого изменения мой код работает как надо correct redux implementation

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...