Я загружаю файл конфигурации из appsettings.json, где я сохранил api url.
Я настроил хранилище ngrx 7 с эффектами.Я отправляю действие loadconfig в app.component.ts onInit, а затем пытаюсь прочитать данные из хранилища в консоли после.Я получаю сообщение об ошибке:
TypeError: Невозможно прочитать свойство 'getConfig' из undefined в новом AppFacade (VM5613 main.js: 2060)
Я думаю, проблема в том, как яреализованы селекторы для рута.Как видите, я использовал createFeatureSelector, но корневое состояние - это не функция, а корневая.Что я делаю неправильно?Почему я не могу получить доступ к значению состояния, так как оно говорит, что оно не определено, но в избыточном состоянии Chrome devtools явно присутствует?
Состояние сохраняется, как мы можем видеть здесь: 
Вот как я реализовал свой магазин:
Действия:
import { Action } from '@ngrx/store';
import { AppConfig } from '../../app.config';
export enum AppActionTypes {
LoadConfig = '[App] Load Config',
LoadConfigError = '[App] Load Config Error',
LoadConfigSuccess = '[App] Load Config Success'
}
export class LoadConfig implements Action {
public readonly type = AppActionTypes.LoadConfig;
}
export class LoadConfigError implements Action {
public readonly type = AppActionTypes.LoadConfigError;
constructor(public payload: any) {}
}
export class LoadConfigSuccess implements Action {
public readonly type = AppActionTypes.LoadConfigSuccess;
constructor(public payload: AppConfig) {}
}
export type AppActions = LoadConfig | LoadConfigError | LoadConfigSuccess;
export const fromAppActions: any = {
LoadConfig,
LoadConfigError,
LoadConfigSuccess
};
Эффекты:
import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { AppActionTypes } from '../actions/app.actions';
import { HttpClient } from '@angular/common/http';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { AppConfig } from '../../app.config';
import { of } from 'rxjs';
@Injectable()
export class AppEffects {
constructor(private actions$: Actions, private httpClient: HttpClient) {}
@Effect()
private loadConfig$: any = this.actions$.pipe(
ofType(AppActionTypes.LoadConfig),
mergeMap(() =>
this.httpClient.get('assets/appsettings.json').pipe(
map((response: AppConfig) => ({
type: AppActionTypes.LoadConfigSuccess,
payload: response
})),
catchError(() => of({ type: AppActionTypes.LoadConfigError }))
)
)
);
}
Фасад:
import { Injectable } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AppState } from '../reducers/app.reducer';
import { appQuery } from '../selectors/app.selectors';
import { AppConfig } from '../../app.config';
import { LoadConfig } from '../actions/app.actions';
@Injectable({
providedIn: 'root'
})
export class AppFacade {
constructor(private store: Store<AppState>) {}
public getConfig: Observable<AppConfig> = this.store.pipe(
select(appQuery.getConfig)
);
public loadConfig(): void {
this.store.dispatch(new LoadConfig());
}
}
Редуктор:
import { AppActions, AppActionTypes } from '../actions/app.actions';
import { AppConfig } from '../../app.config';
export const APP_KEY: string = 'app_key';
export interface AppState {
appConfig: AppConfig | undefined;
}
export const initialState: AppState = {
appConfig: {
AppSettings: {
AppUrl: undefined,
ApiUrl: undefined,
AuthUrl: undefined
},
ApplicationInsights: {
InstrumentationKey: undefined
}
}
};
export function reducer(
state: AppState = initialState,
action: AppActions
): AppState {
switch (action.type) {
case AppActionTypes.LoadConfigSuccess: {
return {
...state,
appConfig: action.payload
};
}
}
return state;
}
Селекторы:
import {
createFeatureSelector,
MemoizedSelector,
createSelector
} from '@ngrx/store';
import { AppState, APP_KEY } from '../reducers/app.reducer';
import { AppConfig } from '../../app.config';
// Lookup the 'account bar' feature state managed by NgRx
const getAppState: MemoizedSelector<
object,
AppState
> = createFeatureSelector<AppState>(APP_KEY);
const getConfig: MemoizedSelector<object, AppConfig> = createSelector(
getAppState,
(state: AppState) => state.appConfig
);
export const appQuery = {
getConfig
};
Модуль приложения:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CoreModule } from './core/core.module';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { AppComponent } from './app.component';
import { AppEffects } from './store/effects/app.effects';
import { reducers } from './store/reducers';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CoreModule,
StoreModule.forRoot(reducers),
EffectsModule.forRoot([AppEffects]),
StoreDevtoolsModule.instrument({
maxAge: 100,
logOnly: false
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Компонент приложения:
import { Component, OnInit } from '@angular/core';
import { AppFacade } from './store/facades/app,facade';
import { AppConfig } from './app.config';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private facade: AppFacade) {}
public ngOnInit(): void {
this.facade.loadConfig();
this.facade.getConfig.subscribe((response: AppConfig) => {
console.log(JSON.stringify(response, null, 4));
});
}
}