在路由解析器中使用 NGRX

Question

我正在使用 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 的正确方法。

任何建议，谢谢

Answer 1

我将向您介绍使用 Route Guards 预加载 ngrx/store，这是 Todd Motto 的一篇文章，它对此进行了很好的解释。

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