Использование NGRX в Route Resolver - PullRequest
Новая
       17

Использование NGRX в Route Resolver

0 голосов
/ 30 августа 2018

Я использую Angular 6. Я также использую NGRX Store. Я использую охрану маршрута, чтобы убедиться, что пользователь вошел в приложение. Затем я использую распознаватель для получения исходного профиля пользователя, а затем помещаю его в хранилище NGRX.

Я новичок в NGRX, и я не уверен, что это правильный способ написания распознавателя. 

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
     return this.loginService.getLoginData()
        .pipe(
            map((result:UserData) => { 
                this.store.dispatch(new userActions.SetLoginData(result)); 
                this.loginService.getDropdownData(
                    result.userId, 
                    result.countryCode,
                ).subscribe( data => { 
                    this.store.dispatch(new userActions.SetDropdownData(data));
                })
            })
        )
}

Я также не уверен, что это правильный способ сделать RXJS.

любые предложения, Спасибо

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Прежде всего, я думаю, что было бы целесообразно разделить проверку подлинности и разрешение данных на отдельные классы. Для аутентификации имеет смысл использовать CanActivate охранник. Смотри: https://angular.io/api/router/CanActivate

При этом ваш распознаватель может сосредоточиться только на получении данных, которые действительно требуются. Здесь вы должны знать, что если вы возвращаете наблюдаемое в своем резольвере, то наблюдаемое должно завершиться, чтобы завершить решатель. Проблема в том, что если вы выбираете что-то из хранилища, полученная в результате наблюдаемая никогда не завершится, поэтому ваш распознаватель никогда не завершит разрешение ваших данных. Вы можете обойти этот факт, используя оператор first() или take(1). У ответа timdeschryvers есть хороший пример того, как этого добиться.

0 голосов
/ 30 августа 2018

Я собираюсь указать вам Предварительная загрузка ngrx / store с Route Guards , статья Тодда Мотто, которая объясняет это очень хорошо.

В примере приложения NgRx есть также пример охранника 

@Injectable()
export class CoursesGuard implements CanActivate {
  constructor(private store: Store<CoursesState>) {}

  getFromStoreOrAPI(): Observable<any> {
    return this.store
      .select(getCoursesState)
      .do((data: any) => {
        if (!data.courses.length) {
          this.store.dispatch(new Courses.CoursesGet());
        }
      })
      .filter((data: any) => data.courses.length)
      .take(1);
  }

  canActivate(): Observable<boolean> {
    return this.getFromStoreOrAPI()
      .switchMap(() => of(true))
      .catch(() => of(false));
  }
}
...