在React中连接异步数据的最佳实践

时间:2019-05-23 21:10:02

标签: javascript reactjs asynchronous redux rxjs

目前,我正在3个独立的史诗中进行3个API调用,并使用3个返回的promise对象更新特定状态。在通过redux更新状态后,我试图按一定顺序将所有3个数组连接在一起,然后在页面上显示它们。我认为这是一个问题,因为它们是异步的,并且数据在不同的时间返回。我的呈现数据的组件正在寻找此组合数组,但在呈现发生之前该数组未完全填充。

有时,当我搜索相同的东西时,该数组将具有几个对象,有时它将具有50个对象。我知道应该返回多少数据对象。从我提交搜索查询到数据呈现在页面上的最佳位置应该是哪里?现在,我正在假定要呈现数据的组件的componentDidMount中执行concat,但这并不可靠。

试图将3个数组合并为一个单独的函数,然后将其传递给reducer。

还尝试在componentDidMount内部进行conpatting,然后将其传递给reducer。

无法显示代码。

1 个答案:

答案 0 :(得分:0)

您可能要做的最简单的事情是拥有一个api端点,该端点将已连接在一起的三个数组返回给您-基本上将此逻辑推送到服务器。但是如果那不可行...

我认为您的代码无法按照您想要的方式工作是因为git gc仅在组件最初安装时触发一次。由于不同的呼叫需要花费不同的时间返回,因此您只会看到git tag --list # shows the tags git tag -d <extraneous tag> # removes any such tags git gc # then deletes the extraneous commits 发生火灾时加载的内容。

一些可能的想法:

  • 您可以使用的一种方法是将三个数组作为props传递到组件中,并在componentDidMount方法中将它们合并。填充每个组件后,您的组件将重新呈现自己并保持最新。

  • 我个人认为concat调用是“数据逻辑”(而不是“视图逻辑”),因此将其排除在您的反应组件之外可能是一个好主意。您可以考虑使用类似Remove commits that are not connected to the branch之类的东西来将逻辑更多地转移到您的redux代码中。

默认情况下,这两种方法都会在每个ajax调用返回时使您的react组件重新呈现。如果这对您的数据大小来说是个问题,那么您可以研究Reselect,以使其更快。