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

Question

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

我有一个React组件，我可以在其中使用onAuthStateChanged订阅身份验证更改。

如果它返回一个用户:我在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函数来使其更加迫切。

您可以在React引用中捕获内部快照取消订阅，以便在useEffect cleanup函数中进行访问。

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官方文档的link，以了解更多详细信息。

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

下面是一个处理此用例的link。所以这应该是可行的。