Question

我正在使用Angular 6。我也在使用NGRX商店。我正在使用路由防护，以确保用户已登录到应用程序。然后，我使用解析器获取初始用户配置文件，然后将其放置在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的正确方法。

任何建议，谢谢

Answer 1

我要向您指出Preloading ngrx/store with Route Guards，这是Todd Motto的一篇文章，对它进行了很好的解释。

NgRx example app

中也有一个守卫的例子

@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));
  }
}

Answer 2

首先，我认为将身份验证检查和数据解析分成单独的类是有意义的。对于身份验证，使用true保护很有意义。参见：https://angular.io/api/router/CanActivate

通过这种方式，您的解析器可以专注于仅获取实际需要的数据。在这里，您需要注意，如果在解析器中返回一个可观察对象，则该观察对象需要完成才能使解析器完成。问题是，如果您从商店中选择某些东西，那么可观察到的结果将永远不会完成，因此您的解析器将永远无法完成数据的解析。您可以使用CanActivate或first()运算符来解决此问题。 timdeschryvers答案有一个很好的例子说明了如何做到这一点。

在路由解析器中使用NGRX

2 个答案: