在onAuthStateChanged侦听器内分离Firestore侦听器

Question

我想我知道如何通过返回监听器来分离它，但在这种特定的情况下，我不确定最好的方法。

我有一个React组件，在那里我用onAuthStateChanged订阅auth更改。

如果它返回一个用户：我会在Firestore中创建一个该用户数据的侦听器。

useEffect(() => {
return firebase.auth.onAuthStateChanged(user => {
if (user) {
const unsubscribeFirestore = firebase.db
.collection('users')
.doc(user.uid)
.onSnapshot(doc => {
setUser({ user, ...doc.data() })
})
} else {
setUser({ user })
}
})
}, [firebase])

我应该在哪里以及如何返回unsubscribeFirestore以分离它？

Answer 1

您的代码似乎已经从firebase.auth.onAuthStateChanged隐式返回了unsubscribe回调，但您可以通过在本地范围的变量中捕获返回的unsubscribe函数来使其更加必要。

您可以在要在useEffect清理函数中访问的React ref中捕获内部快照取消订阅。

const snapShotUnsubscribeRef = useRef();
useEffect(() => {
const unsubscribe = firebase.auth.onAuthStateChanged(user => {
if (user) {
snapShotUnsubscribeRef.current = firebase.db
.collection('users')
.doc(user.uid)
.onSnapshot(doc => {
setUser({ user, ...doc.data() })
})
} else {
setUser({ user })
}
});
return () => {
snapShotUnsubscribeRef.current?.();
// Or if you can't use Optional Chaining:
//   snapShotUnsubscribeRef.current && snapShotUnsubscribeRef.current()
unsubscribe();
};
}, [firebase]);

Answer 2

以下是Firebase官方文档的链接，了解更多详细信息。

德鲁给出的答案是正确的。需要补充的是，我认为您不需要担心嵌套的第二个侦听器，因为if子句正在检查是否有用户，如果没有，那么第二个监听器无论如何都不适用。您可以尝试这两个用例来测试它是否有效。

这里有一个关于这个用例的链接。所以这应该有效。