适当的地点来分派获取服务器数据的操作

Question

我是React的新手，我试图找出根据网址从服务器请求信息的最佳方式。我正在使用Redux和React Router v4。

我们假设我有一条路线/foo/:id，以及一个基于Foo呈现内容的id组件。但是Foo需要一些与id相关的服务器数据才能执行此操作。我相信实现这一目标的方法是使用mapDispatchToProps创建一个以id作为输入，执行异步工作，调度操作并最终更新redux状态的函数。

我的问题是：调用调度最合适的地方在哪里？在这种情况下，没有表单提交或按钮单击以启动。最初我想考虑在id中检查render()数据，如果没有填充则提取，但由于副作用，这感觉不对。

Answer 1

您可以在Foo组件的render中执行此操作，类似于Redux GitHub项目中的this example。

你的直觉是正确的componentDidMount不是一个好地方。大多数人都是在组件的componentWillReceiveProps生命周期方法中完成的。

在相关说明中，您还需要在foo/1/方法中进行提取，例如what they did here。原因是，如果您的用户从foo/2/导航到componentDidMount，该组件已经在屏幕上并且不会再次装入，因此将不会再次调用componentWillReceiveProps。第二个用户的提取将在{{1}}方法中完成。

Answer 2

我认为在componentWillReceiveProps（）中进行调度的最好方法是帮助你在组件渲染之前获取一些数据

Answer 3

您的用例似乎可以通过var index = $(this).parents(".fc-row.fc-week.fc-widget-content"); 包很好地捕获，您可以找到here。它提供了一个更高阶的组件，允许您指定特定API端点的依赖关系，然后在创建组件的新实例时解析它们。

重要的是，它使用名为react-refetch的promise的同步抽象将数据注入到组件props中。这将允许您根据数据是PromiseState，pending，fulfilled等来有条件地呈现您的组件。

这不以任何方式附加到Redux，它完全跳过该层，因此请记住，响应是直接注入组件的，并且不会通过您的redux存储状态。