angular - ngrx 文档引用解析

Question

我尝试使用 ngrx 和 firestore 实现一个好友系统。

因此我创建了一个集合/users 来保存用户信息，比如姓名、头像图片链接、在线状态等。第二部分由每个用户的/users/{id}/buddies 集合组成，其中包含仅由 friend 组成的 friend 信息

• 用户编号
• 好友状态，可以是:pending requested 或 buddy。
• 引用用户文档

此设置允许为每个用户好友创建一个最小集合，并且不需要在 buddies 表中跟踪用户信息的副本。

设置和上下文就到此为止。

我在解决单个 friend 的用户文档引用时遇到了很多问题...理想情况下，我想要一个好友商店，其中包含当前用户的所有好友，并且可以使用各种选择器进行选择。

Buddy 模型应该类似于:

export interface Buddy {
  uid: string;
  buddyStatus: BuddyStatus;
  userRef: User | any;
}

User 模型看起来像这样:

export enum AuthState {
  LOGGED_IN = "LOGGED_IN",
  NOT_LOGGED_IN = "NOT_LOGGED_IN"
};

export interface User {
  uid: string | null;
  displayName: string | null;
  authState: AuthState;
  loading?: boolean;
  error?: string | null;
  avatarUrl: string | null;
};

buddies store通过监听状态变化并调度相应的ngrx store actions(添加、修改、删除)同步到firestore数据库:

  query$ = createEffect(() => this.actions$.pipe(
    ofType(BuddiesActions.query),
    switchMap(() => {
      return this.uid$.pipe(
        switchMap(uid => {
          return this.afs.collection(`users/${uid}/buddies`).stateChanges();
        })
      )
    }),
    mergeMap(actions => {
      return actions;
    }),

    // map the firestore actions to ngrx store actions to sync them
    // TODO this adds the user reference and things fuck up here...
    map((action: DocumentChangeAction<any>) => {

      const data = action.payload.doc.data();


      console.log({data: data});
      return {
        type: `[Buddies] ${action.type}`,
        buddy: {
          buddyStatus: data.buddyStatus,
          uid: data.uid,
          // this is the issue right here
          // userRef: data.userRef
        }
      };
    })
  ));

如果没有引用字段，好友会被正确处理，但对好友的访问对于显示至关重要:在线状态、获取头像 url 等。

我设法同步检索某个用户的好友，但这并不是真正可行的方法，因为我想将更改器包含在用户状态等中。

我对 ngrx/angular 和 typescript 还很陌生，这基本上是我使用这些工具/框架/概念的第一个大项目。

我检查了其他答案，但大多数答案都可以同步解析引用，但这并不是真正的目标，因为需要对用户信息进行观察。

Answer 1

给你，我已经使用了一种方法来解决 ngrx 中的此类问题。

当你对好友进行更改时，不要监听好友的更改。将该监听器作为一个单独的监听器。然后在触发任何操作时对好友执行任何查询。无需担心会立即发生变化。始终从 firestore 获取数据并更新本地存储。

 createEffect(() => this.actions$.pipe(
    ofType(BuddiesActions.query),
    switchMap(() => {
      return this.uid$.pipe(
        switchMap(uid => {
          return this.firestoreService.buddyQuery(uid)
        })
      )
    })

保持你的查询相关效果不变，并删除那里不需要的好友日期获取调用，这些调用会获取好友数据。

然后你需要引入一些像'listen on buddy changes'这样的 Action 来监听数据库的变化。

 createEffect(() => this.actions$.pipe(
    ofType(BuddiesActions.Listen_ON_BUDDY_CHANGES),
    switchMap(() => {
   // add listner to firestore and trigger that observable when any data changes happend

  const data = action.payload.doc.data();

  console.log({data: data});
  return {
    type: `[Buddies] ${action.type}`,
    buddy: {
      buddyStatus: data.buddyStatus,
      uid: data.uid,
    }
  };

这应该是一个监听 firestore 中所有变化的可观察对象。当那里发生任何更改时，然后直接使用该数据更新本地 ngrx 存储。如您所料，这是一个异步操作。确保在初始步骤触发“监听好友更改”操作。