Reactjs 如何将Firestore实时更新（onSnapshot）与redux observable/rxjs一起使用？

我能够通过正常的Firestore查询设置redux observable

export const getStatementsEpic = (action$, store) => {
  return action$.ofType(GET_STATEMENTS)
    .filter(() => {
      const state = store.getState()
      return state.auth.user
    })
    .mergeMap(() => {
      console.log('action', store.getState().auth.user.uid)
      const db = firebase.firestore()
      db.settings({ timestampsInSnapshots: true })
      const query = db.collection('users')
        .doc(store.getState().auth.user.uid)
        .collection('statements')
        .orderBy('uploadedOn', 'desc')
        .limit(50)
      return query.get().then(snapshot => {
        console.log('Should have gotten snapshot')
        return getStatementsSnapshot(snapshot)
      })
    })
}

但我想把它转换成实时的，我试着改变

return query.get().then(snapshot => {

到

---

但它不起作用。。。我想这不是一个承诺？我如何解决这个问题

没错，

onSnapshot

方法不会返回承诺。相反，它返回一个函数，可用于取消订阅更改通知。在调用unsubscribe函数之前，每次文档更改时都会调用传递给

onSnapshot

方法的回调。（指示也将使用当前文档内容立即调用回调。）

多次使用回调函数的函数（如

onSnapshot

）可以使用

fromEventPattern

函数“转换”为可观察函数

fromEventPattern

采用两个函数作为参数。您传递的第一个函数需要调用

onSnapshot

，将RxJS定义的处理程序作为回调传递给它。您传递的第二个函数需要调用由

onSnapshot

返回的unsubscribe函数。RxJS将在订阅observable时调用第一个函数（即在epic中使用它）。当您取消订阅observable时，RxJS将调用第二个函数

下面是一个代码更新示例，它使用了

fromEventPattern

和新的RxJS管道：

export const getStatementsEpic=（action$，state$）=>action$.pipe(
类型（GET_语句），
withLatestFrom（州$），
过滤器（（[action，state]）=>state.auth.user），
合并映射（（[操作，状态]）=>{
const db=firebase.firestore（）
db.settings（{timestampsInSnapshots:true}）
从事件模式返回(
handler=>db.collection（'users'））
.doc（state.auth.user.uid）
.collection（'语句'）
.orderBy（'uploadedOn'，'desc'）
.限额（50）
.onSnapshot（处理程序），
（处理程序，取消订阅）=>取消订阅（），
).烟斗(
映射（getStatementsSnapshot），
takeUntil（动作$.pipe）(
类型（停止获取语句），
)),
)
}),
)

请注意，我在快照流中引入了

takeUntil

。如果没有它（或类似的东西），快照流将永远不会结束。另一个可能的更改是使用

switchMap

而不是

mergeMap

。如何取消订阅取决于您的用例

return query.onSnapshot(snapshot => {