React Router + Redux - 在路由更改时调度异步操作？ [英] React Router + Redux - Dispatch an async action on route change?

问题描述

我有一个使用redux和react-router的通用反应应用程序。

I have a universal react app that's using redux and react-router.

我有几条路线如下：

/2016
/2015
/2014
/2013

等。

每条路线都需要来自API的数据。目前，我在导航组件中有< Link> 元素调度异步操作 onClick ，它填充商店来自该路线的API数据。

Each route requires data from an API. Currently, i have the <Link> elements in the Navigation component dispatch an async action onClick, which populates the store with data from the API for that route.

对于MVP，我只是覆盖帖子：{} 当路线改变时，商店中的内容带有新的帖子内容，这样我们就可以获得API上的任何新内容。

For MVP, i'm just overwriting the post: {} contents in the store with the new post contents when the route changes, that way we get any new content that was on the API.

我已经意识到有了这个动作< Link> 按钮上的调度员不是最佳选择，因为按下后退按钮不会重新触发操作调度以获取上一个路线的内容。

I've realise that having the action dispatchers on the <Link> buttons isn't optimal, as hitting the back button does not re-trigger the action dispatch to get the content for the previous route.

有没有办法让React Router在路径发生变化时随时触发调度操作？ （限制它听一组特定的路线将是奖金）。

Is there a way to get React Router to trigger the dispatch action anytime a route change occurs? (Limiting it to listen to a specific set of routes would be a bonus).

我意识到我应该从商店获取历史记录，但是现在，通过触发行动调度以获取新内容，

干杯更容易再次点击API。

Cheers.

推荐答案

'生命周期'钩子 onEnter 和在React-router 4中删除了onChange ，这使得这个问题的大多数其他答案都已过时。

The 'lifecycle' hook onEnter and onChange has been removed in React-router 4 which makes most of the other answers to this question out-dated.

虽然我建议你去使用您的组件生命周期方法来实现您的目标，这里是您在React-router 4上运行的问题的答案。

Whilst I recommend you to use your components lifecycle methods to achieve your goal, here is an answer to your question which works on React-router 4.

今天有用使用由React路由器自己的开发人员创建的历史库来监听历史记录更改并从那里发送异步操作。

What works today is listen to the history change using History library created by the developers of React router themself and dispatch async actions from there.

// history.js
import createHistory from "history/createBrowserHistory"

const history = createHistory()

// Get the current location.
const location = history.location

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
    //Do your logic here and dispatch if needed
})

export default history

然后在您的应用程序中导入历史记录

Then import the history in your application

// App.js
import { Router, Route } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import history from './history';

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
    )
  }
}

资料来源：历史图书馆
React router docs

这篇关于React Router + Redux - 在路由更改时调度异步操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！