如何使用NgRx Entity实现本地Store与Firestore的同步？

嘿，我完全懂你现在碰到的困扰——用NgRx Entity的upsertMany方法确实没法自动同步Firestore中已删除的条目，因为它的逻辑只覆盖新增或更新数据，不会处理那些不在新返回集合里的旧数据，这就是为什么用户得刷新才能看到删除效果。

问题根源 #

upsertMany的核心逻辑是遍历传入的每个数据项：如果本地Store里已有该ID的条目就更新，没有则添加，但它不会对比现有集合和新集合的差异，自然不会主动移除那些Firestore已经删掉的条目。

解决方案：改用setMany方法 #

NgRx Entity的setMany方法正好能解决这个问题——它会直接用传入的数组替换当前Entity集合中的所有数据，这样Firestore返回的集合里没有的条目，本地Store里也会同步移除，无需用户刷新。

修改你的Reducer代码如下：

on(fromBatch.loadBatchesSuccess, (state: any, action: any) => (
  userAdapter.setMany(action.users, {
    ...state,
    loaded: true,
    loading: false
  })
))

额外说明 #

• setMany只会替换Entity管理的entities和ids部分，你State里的其他属性（比如loaded、loading）会通过扩展运算符...state保留下来，不用担心本地状态丢失。
• 如果你的场景里需要同时处理本地临时修改（比如未同步到Firestore的草稿），可以结合selectAll先获取本地现有数据，再和Firestore返回的数据做合并处理，但如果是纯同步场景，直接用setMany就足够简洁有效。

内容的提问来源于stack exchange，提问作者mattc19