如何发送等待其他异步操作完成的redux操作?

时间:2018-06-05 02:20:11

标签: reactjs asynchronous redux flux

将项目管理应用从 angularjs 迁移 reactjs

在angularjs应用程序中,我等待承诺在路线加载之前解决。所有承诺及其状态都存储在进行api调用的服务中。一些api调用需要等待特定的挂起api调用,以便获取最新的数据。

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

这如何转化为react / redux?

在redux中,我基本上需要一个动作,当被调度时,确保在从api获取数据之前等待任何所需的待处理动作。这与链接异步动作或调用一对动作不同等待两者都解决,因为在那些情况下你说的是“打电话给这些行动”。我需要一些说“调用此操作,但等待任何先前调用的依赖项首先解决”的内容。我知道你可以在redux状态下存储一个isFetching标志或类似的东西,但是你必须看那些值,我不知道该怎么做。

我遇到的两个解决方案是redux中间件:redux-wait-for-actionredux-when。它们基本上保留了已分派但正等待解决的其他一些操作类型的操作列表。他们检查所有操作,看看列表中的一个是否已经解决,如果他们找到一个,那么他们会调度正在等待的操作。

我的问题如下:

  1. 这是流量,某些路由api调用等待挂起的api调用(可能来自以前的路由)没关系,还是有更好的方法来构建我的应用程序,所以我不依赖于分组的解析?

  2. 还是可能需要等待先前调度的操作来解决反模式或不良操作的redux操作?我没有看到很多其他人遇到同样的问题,这可能表明我正在以一种有趣的方式做事。

  3. 如果我的结构一切正常,那么编写我自己的中间件时会出现问题,这些中间件会跟踪等待操作并在准备好后调度它们吗?我问的原因是两个中间件都没有将等待动作列表保存在redux存储中,因此技术上应用程序状态将忽略此列表。我不希望以后通过商店外面的商品来解决问题。

  4. 感谢所有人的所有投入,谢谢你们!

2 个答案:

答案 0 :(得分:1)

我在react / redux不和谐频道上获得了帮助,并提出了这个问题:

  1. 在推送路线更改之前,您应该等待api呼叫解决。这样您就不必跟踪任何未决电话。
  2. 上面看,它不一定是反模式,它不是一个典型的事情,但如果你愿意,你可以这样做,额外的复杂性可能不值得结果。如果在api呼叫解决之前更改路由,则会出现竞争条件。
  3. 最好的方法是在您提到的另外两个之后对中间件进行建模,并跟踪商店中的待处理操作,以便您的商店可以全面了解您的应用程序状态。

答案 1 :(得分:1)

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

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