时间戳

首页 > 解决方案 > Ngrx/effects：在加载页面之前等待存储中的用户数据

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

问题描述

我有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动作： 在此处输入图像描述 我应该如何以正确的方式做呢？

标签： angularngrxngrx-storengrx-effects

解决方案

您应该执行一些操作，例如启动应用程序时调度的 getUsers 和 setUser，或路由到 /home。同样在你的减速器中，让这两个在你的 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

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

推荐阅读