Question

我似乎陷入了困境，因为没有很多关于如何在ngrx上使用firestore的指南或教程。

假设我们有组织列表，所有这些组织将用于2个组件，componantA和componentB。

我可以产生一种效果，它采用LOAD_ACTION合并集合值changechanges observable，并将其映射到每个组件的LOAD_ACTION_SUCCESS。

现在每次更改时，都会调用LOAD_ACTION_SUCCESS，将数据保存到每个商店状态。

但是这需要组件调度LOAD_ACTION开始，这对于REAL_TIME_DATA来说可能看起来有些错误，因为它会在之后继续更新。即使没有使用。

我可以在组件本身中连接值可更改的服务（与LOAD_ACTION相同）。它不会保存状态，但Firebase observable有点像商店（只要它没有保存在客户端上），所以如果它已经获得了数据，它就已经存在了。

不再使用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;
    }
  }
}

使用ngrx

1 个答案: