一次删除多个 Firebase 侦听器

Question

我正在创建一个带有 react native 的应用程序，并面临一个问题，即我在整个应用程序中创建了多个 firebase 监听器，准确地说是在不同屏幕上创建监听器，以及监听 firebase-database 和其他监听 firestore 的监听器。

我想要完成的是通过一次呼叫或在必要时使用多行但尽可能紧凑的方式杀死所有这些听众 - 以及从听众甚至没有运行的完全不同的屏幕，这很重要。

我知道可以使用 Firebase.goOffline()，但这只会使我与 Firebase 断开连接 - 它不会阻止听众。我一再goOnline()，听众都回来了。

我还没有从谷歌等找到任何解决这个问题的方法，这就是为什么我现在尝试在这里提问，如果有人知道如何处理这种行为，我会很高兴。

以下代码示例为您提供了我在应用程序中包含的侦听器，它们位于同一屏幕中，但我在其他屏幕中几乎相同。

数据库监听器：

const statusListener = () => {
        var partnerRef = firebase.database().ref(`users/${partnerId}/onlineState`);
        partnerRef.on('value', function(snapshot){
            setPartnerState(snapshot.val())
        })
    };

Firestore 监听器：（这个很长，那只是因为我过滤了从监听器中检索到的文档）

const loadnewmessages = () =>{ firebase.firestore().collection("chatrooms").doc(`${chatId}`).collection(`${chatId}`).orderBy("timestamp").limit(50).onSnapshot((snapshot)  => {
            var newmessages = [];
            var deletedmesssages = [];
            snapshot.docChanges().forEach((change) => {
                if(change.type  === "added"){
                    newmessages.push({
                        counter: change.doc.data().counter,
                        sender: change.doc.data().sender,
                        timestamp: change.doc.data().timestamp.toString(),
                        value: change.doc.data().value,
                        displayedTime: new Date(change.doc.data().displayedTime)
                    })
                };
                if(change.type  === "removed"){
                    deletedmesssages.push({
                        counter: change.doc.data().counter,
                        sender: change.doc.data().sender,
                        timestamp: change.doc.data().timestamp.toString(),
                        value: change.doc.data().value,
                        displayedTime: new Date(change.doc.data().displayedTime)
                    })
                };

            })
            if(newmessages.length > 0){
                setChatMessages(chatmessages => {
                    return chatmessages.concat(newmessages)
                });
            };
            if(deletedmesssages.length > 0){
                setChatMessages(chatmessages => {
                    var modifythisarray = chatmessages;
                    let index = chatmessages.map(e => e.timestamp).indexOf(`${deletedmesssages[0].timestamp}`);
                    let pasttime = Date.now() - parseInt(modifythisarray[index].timestamp);
                    modifythisarray.splice(index, 1);
                    if(pasttime > 300000){
                        return chatmessages
                    }else{
                        return modifythisarray
                    }
                });
                setRefreshFlatList(refreshFlatlist => {
                    //console.log("Aktueller Status von refresher: ", refreshFlatlist);
                    return !refreshFlatlist
                });
            }
            newmessages = [];
            deletedmesssages = [];
        })
    };

这两个监听器都在 useEffect 钩子中调用，就像这样：（useEffect 末尾带有空括号确保这些监听器只被调用一次而不是多次。）

useEffect(() => {
        loadnewmessages();
        statusListener();
    }, []); 

Answer 1

所有订阅函数都返回取消订阅函数

const unSubscriptions = [];

... Where you subscribe
const unSub = document.onSnapshot(listener);
subscriptions.push(unSub);

... Where you unsubscribe all
function unSubAll () {
   unSubscriptions.forEach((unSub) => unSub());
   // Clear the array
   unSubscriptions.length = 0;
}