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.
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