NgRx效果中的角度路由器导航(Angular router navigation inside NgRx effect)

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.

更多推荐