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

1 回答

• 0

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

  将 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 将状态树中的位置绑定到Component上的 data prop，如前所述 .

  回复于 2024-04-27T05:29:40+08:00