时间戳

首页 > 解决方案 > 如何取消订阅 Firestore 中的集合更改

reactjs - 如何取消订阅 Firestore 中的集合更改

问题描述

我正在尝试取消订阅 Firestore 中的更改侦听器，但无法使其正常工作。

根据 Firebase 文档，您需要调用 onSnapshot() 方法来停止监听。我错过了什么？

https://firebase.google.com/docs/firestore/query-data/listen

这是调用订阅/取消订阅操作创建者的钩子：

useEffect(() => {
  subscribe()
  return () => {
    unsubscribe()
  }
}, [])

以下是订阅/取消订阅操作创建者：

export const subscribe = () => {
  return (dispatch) => {    
    const items = db.collection('items')

    items.onSnapshot((snapshot) => {
      const data = snapshot.docs.map((item) =>  item.data())

      dispatch({ type: 'DO_SOMETHING', payload: data })
    })
  }
}

export const unsubscribe = () => {
  const items = db.collection('items')

  const unsubscribe = () => items.onSnapshot(() => {})

  unsubscribe()
}

谢谢！

标签： reactjsfirebasereduxgoogle-cloud-firestore

解决方案

在您的unsubscribe实际示例中，您创建另一个侦听器并立即取消订阅它，因此它不会影响正在运行的侦听器subscribe。

export const subscribe = (setUnsubscribe) => {
  return (dispatch) => {    
    const items = db.collection('items')

    const unsubscribe = items.onSnapshot((snapshot) => {
      const data = snapshot.docs.map((item) =>  item.data())
      dispatch({ type: 'DO_SOMETHING', payload: data })
    });

    setUnsubscribe(unsubcsribe);
  }
}


// Component

useEffect(() => {
  let unsubscribe = () => {};
  subscribe((func) => { unsubscribe = func });
  return () => unsubscribe();
}, [])

推荐阅读