@Injectable()
export class UserEffects {
constructor(
private store$: Store<fromRoot.State>,
private actions$: Actions,
private router: Router,
private chatService: ChatService,
private authService: AuthService,
private db: AngularFireAuth,
private http: HttpClient
) { }
@Effect()
login$: Observable<Action> = this.actions$.pipe(
ofType(UserActions.LOGIN),
switchMap((action: UserActions.LoginAction) =>
from(this.db.auth.signInWithEmailAndPassword(action.payload.email, action.payload.password)),
),
// switchMapTo(from(this.db.auth.currentUser.getIdToken())),
switchMapTo(from(this.db.authState.pipe(
take(1),
switchMap((user)=>{
if (user)
return from(user.getIdToken());
else
return of(null);
})
))),
switchMap(token => this.http.post(environment.apiUrl + '/api/login', { token: token })),
tap((response: any) => {
if (response.valid === 'true') {
localStorage.setItem('token', response.token);
this.router.navigate(['dash']);
}
}),
map(response => new UserActions.LoginSuccessAction({ response })),
catchError(error => {
return of({
type: UserActions.LOGIN_FAILURE,
payload: error
});
})
);
@Effect({ dispatch: false })
loginSuccess$: Observable<Action> = this.actions$.pipe(
ofType(UserActions.LOGIN_SUCCESS),
tap((action: UserActions.LoginSuccessAction) => {
console.log("LOGIN_SUCCESS");
console.log(action);
}));
@Effect({ dispatch: false })
loginFailure$: Observable<Action> = this.actions$.pipe(
ofType(UserActions.LOGIN_FAILURE),
tap((action: UserActions.LoginFailureAction)=>{
console.log("LOGIN_FAILURE");
console.log(action.payload.code);
}));
}
用例:您位于登录页面。您输入用户名和密码以调用LoginAction。如果一切顺利,则应调用LoginSuccessAction。否则,应调用LoginFailureAction。
除一种情况外,其他所有方法都起作用:
一旦调用LoginFailureAction,将不会再次调用LoginSuccessAction和LoginFailureAction。我不知道为什么会这样。我认为这可能与这条线有关:
catchError(error => { return of({ type: UserActions.LOGIN_FAILURE, payload: error }); })
但是我在这里迷路了。我不是反应式编程方面的专家,但是除了这一种情况外,它都能按预期工作。有谁知道为什么会这样?
效果尊重成功的完成和错误。如果发生错误,则ngrx将重新订阅,如果成功完成,则将不再订阅。
例如,catchError
可能会导致这种情况,因为它不侦听其父流。如果要在发生错误的情况下启用流,则需要在之后使用repeat
运算符catchError
。
catchError(error => {
return of({
type: UserActions.LOGIN_FAILURE,
payload: error
});
}),
repeat(), // <- now effect is stable.
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句