Ngrx/effects：在加载页面之前等待存储中的用户数据答案

【问题标题】：Ngrx/effects: wait for user data in store, before load pageNgrx/effects：在加载页面之前等待存储中的用户数据
【发布时间】：2019-12-23 23:12:05
【问题描述】：

我有user.service，我在其中从数据库中获取页面加载时的用户数据，并通过user.action 将它们保存到存储：

export class UserService {
   user$ = this.store.select('user')

   constructor(
      private fireStore: AngularFirestore,
      private fireAuth: AngularFireAuth,
      private store: Store<AppState>
   ) {
     this.fireAuth.authState.subscribe(auth => {
      if (auth) {
        const { uid } = auth

        this.fireStore.collection('users').doc(uid).ref.get()
        .then(data => {
          const user = data.data() as User

          this.store.dispatch(new UserActions.SaveUser(user))
        })
      } else {
        this.store.dispatch(new UserActions.RemoveUser())
      }
    })
   }
}

所以，如果数据库返回用户数据 - 我将它们保存到存储中，如果没有 - 这意味着用户没有登录，我从“用户”存储中删除用户数据。

我希望我的主页等到在加载之前使用User.service 获取数据，所以我认为我必须为此创建效果：

export class UserEffects {

  @Effect()
  loadUser$ = this.actions$.pipe(
    ofType(UserActions.SAVE_USER),
    map(user => user)
  )

  constructor (
    private actions$: Actions,
    private store: Store<AppState>
  ) {}
}

但如果我这样做，应用程序将开始无休止地发送UserActions.SAVE_USER 操作：我应该如何以正确的方式做呢？

【问题讨论】：

还有一件事......如果你想在应用程序启动之前加载它：angular.io/api/core/APP_INITIALIZER 或者你可以使用路由解析器：angular.io/guide/router#resolve-pre-fetching-component-data
ngrx: get value from the store before load page的可能重复

标签： angular ngrx ngrx-store ngrx-effects

【解决方案1】：

您应该执行一些操作，例如当您启动您的应用或路由到 /home 时调度的 getUsers 和 setUser。同样在你的减速器中，让这两个在你的 switch(actionType) 中存储/修改你的状态。之后，您只需使用 @Effect() 绑定 getUsers 上的效果，因此每当要调用 getUsers 时，也会调用效果并从那里在您的减速器中调用 setUser。作为参考，请查看以下 2 篇文章：

https://www.intertech.com/Blog/ngrx-tutorial-actions-reducers-and-effects/

https://www.intertech.com/Blog/ngrx-tutorial-add-state-to-feature-module/

要触发数据加载，您可以在路由上使用Angular Lazy Loading，例如：localhost:4200/home

编辑：也不需要你的服务，直接在你的效果中实现它。

【讨论】：