如何在Redux Action中分离Firestore监听器 [英] How to detach firestore listener in Redux Action

问题描述

我正在使用Redux + Firestore来获取数据并填充我的商店.我正在使用 .onSnapshot 侦听给定集合中的数据.我无法执行的操作是在完成操作后分离侦听器.

I am using Redux+Firestore to grab data and populate my store. I'm using .onSnapshot to listen to data in a given collection. What I'm not able to do is detach the listener once I am finished.

我已经阅读了Firestore文档，并且了解到，要分离侦听器，您需要将回调( .onSnapshot )存储为变量，然后调用该变量以分离.

I've read the Firestore docs and understand that in order to detach the listener you need to store the callback (.onSnapshot) as a variable, and then call that variable to detach.

我面临的问题是我正在使用Redux(并分别在 componentDidMount/componentWillUnmount 中附加/分离).

The issue I'm facing with this is that I'm using Redux (and attaching/detaching in componentDidMount/componentWillUnmount respectively).

我看过使用过的模式请参阅此处(尽管在Vue中)，回调函数存储在本地数据变量中，所以我尝试将回调函数本身分派到Redux存储，但没有收到.

I've seen a pattern used see here (albeit in Vue) where the callback is stored in a local data variable, so I tried dispatching the callback itself to the Redux store but it doesn't receive it.

下面的代码:

注意:我已经尝试根据上面共享的链接在 getRoomActivity 中添加true/false bool作为参数，以调用 unlisten()，此时-我是m不知所措.

NOTE: I've tried adding true/false bool's as parameters in getRoomActivity to call unlisten() based on the link shared above, at this point - I'm at a loss.

// 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);
  }

推荐答案

当将thunk与 dispatch()一起使用时，thunk返回的值将沿链传递.

When you use a thunk with dispatch(), the value returned by the thunk is passed up the chain.

例如

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

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

因此，我们可以将相同的特征应用于从 getRoomActivity(someRoom)返回的thunk，以便将 onSnapshot 的取消订阅功能传递回调用方./p>

So we can apply this same trait to the thunk you return from getRoomActivity(someRoom) so that the onSnapshot's unsubscribe function is passed back to the caller.

// 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();
}

这篇关于如何在Redux Action中分离Firestore监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！