取消订阅firestore（...）。当涉及dispatch（）时，onSnapshot（）不起作用

Question

主要目标：在注销用户之前，正确取消所有firestore-listener的订阅，以防止泄漏。

涉及的库：react，react-native，redux，redux-thunk和react-native-firebase。

问题：取消订阅firestore（...）。当涉及dispatch（）时，onSnapshot（）不起作用。] >>

我使用onSnapshot获取数据，并将取消订阅功能返回给我在用户注销时调用的调用方组件。奇怪的是，UNSUBSCRIBE仅在不造成任何干扰时才起作用...

我有一个连接到redux存储的组件（component.js），并不断获取某些用户数据，如下所示：

componentDidMount() {
  this.unsubscribe = this.props.userFetch(); // userFetch is an action creator in actions.js
}
在actions.js中

import firestore from '@react-native-firebase/firestore';
import auth from '@react-native-firebase/auth';

export const userFetch = () => {
  return dispatch => {
    const unsubscribe = firestore()
      .doc(`users/${auth().currentUser.uid}`)
      .onSnapshot({
        error: e => console.warn('ERROR IN FETCH: ', e),
        next: SnapshotUser => {
          console.log('User: ', SnapshotUser.data());
          // Will dispatch action below
        },
      });
    return unsubscribe;
  };
};
请注意，先前的动作创建者目前没有DISPATCH。

如果我在component.js中调用取消订阅，则Firestore onSnapshot侦听器将被正确取消订阅，如下所示：

onLogoutPressed = () => {
  this.unsubscribe(); // <-- HERE it works (for the moment...)
  auth()
    .signOut()
    .then(() => {
      console.log('user has been signout');
    })
    .catch(error => {
      console.log('Error: ',error);
    });
};
现在，如果我想使用分派将获取的数据发送到redux存储，我将这样的分派添加到actions.js中

export const userFetch = () => {
  return dispatch => {
    const unsubscribe = firestore()
      .doc(`users/${auth().currentUser.uid}`)
      .onSnapshot({
        error: e => console.warn('ERROR IN FETCH: ', e),
        next: SnapshotUser => {
          console.log('User: ', SnapshotUser.data());
          // Will dispatch action below
          dispatch({   // <--------------------------------- HERE
            type: 'USER_FETCH_SUCCESS',
            payload: SnapshotUser.data(),
          });
        },
      });
    return unsubscribe;
  };
};
但是突然在我的component.js中，this.unsubscribe在注销时不再起作用。

[我发现那个人也这样做，但是在React：here上为他工作。该其他人提供的解决方案基本上也为same。

由于redux-thunk，firestore-onsnapshot-listener似乎包装在某些调度调用中，我现在不明白它的行为。

有人有什么解决方法吗？

主要目标：在注销用户之前正确退订所有Firestore-Listener，以防止泄漏。涉及的库：react，react-native，redux，redux-thunk和react-native-firebase。 ...

Answer 1

好的，在Reactiflux上@ioss的帮助下解决了。由于某些奇怪的原因，componentDidMount被挂载了两次，创建了多个侦听器，因此仅卸载一个侦听器是不够的。通过在componentWillUnmount（）中的unsubscribe（）上添加另一个运行来解决该问题。