返回的 Ngrx 存储值是 true 但尝试访问它给出未定义

Question

状态值 returns 根据 reducer 为真或假，但无法访问未定义的值。

这是我的组件代码：

getState : Observable<any>;


   isAuthenticated : false;
      user = null;
      errorMessage = null;

  constructor( private store : Store<AppState>) {
    this.getState = this.store.select(selectAuthState);
   }

    ngOnInit(): void {
        this.getState.subscribe((state)=>{
          this.isAuthenticated = state.isAuthenticated;
          this.user = state.user;
          this.errorMessage = state.errorMessage;           
        });
      }

state.ts代码：

 export interface AppState{
        authState : auth.State;
    }
    
    export const reducers = {
        auth : auth.reducer
    }
    
    export const selectAuthState = createFeatureSelector<AppState>('auth');

减速器代码：

export interface State{
    isAUthenticated : boolean;

    user : User | null;

    errorMessage : string | null;

}

export const initialState : State = {
    isAUthenticated : false,
    user : null,
    errorMessage : null
}


export function reducer (state = initialState, action : All) : State{
    switch(action.type){
        case AuthActionTypes.LOGIN_SUCCESS : {
            return{
                ...state,
                isAUthenticated:true,
                user:{
                    token : action.payload.token,
                    email : action.payload.email
                },
                errorMessage : null
            };
        }
        case AuthActionTypes.LOGIN_FAILURE : {
            return{
                ...state, errorMessage : 'Incorrect email and/or password'
               
            };            
        } 
        case AuthActionTypes.SIGNUP_SUCCESS :{
            return{
                isAUthenticated : true,
                user:{
                    token:action.payload.token,
                    email:action.payload.email
                },
                errorMessage: null
            };
        }
        case AuthActionTypes.SIGNUP_FAILURE : {
            return{
               ...state,
               errorMessage : 'That email is already in use.'
             };
        }
        case AuthActionTypes.LOGOUT : {
            return initialState;
        }

        case AuthActionTypes.RESET :{
            return initialState;
        }
        
        default : {
            return state;
        }
    }
}

您可以看到返回的状态值为真，但 state.isAuthenticated 未定义。我什至在 redux devtools 中查看了状态值，其中状态值正在相应地变化。

Answer 1

你有一个错字“isAUthenticated”与“isAuthenticated”

      case AuthActionTypes.SIGNUP_SUCCESS :{
            return{
                isAUthenticated : true,
                user:{
                    token:action.payload.token,
                    email:action.payload.email
                },
                errorMessage: null
            };
        }

您的调试消息也显示了这个拼写错误

返回的 Ngrx 存储值是 true 但尝试访问它给出未定义

Ngrx store value returned is true but trying to access it giving undefined

typescript

angular

ngrx-store