Как остановить Firebase Listener при переходе на другой экран?

Question

Я использую Firebase Listener с методом on в действии 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 или любых других?

Answer 1

, если вы добавляете слушателя в редуксе, будет похоже на

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 в магазине резервов

В то время, когда компонент размонтируется, в componentWillUnmount Вы можете отправить другое действие и Вы можете удалить слушателя по firebase.database().ref('myRef').off('value', callback) в это время вы можете получить доступ к переменной myRef из своего магазина приставок