admin管理员组文章数量:1320625
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)))
);
本文标签: javascriptObservable with rx broken after errorStack Overflow
版权声明:本文标题:javascript - Observable with rx broken after error - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742072934a2419237.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论