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

When an error is caught, the observable returned by catch is used to continue the chain. And the returned observable completes, which completes the effect and sees ngrx unsubscribe from the effect.

Move the map and catch into the switchMap:

@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)))
);

Catching inside the switchMap won't complete the effect.

Answer 2

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