Question

我有一个使用redux，react-router，react-router-redux的同构反应应用程序，我想用url查询参数绑定我的组件，当查询参数更改时，发送请求到API并更新我的状态，最后获取数据。我知道使用react-router-redux会自动更新我的状态。此外，我想在获取数据时向用户显示预加载器（微调器）。为这个问题编写动作创建者的最佳方法是什么？感谢

Answer 1

我想在获取数据时向用户显示预加载器（微调器）

将data道具传递给您的组件。当它是undefined时，显示一个微调器。

const MyComponent = (props) => {
  if (!props.data) return <Spinner />
  ...
}

当查询参数更改时，向API发送请求并更新我的状态并最终获取数据

最简单的解决方案（这可能会根据您的需要变得非常复杂）是在Component的生命周期挂钩上触发此逻辑。

当路由更改react-router时，使用典型配置，如果您以前在不同的路由上，将导致组件呈现，如果您之前在同一路径上（即相同的路径，但具有不同的路径），则会更新查询参数）。

因此，对于第一种情况，请使用componentDidMount，对于第二种情况，请使用comonentDidUpdate(prevProps, prevState)生命周期挂钩。

要将异步API调用映射到redux操作，请使用类似redux-thunk的库，或者可能更适合此用例的库redux-promise-middleware。如何使用它们对我来说有点深入，但它们都有很好的文档。

最后，您需要在reducer中映射这些操作，将响应数据放在状态树中的某个位置，然后使用react-redux将状态树中的该位置绑定到data prop正如我之前提到的，在你的组件上。

反应redux改变查询参数与组件

1 个答案: