当我转到另一个屏幕时,如何停止Firebase Listener?

时间:2019-06-06 21:57:36

标签: reactjs firebase react-native firebase-realtime-database

我在Redux动作中使用带有on方法的Firebase Listener,以在屏幕中获取数据。这是我下面的redux操作代码:

export const getSelectedProjectDetail = (groupUid, projectUid) => dispatch => {
  dispatch({
    type: GET_SELECTED_PROJECT_DETAIL_START,
  });

  firebase.database().ref('/groups/' + groupUid + '/projects/' + projectUid).on('value', (mainSnap) => {
    firebase
    .database()
    .ref('/users/' + mainSnap.val().creator.uid)
    .on('value', snapshot => {
      const messagesList = _.map(mainSnap.val().messages, (val, uid) => ({ ...val, uid }));

      for (let index = 0; index < messagesList.length; index++) {
        // eslint-disable-next-line no-loop-func
        firebase.database().ref('/users/' + messagesList[index].author.uid).on('value', function (childSnapshot) {
          messagesList[index] = {
            ...messagesList[index],
            author: {
              ...messagesList[index].author,
              name: childSnapshot.val().displayName,
              email: childSnapshot.val().email,
            },
          };
          if (index === messagesList.length - 1) {
            const selectedProjectDetail = {
              ...mainSnap.val(),
              creator: { ...mainSnap.val().creator, name: snapshot.val().displayName },
              messages: _.reverse(messagesList),
            };
            dispatch({
              type: GET_SELECTED_PROJECT_DETAIL_SUCCESS,
              payload: selectedProjectDetail,
            });
            NavigationService.navigate('ProjectDetail');
          }
        });
      }
    });
  });
};

问题是,当我在另一个屏幕上时,如果数据库中有更改,则屏幕会转到带有侦听器的屏幕上。我认为,当我关闭屏幕时,我需要停止听众。我该如何使用Firebase功能或其他功能停止它们?

1 个答案:

答案 0 :(得分:0)

如果您在redux中添加侦听器,请像

const myRef = '/users/' + messagesList[index].author.uid



firebase.database().ref(myRef).on('value',
  function (childSnapshot) {
      messagesList[index] = {
          ...messagesList[index],
             author: {
             ...messagesList[index].author,
             name: childSnapshot.val().displayName,
             email: childSnapshot.val().email,
            },
        };

并且您需要将myRef保存在redux存储上

在组件卸载时,在componentWillUnmount中 您可以调度其他操作, 您可以通过以下方式删除监听器 firebase.database().ref('myRef').off('value', callback) 那时,您可以从Redux商店中访问myRef变量