如何在 Redux Action 中分离 Firestore 侦听器

IT技术 reactjs firebase google-cloud-firestore react-redux
2021-05-08 06:15:19

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

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

我面临的问题是我正在使用 Redux（并componentDidMount/componentWillUnmount分别附加/分离）。

我见过使用的模式在这里看到，其中回调存储在本地数据变量（虽然在Vue公司），所以我试图调度回调本身的Redux的商店，但它不接受它。

代码如下：

注意：我已经尝试根据上面共享的链接将真/假布尔值作为参数添加getRoomActivity到调用中unlisten()，此时 - 我不知所措。

// 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);
  }
1个回答

当您将 thunk 与 一起使用时，thunkdispatch()返回的值将沿链向上传递。

例如

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

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

因此，我们可以将相同的 trait 应用到您返回的 thunk，getRoomActivity(someRoom)以便onSnapshot的 unsubscribe 函数被传递回调用者。

// 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();
}
其它你可能感兴趣的问题
上一篇React - 检查选项卡或浏览器何时关闭，但不是在刷新时 下一篇在 react-native-flux-router 中传递props