用ngrx找出firestore

问题描述：

我似乎被困在这里，因为没有很多关于如何使用firestore和ngrx的指南或教程。假设我们有组织清单，所有这些将被用于2个组分，组分和组分B中。用ngrx找出firestore

我可以做一个效果，它需要一个LOAD_ACTION来合并集合valuechanges observable，并且还将它映射到每个组件的LOAD_ACTION_SUCCESS。

现在每当有变化，LOAD_ACTION_SUCCESS都会被调用，将我们的数据保存到它们的每个存储状态。

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

我可以在组件本身中连接valuechanges的服务可观察值（与LOAD_ACTION相同）。它不会保存状态，但Firebase可观察点就像一个Store（只要它不保存在客户端），所以如果它已经获得了数据，它就已经存在了。

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

这使我：

如果它也许有来自服务，这两个组件从，获取数据“收集”商店如没有多在任何地方使用该状态的副本。

任何信息或指导，以帮助我得到进一步赞赏，我似乎被困在这样一个小问题，显然我可以保持编码，而是希望它是正确的。

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

示例也将被赞赏。

开始=“3”>

答

我刚刚写了一个关于这个问题的小小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' 
}

和减速器处理数据

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找出firestore

相关推荐