Как отключить слушателя FireStore в Redux Action

Question

Я использую Redux + Firestore, чтобы получить данные и заполнить мой магазин. Я использую .onSnapshot для прослушивания данных в данной коллекции. Что я не могу сделать, так это отсоединить слушателя, когда я закончу.

Я прочитал документы Firestore и понимаю, что для отключения слушателя вам нужно сохранить обратный вызов (.onSnapshot) как переменную, а затем вызвать эту переменную для отсоединения.

Проблема, с которой я сталкиваюсь, заключается в том, что я использую Redux (и присоединяю / отсоединяю в componentDidMount/componentWillUnmount соответственно).

Я видел используемый шаблон см. здесь (хотя и в Vue), где обратный вызов хранится в локальной переменной данных, поэтому я попытался отправить сам обратный вызов в хранилище Redux, но он не получил его.

Код ниже:

ПРИМЕЧАНИЕ. Я пытался добавить значения true / false bool в качестве параметров в getRoomActivity для вызова unlisten() на основе ссылки, указанной выше, на данный момент - I ' м в недоумении.

// group.js (redux action file)
export const getRoomActivity = (roomId) => (dispatch) => {
  const unlisten = roomCollection
    .where('room', '==', roomId)
    .onSnapshot((querySnapshot) => {
    const roomItems = [];
    querySnapshot.forEach((doc) => {
        roomItems.push(doc.data());
    });
  dispatch({ type: GET_ROOM_ACTIVITY, payload: roomItems });
  });
};

//Room.js (component)
componentDidMount() {
    this.props.getRoomActivity(this.props.roomId);
  }

  componentWillUnmount() {
    this.props.getRoomActivity(this.props.roomId);
  }

Answer 1

Когда вы используете thunk с dispatch(), значение, возвращаемое thunk, передается по цепочке.

Например,

function delayedHello(dispatch) {
  setTimeout(() => dispatch({type:'delayed-hello', payload:'hello'}), 1000);
  return '1s';
}

let val = dispatch(delayedHello);
console.log(val) // logs '1s'

Таким образом, мы можем применить эту же черту к спасибо, что вы возвращаетесь из getRoomActivity(someRoom), так что функция отмены подписки onSnapshot передается вызывающей стороне.

// group.js (redux action file)
export const getRoomActivity = (roomId) => (dispatch) => {
  return roomCollection // CHANGED: Returned the unsubscribe function
    .where('room', '==', roomId)
    .onSnapshot((querySnapshot) => {
      const roomItems = [];
      querySnapshot.forEach((doc) => {
          roomItems.push(doc.data());
      });
      dispatch({ type: GET_ROOM_ACTIVITY, payload: roomItems });
    });
};

//Room.js (component)
componentDidMount() {
  this.unsubscribe = dispatch(this.props.getRoomActivity(this.props.roomId));
}

componentWillUnmount() {
  this.unsubscribe();
}