为ngRx

时间:2019-08-06 12:17:29

标签: angular ngrx ngrx-store angular8

我有一个功能模块。我正在尝试创建一个选择器以从商店中选择一个特定的钥匙。但是我的“ 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)

0 个答案:

没有答案