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

问题描述

我有一个使用 redux 和 react-router 的通用 React 应用.

我有几条路线如下:

/2016/2015/2014/2013

等

每条路线都需要来自 API 的数据.目前，我让导航组件中的 元素调度异步操作 onClick，该操作使用来自该路线的 API 的数据填充商店.

对于 MVP，我只是在路由更改时用新的帖子内容覆盖商店中的 post: {} 内容，这样我们就可以获得 API 上的任何新内容.

我已经意识到在 按钮上设置动作调度器并不是最佳选择，因为点击后退按钮不会重新触发动作调度以获取内容之前的路线.

有没有办法让 React Router 在路由发生变化时触发调度操作?(限制它听一组特定的路线将是一个奖励).

我意识到我应该从商店获取历史记录，但现在，通过触发动作分派再次访问 API 以获得新内容更容易.

干杯.

解决方案

'lifecycle' hook onEnter 和 onChange 已在 React-router 4 中移除，这使得大多数这个问题的其他答案已经过时了.

虽然我建议您使用组件生命周期方法来实现您的目标，但这里是您的问题的答案，适用于 React-router 4.

今天有效的是使用由 React 路由器开发人员自己创建的 历史库 来监听历史更改并从那里分派异步操作.

//history.js从history/createBrowserHistory"导入 createHistoryconst 历史 = createHistory()//获取当前位置.const location = history.location//监听当前位置的变化.const unlisten = history.listen((location, action) => {//在这里做你的逻辑并在需要时调度})导出默认历史记录

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

//App.js从'react-router-dom'导入{路由器，路由}；从'./components/Home'导入Home；从'./components/Login'导入登录；从 './history' 导入历史记录；类 App 扩展组件 {使成为() {返回 (<路由器历史={历史}><div><路由精确路径="/" component={Home}/><Route path="/login" component={Login}/>

</路由器>)}}

来源:历史图书馆React 路由器文档

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

I have several routes as follows:

/2016
/2015
/2014
/2013

etc.

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.

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.

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.

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).

I realise i should be getting the history from the store, but for now, it's easier to hit the API again by triggering an action dispatch in order to get the new content.

Cheers.

解决方案

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.

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.

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>
    )
  }
}

Source: History library React router docs

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