Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何调度等待其他异步操作完成的redux操作?_Reactjs_Asynchronous_Redux_Flux - Fatal编程技术网

Reactjs 如何调度等待其他异步操作完成的redux操作?

Reactjs 如何调度等待其他异步操作完成的redux操作?,reactjs,asynchronous,redux,flux,Reactjs,Asynchronous,Redux,Flux,我正在将一个项目管理应用程序从angularjs迁移到reactjs 在angularjs应用程序中,我等待承诺在路由加载时解析,然后再显示它。所有承诺及其状态都存储在进行api调用的服务中。一些api调用需要等待特定的挂起api调用,以便获取最新的数据 例如:如果用户添加新项目,则会自动将其推送到项目列表路径。在项目列表路由中,进行api调用以获取项目列表,此api调用在调用列表之前等待添加新项目成功。如果我们不等待新项目完成添加,那么我们将有一个没有新项目的旧项目列表 这如何转化为反应/re

我正在将一个项目管理应用程序从angularjs迁移到reactjs

在angularjs应用程序中,我等待承诺在路由加载时解析,然后再显示它。所有承诺及其状态都存储在进行api调用的服务中。一些api调用需要等待特定的挂起api调用,以便获取最新的数据

例如:如果用户添加新项目,则会自动将其推送到项目列表路径。在项目列表路由中,进行api调用以获取项目列表,此api调用在调用列表之前等待添加新项目成功。如果我们不等待新项目完成添加,那么我们将有一个没有新项目的旧项目列表

这如何转化为反应/redux?

在redux中,我基本上需要一个动作,当被调度时,该动作将确保在从api获取数据之前等待任何必需的挂起动作。这与链接异步动作或调用一对动作并等待两者解决不同,因为在这些情况下,您说的是“调用这些动作”我需要这样一句话:“调用此操作,但要等待以前调用的依赖项首先得到解决”。我知道你可以在redux状态下存储一个isFetching标志或类似的东西,但是你必须观察这些值,我不知道怎么做

我遇到的两个解决方案是redux中间件:和。它们基本上保留了一个已调度的操作列表,但正在等待解决其他一些操作类型。他们检查所有操作,查看列表中的一个操作是否已解决,如果找到一个操作,则发送等待的操作

我的问题如下:

  • 这是一个流,一些路由api调用等待挂起的api调用(可能来自以前的路由)好吗,或者有更好的方法来构造我的应用程序,使我不依赖于分组解析

  • redux操作是否可能需要等待以前调度的操作来解决反模式或错误做法?我没有看到很多其他人遇到与我相同的问题,这可能表明我正在以一种有趣的方式做某事

  • 如果我的结构一切正常,那么编写自己的中间件来跟踪等待的操作并在它们准备好时发送它们是否有任何问题?我问的原因是这两个中间件都没有将等待操作列表保存在redux商店中,因此从技术上讲,应用程序状态将忽略此列表。我不想在商店里有东西的时候,在商店外面有东西会引起问题


  • 感谢大家的任何意见

    我在react/redux discord频道获得了帮助,并提出了以下建议:

  • 在推动路由更改之前,应该等待api调用解决。这样,您就不必跟踪任何挂起的呼叫
  • 综上所述,这不一定是一种反模式,也不是一种典型的做法,但如果你愿意,你可以这样做,额外的复杂性可能不值得这么做。如果在解决api调用之前更改路由,则会得到竞争条件
  • 最好的方法是按照前面提到的另外两种方法对中间件进行建模,并跟踪应用商店中的挂起操作,这样应用商店就可以完整地了解应用程序状态

  • 如果您的使用承诺像axios一样 我建议使用redux thunk

    export const toDispatch = () =>{
      return dispatch =>{
        axios.get(url).then(()=>{
         dispatch(functionToDispatch())
        })
      }
    }
    

    如果不是复制品,这是非常密切相关的:@ZZBOV密切相关,但不相同。其中一个是“在x秒后调用此操作”,而我的是“在调用新操作时,检查以确保已解决特定的挂起操作”。这两个场景都是异步操作调度。不管怎么说,我没有在这件事上使用我的欺骗锤是有原因的。那只是在一个承诺解决后链接一个要发送的动作。我想要的是,新操作在新操作启动之前检查是否有任何正在进行的从属操作,无论它们在何处或何时被调用。:)