第二次动作分派在RxJS和Angular 6中不起作用
我有一个@效果来管理登录。步骤如下: 呼叫服务 将令牌保存到类中; 选择应用程序存储区中的一个页面,以查看用户在重定向到登录之前是否询问了另一个页面。因为他可能想进入“个人资料”页面,但我将他重定向到登录,保存了想要的“个人资料”页面。在这种情况下,将重定向用户 执行其他操作在存储中设置变量“isAuthenticated”、保存令牌、解码令牌。 一切顺利。这是auth.effects.ts的代码: 这是在header.component.ts中触发注销的函数: 问题是:如果我注销,我会再次键入电子邮件和密码,然后按login,什么也不会发生。特别是,打开Ngrx DevTools时,我看到DO_登录被发送表单的属性值,但服务器没有被调用。事件如果我在效果中放置断点,它不会触发。为什么? 这是所有操作的屏幕:登录-->主页-->注销-->执行第二次登录: 问题来自取消订阅可观察效果的take1第二次动作分派在RxJS和Angular 6中不起作用,angular,redux,rxjs,ngrx,ngrx-effects,Angular,Redux,Rxjs,Ngrx,Ngrx Effects,我有一个@效果来管理登录。步骤如下: 呼叫服务 将令牌保存到类中; 选择应用程序存储区中的一个页面,以查看用户在重定向到登录之前是否询问了另一个页面。因为他可能想进入“个人资料”页面,但我将他重定向到登录,保存了想要的“个人资料”页面。在这种情况下,将重定向用户 执行其他操作在存储中设置变量“isAuthenticated”、保存令牌、解码令牌。 一切顺利。这是auth.effects.ts的代码: 这是在header.component.ts中触发注销的函数: 问题是:如果我注销,我会再次键入
ngrx效果是一个单件,一旦取消订阅,就再也不会订阅了。为什么在效果中使用1?因为我只想使用1倍的值,我不在乎以后会是什么,我的上帝。删除take1它可以工作。。。。那是一个小时,我正在努力解决这个问题。。。。take1会阻止下一次调用效果?对,它会停止此操作$stream:非常感谢,你救了我一天:
@Injectable()
export class AuthEffects {
constructor(private store: Store<fromApp.AppState>, private actions$: Actions, private router: Router, private authService: AuthService, private route: ActivatedRoute, private toastr: ToastrService) {
}
tokenObj: { token: string };
@Effect()
authLogin$ = this.actions$
.ofType(AuthActions.DO_LOGIN)
.pipe(map((action: AuthActions.DoLogin) => {
return action.payload;
})
, switchMap((authData: { email: string, password: string }) => {
return from(this.authService.login(authData.email, authData.password));
})
, map(tokenObj => this.tokenObj = tokenObj)
, withLatestFrom(this.store.select(('core')))
, take(1)
, map(([action, storeState]) => {
if (storeState.redirectUrl) {
this.router.navigate([storeState.redirectUrl]);
} else {
this.router.navigate(['/']);
}
})
, mergeMap(() => {
return [
{
type: AuthActions.LOGIN
},
{
type: AuthActions.SET_TOKEN,
payload: this.tokenObj.token
},
{
type: ProfileActions.DECODE_TOKEN,
payload: this.tokenObj.token
},
{
type: CoreActions.REMOVE_REDIRECT_URL
}
];
})
, catchError((err, caught) => {
this.toastr.error(err.message);
// Quindi, alla fine, torniamo l'Observable di errore, affinché si possa ri-provare l'operazione
return caught;
})
);
}
onLogin(form: NgForm) {
const email = form.value.email;
const password = form.value.password;
this.store.dispatch(new AuthActions.DoLogin({ email: email, password: password }));
}
onLogout() {
this.store.dispatch(new AuthActions.Logout());
this.store.dispatch(new ProfileActions.CancelLoggedUser());
this.router.navigate(['/login']);
}