Redux 在这种情况下,如何避免使用效果中的无限循环

Redux 在这种情况下,如何避免使用效果中的无限循环,redux,react-redux,redux-thunk,use-effect,Redux,React Redux,Redux Thunk,Use Effect,我正在构建一个redux应用程序,我需要数据库中的数据在加载特定组件后保存在redux存储中。但是,每次用户添加新数据时,我都需要这样做。目前,我可以通过向我的效果传递一个空的依赖关系数组来获取要加载的数据,但这会阻止数据根据用户操作进行更新,您必须刷新页面才能再次运行效果。但是,如果我将数据添加到依赖项数组中,这将导致无限循环,因为其效果将改变依赖项数组中正在监视的数据。下面是我的代码的当前流程 useEffect从MarkerList组件发送操作。 Redux操作从Firestore检索数据

我正在构建一个redux应用程序,我需要数据库中的数据在加载特定组件后保存在redux存储中。但是,每次用户添加新数据时,我都需要这样做。目前,我可以通过向我的效果传递一个空的依赖关系数组来获取要加载的数据,但这会阻止数据根据用户操作进行更新,您必须刷新页面才能再次运行效果。但是,如果我将数据添加到依赖项数组中,这将导致无限循环,因为其效果将改变依赖项数组中正在监视的数据。下面是我的代码的当前流程

useEffect从MarkerList组件发送操作。 Redux操作从Firestore检索数据,并将操作分派给reducer。 Reducer使用Firestore中的有效负载更新状态。 我不知道如何正确地使我的效果在每次添加新标记时触发。如果由于无限循环,我无法跟踪依赖关系数组中的数据,我该如何监视数据的更改并重新触发效果

我曾尝试设置firestore onSnapshot侦听器,但在redux中效果不佳。我已经尝试使用一个空的依赖数组,如前所述,它在第一次正确地获取数据,但在添加新数据时不会在不刷新页面的情况下更新我的ui。显然,跟踪依赖项数组中的标记会导致无限循环

成分效应

useEffect(() => {
  const loadMarkers = async () => {
    props.loadMarkers();
  };
  loadMarkers();
}, []);
重演行动

export function loadMarkers() {
  let markers = [];
  return dispatch => {
    getMarkersFromDB().then(snap => {
      snap.forEach(doc => {
        markers.push(doc.data());
      });
      dispatch({
        type: constants.LOAD_MARKERS,
        payload: markers
      });
    });
  };
}

我想我明白了。我一心想弄明白如何让效果处理所有的数据操作,我没有想到从向数据库添加标记的函数中再次调用loadMarkers。CreateMarker组件是独立的,所以我只是将其连接到redux,并将loadMarkers操作传递给它。现在,我的MarkerList仍然在挂载时加载初始数据,但是每当用户创建新的标记时,CreateMarker组件也会分派loadMarkers操作。现在一切正常


谢谢Azundo,通过与您的交谈,我意识到我有点近视。

还有什么其他原因会触发loadMarkers操作被调度?在组件安装时启动LoadMarker对我来说是有意义的,但我不清楚还有什么会表明有新的标记。你可以在一个时间间隔内轮询并调用loadMarkers,或者当你知道有一个新的loadMarkers时,你需要一些侦听器来触发loadMarkers。除此之外,目前没有任何东西会触发loadMarkers。用户可以选择添加放置在ui上并存储在DB中的新标记。我希望在用户提交新的标记创建后,新标记立即出现在ui上。但是,我不能将markers数组作为依赖项,因为这会触发无限循环。我不知道如何用reduxYep实现侦听器,听起来不错!将建议或在componentDidMount中设置onSnapshot侦听器,该侦听器在每个快照上调度LOAD_MARKERS操作-它将在首次设置时运行一次,然后在db更改时再次运行。例如,您可以在根组件上执行此操作,然后如果当前用户以外的其他人或事物更改了标记集合中的值,您也会得到更新。