ngrx：在加载页面之前从商店获取价值答案

【问题标题】：ngrx: get value from the store before load pagengrx：在加载页面之前从商店获取价值
【发布时间】：2020-09-07 19:55:57
【问题描述】：

我有页面组件，里面显示了来自ngrx/store 的一些数据：

// profile.ts
user$: User = this.store.select('user')

// profile.html
...

<div *ngIf="user$ | async; let user">
  <div>{{user.id}}</div>  
  <div>{{user.email}}</div>
</div>

这可行，但我不喜欢它最初加载没有数据的页面，然后在 1 秒后从 user$ 添加此数据。我知道它应该是这样的 - 因为我使用的是异步管道，但我想改变它。

我有什么选择？我可以以某种方式从商店中预加载此user 选择，以将其包含在所有组件中，这样我就不需要每次都从商店中请求它们，因此，我从其中获取一些数据的所有页面加载后存储“闪烁”？

【问题讨论】：

我知道那种痛苦。从我的头顶上看，一个决心守卫会在这里帮忙吗？ angular.io/guide/router#resolve-guard 但是，我不太确定这个问题的ngrx 方面，如果它与resolve guard / resolver 服务配合得很好。
在 angular guard 或 resolver 中，调度一个动作来获取数据并在 ngrx 效果中调用服务。确保在解析路由之前等待 API 调用返回。查看示例 - github.com/ngrx/platform/tree/master/projects/example-app
您总是会在您的组件中拥有订阅，但是您是否考虑过将用户数据的填充移至由您的模块调用的应用程序初始化函数？该函数可以调度操作以尽早从您的服务加载用户数据以填充状态。

标签： angular ngrx ngrx-store

【解决方案1】：

如果数据已经在商店中，不获取数据的最简单方法是在效果内 - 我自己 Start using ngrx/effects for this。

@Effect()
getOrder = this.actions.pipe(
  ofType<GetOrder>(ActionTypes.GetOrder),
  withLatestFrom(action =>
    of(action).pipe(
      this.store.pipe(select(getOrders))
    )
  ),
  filter(([{payload}, orders]) => !!orders[payload.orderId])
  mergeMap([{payload}] => {
    ...
  })
)

但我认为您正在寻找的是 Angular 路由器保护，以便在您的商店中有数据后获取数据并加载页面。请参阅 Todd Motto 的Preloading ngrx store with Route Guards 了解更多信息。

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

对于（最好的？）用户体验，您还可以使用幽灵元素 - Thomas Burleson 的Great User Experiences with Ghost Elements。

【讨论】：