firebase - 使用 ngrx 找出 firestore

Question

我似乎陷入了困境，因为没有太多关于如何将 firestore 与 ngrx 一起使用的指南或教程。

假设我们有组织列表，所有这些都将在 2 个组件中使用，即 componantA 和 componentB。

1. 我可以制作一个效果，它采用 LOAD_ACTION 来合并可观察到的集合值更改，并将其映射到每个组件的 LOAD_ACTION_SUCCESS。

现在，每次发生更改时，都会调用 LOAD_ACTION_SUCCESS，将我们的数据保存到每个存储状态。

但这需要组件首先调度 LOAD_ACTION，这对于 REAL_TIME_DATA 来说可能有点错误，因为之后它将继续更新。即使不使用。

我可以在组件本身中连接可观察值变化的服务(与 LOAD_ACTION 相同)。它不会保存状态，但 Firebase observable 有点像 Store(只要它没有保存在客户端上)，所以如果它已经获取了数据，那么它就已经在那里了。

不再使用 2 个状态数据副本。

这导致我:

它是否应该有一个用于存储来自服务的“集合”的存储，两个组件都从中获取数据，例如在使用该状态的所有地方都没有该状态的多个副本。

任何帮助我进一步发展的信息或指导都是值得赞赏的，我似乎陷入了这样一个微不足道的问题，显然我可以继续编码，但更希望它是正确的。

当涉及到 ngrx 时，处理实时数据似乎让我感到困惑。

示例也将受到赞赏。

Answer 1

我刚刚写了一点blog关于这个问题，我想比较连接 Firestore 和 NGRX 的不同方法。

基本上，您可以将 valueChanges() 操作映射到您的商店操作，并且商店将保持同步。我使用了一个效果，但这也可以在服务中。

  @Effect()
  getData$ = this.dataDb.getFakeDataStateChanges().pipe(
    mergeMap(actions => actions),
    map(action => {
      return {
        type: `[FirstData] ${action.type}`,
        payload: { id: action.payload.doc.id, ...action.payload.doc.data() }
      };
    })
  );

操作就像

export enum FirstActionTypes {
  FIRST_DATA_ADDED = '[FirstData] added',
  FIRST_DATA_MODIFIED = '[FirstData] modified',
  FIRST_DATA_REMOVED = '[FirstData] removed'
}

reducer 处理数据

export function firstReducer(state: State = initialState, action: FirstAction) {
  switch (action.type) {
    case FirstActionTypes.FIRST_DATA_ADDED: 
      return firstAdapter.addOne(action.payload, state);

    case FirstActionTypes.FIRST_DATA_MODIFIED:
      return firstAdapter.updateOne(
      {
        id: action.payload.id,
        changes: action.payload
      },
      state
    );

    case FirstActionTypes.FIRST_DATA_REMOVED:
      return firstAdapter.removeOne(action.payload.id, state);

    default: {
      return state;
    }
  }
}