我有一个使用 redux、react-router、react-router-redux 的同构反应应用程序，我想将我的组件与 url 查询参数绑定，当查询参数更改时，向 API 发送请求并更新我的状态，最后获取数据。 我知道 react-router-redux 它会自动更新我的状态。 我还想在获取数据时向用户显示预加载器（微调器）。 为这个问题编写动作创建者的最佳方法是什么？谢谢
【问题讨论】：
标签： javascript reactjs redux react-router react-router-redux
我想在获取数据时向用户显示预加载器（微调器）
将 data 属性传递给您的组件。当它是undefined 时，显示一个微调器。
const MyComponent = (props) => {
if (!props.data) return <Spinner />
...
}
当查询参数改变时，向 API 发送请求并更新我的状态，最后获取数据
最简单的解决方案（这可能会根据您的需要变得相当复杂）是在组件的生命周期挂钩上触发此逻辑。
当路由改变时，react-router 使用典型的配置，如果你之前在不同的路由上会导致组件渲染，如果你之前在相同的路由上会更新组件（即相同的路径，但不同的路径）查询参数）。
所以对于第一种情况，使用componentDidMount，对于第二种情况，使用comonentDidUpdate(prevProps, prevState)生命周期钩子。
要将异步 API 调用映射到 redux 操作，请使用 redux-thunk 之类的库，或者可能更适合此用例，redux-promise-middleware。如何使用这些对我来说有点深入，但它们都有很好的文档。
最后，您需要将这些操作映射到 reducer 中，将响应数据放在状态树中的某个位置，然后使用 react-redux 将该状态树中的位置绑定到组件上的 data 属性，正如我之前提到的。
【讨论】：