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 form, so that server responds with 401, the next login attempt has no effects. I have read that the exception must be catch when working with observables in order not to 'break' the stream, but as far i know I'm catch the exception and still its now working.
belowe the 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);
// });
}
}
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 form, so that server responds with 401, the next login attempt has no effects. I have read that the exception must be catch when working with observables in order not to 'break' the stream, but as far i know I'm catch the exception and still its now working.
belowe the 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);
// });
}
}
Share
Improve this question
asked Aug 5, 2017 at 14:42
filemonczykfilemonczyk
1,7135 gold badges31 silver badges53 bronze badges
1
- are you importing all of them?? – Aravind Commented Aug 5, 2017 at 15:23
2 Answers
Reset to default 10When an error is caught, the observable returned by catch
is used to continue the chain. And the returned observable pletes, which pletes 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 plete the effect.
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)))
);