Observable with rx broken after error

Question

Im trying to write login flow for my app using ngrx store + ng effects. I have managed to write it and it works in happy scenerio, but when user inputs wrong values to the f

Answer 1

Happy Path scenario:

Error scenario: Needs reducer to handle the error case and show some message to user if intended.

By making use of pipe and catchError from rxjs/operators we can remap both (or all) error cases into a single ErrorAction, that we can then handle directly in the effects and do side effect ui changes.

@Effect() login = this.actions
.ofType(LoginActions.ATTEMPT_LOGIN)
.map(toPayload)
.switchMap(payload => this.loginService.attemptLogin(payload)
  .map(response => new LoginActions.LoginSuccess(response))
  .catch(error => of(new LoginActions.LoginFailed(error)))
);