Angular路由器是否有任何限制可用于NgRx效果?
我刚开始学习NgRx,我有以下代码:
@Effect() public authenticate$ = this.actions$ .ofType(authenticationActions.AUTHENTICATE) .switchMap((action: AuthenticateAction) => this.authenticationService.authenticate(action.payload) .map((data: TokenData) => { const user: User = { token: data.token, username: 'dummy', }; console.log(data); this.router.navigateByUrl('/'); return new authenticationActions.AuthenticateSuccessAction(user); }) .catch(error => { console.log(error); return Observable.throw(error); }) );控制台记录数据变量并且正在触发AuthenticateSuccessAction动作,所以路由器线路正在执行,但导航不会发生。
Does the Angular router have any restrictions to be used inside an NgRx effect?
I just started learning NgRx and I have the following code:
@Effect() public authenticate$ = this.actions$ .ofType(authenticationActions.AUTHENTICATE) .switchMap((action: AuthenticateAction) => this.authenticationService.authenticate(action.payload) .map((data: TokenData) => { const user: User = { token: data.token, username: 'dummy', }; console.log(data); this.router.navigateByUrl('/'); return new authenticationActions.AuthenticateSuccessAction(user); }) .catch(error => { console.log(error); return Observable.throw(error); }) );The console logs the data variable and the AuthenticateSuccessAction action is being triggered, so the router line is being executed but the navigation doesn't happen.
最满意答案
@Effect() public authenticate$ = this.actions$.pipe( .ofType(authenticationActions.AUTHENTICATE), map(action => action.payload), .exhaustMap((auth: any) => this.authenticationService.authenticate(auth) .map((data: TokenData) => { return user: User = { token: data.token, username: 'dummy', }; }).catch(error => { console.log(error); return Observable.throw(error); }).pipe( map(user =>new authenticationActions.AuthenticateSuccessAction(user)) ) );) @Effect({ dispatch: false }) loginSuccess$ = this.actions$.pipe( ofType(authenticationActions.AuthenticateSuccessAction), tap(() => this.router.navigate(['/'])) );使用exhaustMap,当你调度'AuthenticateSuccessAction'动作时,做另一个重定向的效果。
就我个人而言,我喜欢将所有服务与效果分开,然后在成功登录后可以使用catchError()运算符来在发生失败登录时分派另一个操作。
希望这有效。 PS:我没有验证这个答案,但逻辑是这样的。
@Effect() public authenticate$ = this.actions$.pipe( ofType(authenticationActions.AUTHENTICATE), map(action => action.payload), exhaustMap((auth: any) => this.authenticationService.authenticate(auth) .map((data: TokenData) => { return user: User = { token: data.token, username: 'dummy', }; }).catch(error => { console.log(error); return Observable.throw(error); }).pipe( map(user =>new authenticationActions.AuthenticateSuccessAction(user)) ) );) @Effect({ dispatch: false }) loginSuccess$ = this.actions$.pipe( ofType(authenticationActions.AuthenticateSuccessAction), tap(() => this.router.navigate(['/'])) );Use exhaustMap and when you dispatching 'AuthenticateSuccessAction' action, do another effect for redirecting.
Personally, I like to separate all the services from effects, then you can use catchError() operator after success login for dispatching another action in case of failure login.
hope this works. PS: I did not verify this answer but logic is like this.
更多推荐
发布评论