如何使用 Redux 获取新数据以响应 React Router 更改？

Posted 2023-02-21

【中文标题】如何使用 Redux 获取新数据以响应 React Router 更改？

【英文标题】：How to fetch the new data in response to React Router change with Redux?

【发布时间】：2015-12-27 01:45:27

【问题描述】：

我正在使用 Redux、redux-router 和 reactjs。

我正在尝试制作一个应用程序来获取有关路线变化的信息，所以，我有类似的东西：

<Route path="/" component=App>
    <Route path="artist" component=ArtistApp />
    <Route path="artist/:artistId" component=ArtistApp />
</Route>

当有人进入artist/<artistId>我想搜索艺术家然后渲染信息。问题是，这样做的最佳方法是什么？

我找到了一些关于它的答案，使用 RxJS 或尝试使用中间件来管理请求。现在，我的问题是，这真的有必要还是只是保持架构与反应无关的一种方式？我可以从 react componentDidMount() 和 componentDidUpdate() 中获取我需要的信息吗？现在，我通过在请求信息的那些函数中触发一个动作来做到这一点，并且当信息到达时组件重新呈现。该组件有一些属性可以让我知道：

    isFetching: true,
    entity : 

谢谢！

【问题讨论】：

你试过在 Reactiflux slack room 上提问吗？他们有一个非常活跃的 Redux 频道

我没有！现在可以了，谢谢各位！

@FrancoRisso 请写下来自 slack 的人所说的话，它真的很有帮助。 10x

是的，你应该在这里发帖作为答案:)

【参考方案1】：

现在，我的问题是，这真的有必要还是只是保持架构与反应无关的一种方式？我可以从 react componentDidMount() 和 componentDidUpdate() 中获取我需要的信息吗？

您完全可以在 componentDidMount() 和 componentWillReceiveProps(nextProps) 中做到这一点。 这就是我们在 Redux 中 real-world example 所做的：

function loadData(props) 
  const  fullName  = props;
  props.loadRepo(fullName, ['description']);
  props.loadStargazers(fullName);


class RepoPage extends Component 
  constructor(props) 
    super(props);
    this.renderUser = this.renderUser.bind(this);
    this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
  

  componentWillMount() 
    loadData(this.props);
  

  componentWillReceiveProps(nextProps) 
    if (nextProps.fullName !== this.props.fullName) 
      loadData(nextProps);
    

  /* ... */

您可以使用 Rx 变得更复杂，但这完全没有必要。

【讨论】：

在 React Router 中使用 onEnter/onLeave 道具是“惯用的 Redux”吗？

@VictorSuzdalev 当然，Redux 在这里没有意见。

天啊，同样的丹回答，谢谢老兄！我喜欢你的工作。 （抱歉，我是个技术迷）

我被困住了，因为 componentWillMount 和 componentWillReceiveProps 现在已被弃用?

【参考方案2】：

我已经在普通路由器 onEnter/onLeave 回调道具上进行了自定义绑定，如下所示：

const store = configureStore()

//then in router
<Route path='/myRoutePath' component=MyRouteHandler onEnter=()=>store.dispatch(myRouteEnterAction()) />

这有点 hacky 但很有效，我现在不知道更好的解决方案。

【讨论】：

感谢您的解决方案！它可以工作，虽然我更喜欢 Dan 将事物保存在同一个组件中的方法，但我认为它更干净。

@FrancoRisso 出于品味，这里不争辩））））

这是一个不错的选择（大多数时候我更喜欢）。如果您希望您的组件愚蠢到不知道如何获取数据，那么您就是这样做的。我喜欢组件只渲染和“响应”道具变化。相反，如果组件作为涉及对应用程序的其余部分不透明的 API 调用的状态（例如：您在 npm 上发布的 github 星计数器），则 componentWillMount () => loadData 更有意义。干杯！

onEnter 在 react-router-4 上不再存在

【参考方案3】：

1) 在路由更改时调度乐观请求操作，即BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2) 异步操作： http://redux.js.org/docs/advanced/AsyncActions.html