Javascript React路由器&x2B；Redux-在路由更改时调度异步操作？

我有一个使用redux和react路由器的通用react应用程序

我有以下几条路线：

/2016
/2015
/2014
/2013

等等

每个路由都需要来自API的数据。目前，我在导航组件中有

元素分派一个异步操作

onClick

，该操作使用来自该路由的API的数据填充存储

对于MVP，我只是在路由更改时用新的post内容覆盖存储中的

post:{}

内容，这样我们就可以获得API上的任何新内容

我意识到，在

按钮上设置动作调度程序并不是最佳选择，因为点击后退按钮不会重新触发动作调度以获取上一条路线的内容

有没有办法让React路由器在任何时候发生路由更改时触发调度操作？（限制它收听一组特定的路线将是一个额外的好处）

我意识到我应该从商店中获取历史记录，但现在，触发动作分派以获取新内容更容易再次点击API

---

干杯。

是的，路由器有单钩和单钩。您可以构建路由以获取

存储

实例，这样您就可以在这些帮助程序中访问它：

const createRoutes = (store) => {
  const fetchPosts = () => store.dispatch({
    types: ['FETCH_POSTS', 'FETCH_POSTS_SUCCESS', 'FETCH_POSTS_FAIL',
    url: '/posts'
  });

  return (
    <Route path="/" component={App}>
      <Route path="posts" component={PostList} onEnter={fetchPosts}/>
      <Route path="posts/:id" component={PostDetail} />
    </Route>
  )
}

const createRoutes=（存储）=>{
const fetchPosts=（）=>store.dispatch({
类型：[“获取帖子”、“获取帖子成功”、“获取帖子失败”，
url:“/posts”
});
返回(
)
}

更好的解决方案是使用或之类的工具。这允许您将组件的数据依赖关系与组件放在一起，同时保留在不接触网络的情况下测试组件的能力

---

编辑：这适用于不再受支持的旧版本的

react router

react router 4中的“lifecycle”钩子

onEnter

和

onChange

，这使得该问题的大多数其他答案都过时了

虽然我建议您使用组件生命周期方法来实现您的目标，但以下是对React router 4的问题的回答

今天起作用的是使用React router自身的开发人员创建的脚本来侦听历史更改，并从中分派异步操作

// 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

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

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

//App.js
从“react Router dom”导入{Router，Route}；
从“./components/Home”导入Home；
从“./components/Login”导入登录名；
从“./history”导入历史记录；
类应用程序扩展组件{
render（）{
返回(
)
}
}

资料来源：

---

我更喜欢从渲染道具本身调度操作：

<Route to="path" render={ props => {
  this.props.toggleInfoLayer(true);
  return <UserInfo />;
}} />

{
this.props.toggleInfoLayer（true）；
返回；
}} />

这是假设您正在使用Redux的

mapDispatchToProps

参数

---

我尝试使用已接受答案中提到的历史更改事件处理程序，但我发现从恶意文件发送操作是不可取的。还有一个地方我不得不考虑，当Redux已经提供了太多的操作时。

Nice！！我无法让重拨正常工作（由于某种原因，钩子没有开火，承诺马上就解决了），所以我在尝试使用另一种方法时实现了您的示例。Works！这是未记录的还是仅适用于旧版本的react router？我在文档中找不到任何关于

onEnter

和

onLeave

挂钩的内容。@HåkenLid不幸的是，这已过时。发布更新的答案您应该编辑此答案tead。或者至少添加一个解释，说明它适用于哪个版本的react router。您如何在历史侦听器中调度？我的意思是，

调度

如何可用？

操作

是历史操作。只是一个字符串。在我的情况下，它是

替换

我非常喜欢这个答案，但不幸的是，

react dom

在开发环境中向我抱怨运行时警告：

警告：无法在现有状态转换期间更新（例如在渲染内）.Render方法应该是道具和状态的纯函数。

除了Matthew Barbara，我们还可以使用store.dispatch来调度任何操作