Class Property is undefined in ngrx effects

Question

I am currently trying to use ngrx on a new project. What i did is that i wrote a login component where the user can enter the credentials. Then i dispatch a new action with the login information.

This works so far. Now i tried to play around with ngrx effects. The effect was worked kind of correct, because when i try to access the 'email' property of my custom model in the map function it always returns undefined, but when i am debugging, the correct value ist shown. Maybe some code will help here:

@Effect()
auth$: Observable<Action> = this.actions$.pipe(
    ofType<authActions.Authenticate>(authActions.AUTHENTICATE),
    map((creds: LoginViewModel) => {
        const appUser = new AppUserViewModel(creds.email, 'Test');
        return new authActions.AuthenticationSuccessfull(appUser);
    })
);

As you can see i am passing the credentials als LoginViewModel and try to access the "email" property. I always getting undefined for that property value. here you can see what the value is when i am debugging.

As u can see the email property is set when i am debugging. Does someone have a hint or an explanation why i can`t access the value of that property? Do i have a misunderstanding here?

Because even if i make a console.log(credentials.email) it says undefined

the User class:

export class AppUserViewModel {
  public email: string;
  public userName: string;

  constructor(email: string, userName: string) {
    this.email = email;
    this.userName = userName;
  }
}

And the LoginViewModel class

export class LoginViewModel {
   public email: string;
   public password: string;

   constructor(email: string, password: string) {
    this.email = email;
    this.password = password;
   }
}

I dispatch my action like that:

onSubmit() {
    this._store.dispatch(new authActions.Authenticate(this.loginModel));
    this.submitted = true;
  }

Kind regards

What is the output if you log the credentials ? I tried to reproduce the thing that you are doing and it seems fine to me :D — Християн Христов
The output is always 'undefined'. Thats my problem. I don`t understand why it is undefined, even when the debugger shows the correct values. I seem to miss something :D — jhen
can you add where you dispatch authActions.Authenticate action — Okan Aslankan

jhen jhen · Accepted Answer · 2018-06-19T13:18:49

I fixed my error. The problem was that i passed my loginModel which was bound to my form values when i dispatched the login information. This caused the values to be undefined.

instead of

this._store.dispatch(new authActions.Authenticate(this.loginModel));

is use this now and i works:

this._store.dispatch(
      new authActions.Authenticate({
        email: this.loginModel.email,
        password: this.loginModel.password
      })
    );

Tanks to Okan Aslankan, i checked my code because of you hint and found the error :)

Class Property is undefined in ngrx effects

1 Answers