Observed with rx after error
I am trying to write a login for my application using ngrx store + ng effects. I managed to write it and it works in happy scenerio, but when the user enters wrong values ββinto the form so that the server responds with 401, the next login attempt has no effect. I read that the exception should be a gimmick when working with observables so as not to "break" the thread, but as far as I know I will catch the exception and still work it.
below code;
export class LoginComponent {
logged = new Observable<any>();
constructor(private store: Store<AppStore>) {
this.logged = store.select('login');
}
login(username: string, password: string){
let body = JSON.stringify({username, password});
this.store.dispatch({type: LoginActions.ATTEMPT_LOGIN, payload: body});
}
}
@Injectable()
export class LoginEffects {
constructor(
private actions: Actions,
private loginService: LoginService
) { }
@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)));
@Effect() success = this.actions
.ofType(LoginActions.LOGIN_SUCCESS)
.map(toPayload)
.map(payload => localStorage.setItem(Global.TOKEN, payload))
.map(() => go(['/menu']));
@Effect() error = this.actions
.ofType(LoginActions.LOGIN_FAILED)
.map(toPayload)
.map(payload => console.log(payload))
.ignoreElements();
}
export const login = (state: any = null, action: Actions) => {
switch (action.type) {
case LoginActions.ATTEMPT_LOGIN:
console.log('hello from reducer attempt login');
return action.payload;
case LoginActions.LOGIN_SUCCESS:
console.log('hello from reducer success login');
return action.payload;
case LoginActions.LOGIN_FAILED:
console.log('hello from reducer failed login');
return action.payload;
default:
return state;
}
};
@Injectable()
export class LoginService {
auth = new Observable<any>();
constructor(private store: Store<AppStore>, private http: Http) {
this.auth = store.select('auth');
}
attemptLogin(payload): Observable<any> {
// let body = JSON.stringify({username, password});
return this.http.post(Global.API_URL + '/login', payload)
.map(response => response.headers.get('Authorization'));
// .map(action => (
// { type: LoginActions.ATTEMPT_LOGIN, payload: action}))
// .subscribe(action => {this.store.dispatch(action);
// });
}
}
source to share
When an error is caught, the observable returned catch
is used to continue the chain. And the returned observables terminate, which completes the effect and sees the ngrx
unsubscribe to the effect.
Move map
and catch
to 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)))
);
Trapping inside switchMap
will not end the effect.
source to share
Error script : Requires a reducer to handle the error and display some message to the user if needed.
By using pipe
and catchError
from rxjs/operators
we can redistribute both (or all) of the error cases into a single ErrorAction, which we can then handle directly in effects
and make changes to the side effects UI.
@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)))
);
source to share