我有一个功能模块。我正在尝试创建一个选择器以从商店中选择一个特定的钥匙。但是我的“ createSelector”函数中的投影仪函数返回未定义。
feature.module.ts代码
@NgModule({
imports: [
StoreModule.forFeature(fromAuthFeature.FEATURE_NAME, fromAuthFeature.FEATURE_REDUCER_TOKEN),
EffectsModule.forFeature([
AuthEffects
])
],
declarations: [AuthPageComponent],
providers: [
AuthService,
{
provide: fromAuthFeature.FEATURE_REDUCER_TOKEN,
useFactory: fromAuthFeature.getFeatureReducers
},
]
})
feature.reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as authPageActions from '@app/auth/actions/auth.actions';
export interface IAuthState {
quote: string;
author: string;
isLoading: boolean;
}
const initialState: IAuthState = {
quote: undefined,
author: undefined,
isLoading: false
};
export const AuthReducer = createReducer<IAuthState>(initialState,
on(authPageActions.loadQuotes, (state, action) => Object.assign({}, initialState, {
quote: '',
author: '',
isLoading: false
})),
on(authPageActions.loadQuotesComplete, (state, action) => Object.assign({}, state, {
quote: action.payload.quote,
author: action.payload.author,
isLoading: false
})),
on(authPageActions.loadQuotesError, state => Object.assign({}, state, {
quote: undefined,
author: undefined,
isLoading: false
}))
);
export const getQuote = (state: IAuthState) => state && state.quote;
export const getAuthor = (state: IAuthState) => state && state.author;
export const getLoading = (state: IAuthState) => state && state.isLoading;
index.ts文件
import * as fromRoot from '@app/core/selectors';
import { createSelector, ActionReducerMap, ReducerObservable } from '@ngrx/store';
import * as fromAuth from './auth.reducer';
import { InjectionToken } from '@angular/core';
export const FEATURE_NAME = 'authentication';
export const FEATURE_REDUCER_TOKEN = new InjectionToken<ActionReducerMap<fromAuth.IAuthState>>(FEATURE_NAME);
export interface IAuthFeatureState {
randomQuote?: fromAuth.IAuthState;
}
export const reducers: ActionReducerMap<IAuthFeatureState> = {
randomQuote: fromAuth.AuthReducer
};
export function getFeatureReducers(): ActionReducerMap<IAuthFeatureState> {
return reducers;
}
export const getQuote = createSelector(fromRoot.getAuthState, fromAuth.getQuote);
export const getAuthor = createSelector(fromRoot.getAuthState, fromAuth.getQuote);
export const isLoading = createSelector(fromRoot.getAuthState, fromAuth.getLoading);
selector.ts文件
import { IAppState } from './reducer/app.reducer';
import { IAuthFeatureState } from '@app/auth/reducer';
import { IErrorFeatureState } from './reducer';
export const getRouterState = (state: IAppState) => state.router;
export const getAuthState = (state: IAuthFeatureState) => state.randomQuote;
export const getErrorState = (state: IErrorFeatureState) => state.error;
当我在组件中订阅选择器功能时,期望从商店中检索数据。但是我变得不确定。跟踪到源,我发现在feature.reducer.ts文件中未定义“ state && state.quote”中的状态。任何帮助将不胜感激,因为我已经尝试了所有可能的方法,并且超出了选择范围。
这是确切的错误:
ERROR TypeError: Cannot read property 'quote' of undefined
at getQuote (auth.reducer.ts:35)
at store.js:938
at memoized (store.js:853)
at defaultStateFn (store.js:893)
at store.js:947
at memoized (store.js:853)
at MapSubscriber.project (store.js:772)
at MapSubscriber._next (map.js:29)
at MapSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)