Угловая навигация внутри роутера с эффектом NgRx - PullRequest
Новая
       8

Угловая навигация внутри роутера с эффектом NgRx

0 голосов
/ 28 мая 2018

Есть ли у Angular router какие-либо ограничения для использования внутри эффекта 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 запускается, поэтому выполняется линия маршрутизатора, но навигация не происходит.

1 Ответ

0 голосов
/ 29 мая 2018 
@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(['/']))
   );

Используйте выхлопную карту, а при отправке действия «AuthenticateSuccessAction» используйте другой эффект для перенаправления.

Лично мне нравится отделять все сервисы от эффектов, после чего вы можете использовать оператор catchError () после успешного входа в систему для отправки другого действия в случае сбоя входа в систему.

надеюсь, что это работает.PS: я не проверял этот ответ, но логика такая.

...