Search code examples
angulartypescriptngrx-store

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


State value returns true or false according to reducer but could'nt able to access it as is undefined.

here is my component code:

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 code:

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

reducer code :

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

You can see that state value returned is true but state.isAuthenticated is undefined. I even reviewed state values in redux devtools where the state value is changing accordingly.

debug


Solution

  • you have an typo "isAUthenticated" vs "isAuthenticated "

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

    Also your debug message shows this typo