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

标签 reactjs asynchronous redux flux

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

在 angularjs 应用程序中,我等待在显示路由之前加载路由时的 promise 解析。所有的 promise 及其状态都存储在进行 api 调用的服务中。一些 api 调用需要等待特定的待处理 api 调用,以便我获得最新的数据。

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

这如何转化为react/redux?

在 redux 中,我基本上需要一个操作,该操作在分派(dispatch)时将确保在从 api 获取数据之前等待任何所需的挂起操作。这与链接异步操作或调用几个和等待两者解决,因为在这些情况下您会说“调用这些操作”。我需要一些“调用此操作,但首先等待任何先前调用的依赖项解析”的内容。我知道你可以在 redux 状态下存储 isFetching 标志或类似的东西,但是你必须观察这些值,而我不知道如何做到这一点。

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

我的问题如下:

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

  2. redux 操作是否可能需要等待先前分派(dispatch)的操作来解决反模式或不良实践?我没有看到很多其他人遇到与我相同的问题,这可能表明我正在以一种有趣的方式做某事。

  3. 如果我的结构一切正常,那么编写自己的中间件来跟踪等待操作并在它们准备好时分派(dispatch)它们是否存在任何问题?我问的原因是这两个中间件都没有将等待操作列表保留在 redux 存储中,因此从技术上讲,应用程序状态不会注意到该列表。我不想以后因为东西可以在商店里而把东西从商店里拿出来而造成问题。

感谢所有的意见,谢谢大家!

最佳答案

我在react/redux不和谐 channel 上得到了帮助,并想出了这个:

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

关于reactjs - 如何调度等待其他异步操作完成的 redux 操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50691115/

相关文章:

reactjs - React,Typescript - 找不到模块...或其相应的类型声明

database - Scala 异步数据库调用

javascript - 无法在 $.post 回调中设置作用域变量

javascript - 无法在React Native中使用redux连接多个组件

javascript - 在 ReactJs 中创建动态 svg 图标组件

javascript - 图片路径返回404错误(Not Found)

python - 有没有办法从Python调用Rust的异步接口(interface)?

javascript - 警告 : Failed propType: Invalid prop 'component' supplied to 'route'

react-native - react native 路由器通量 : TypeError: undefined is not a function (evaluating 'addListener' )

javascript - ReactJS 通过 onClick 函数传递 key