Ngrx /效果：在加载页面之前等待商店中的用户数据

Question

我有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动作： 我应该如何正确使用它？

Answer 1

您应该执行一些操作，例如，启动应用程序或路由到/ home时调度的getUsers和setUser。同样在化简器中，在您的switch（actionType）中设置这两个来存储/修改状态。之后，您只需使用@Effect（）将getUsers上的效果绑定在一起，因此每当要调用getUsers时，也将要调用effect，并从此在reducer中调用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

编辑：也不需要您的服务，只需直接根据自己的效果实施即可。