react-router 路由组件中作为回调的操作答案

【问题标题】：Actions as callbacks in react-router routes componentsreact-router 路由组件中作为回调的操作
【发布时间】：2016-06-14 15:06:07
【问题描述】：

我想使用 redux 操作作为对 react-router 路由中 onChange 事件的回调。我也在使用 react-router-redux。

类似

<Route path="profile/search" component={ProfileSearch} onChange={store.dispatch(fetchCompanies())} />

fetchCompanies 是动作。

更一般地说，我希望监听路由变化并最终与状态交互，这就是为什么使用动作对我来说似乎是最直接的选择。但是，我收到此错误：

Uncaught TypeError: hook.apply is not a function TransitionUtils.js?f913:22

还有其他方法可以实现吗？尝试将动作作为回调传递给路由更改本身就很糟糕吗？如果没有，我怎样才能让它工作？

【问题讨论】：

为什么要在路由器级别做？
只需使用Route 组件和onChange 来触发一个api 请求作为回调（即每次特定路由更改时）。 api 请求将返回一些我必须保存在全局状态中的数据。
您也可以在组件中执行此操作。例如：在 react 组件的 componentDidMount() 生命周期中调度操作。
我通常会这样做，但我不仅需要在组件刚刚挂载时调度此操作，而且还需要在路由更改时调度此操作。该组件最初只是安装，而不是每次更改路由。

标签： reactjs react-router react-router-redux

【解决方案1】：

调用store.dispatch 会引发错误，但将调度的操作包装在一个函数中是可行的。

const onChangeProfileSearch = () => store.dispatch(fetchCompanies());
<Route path="profile/search" component={ProfileSearch} onChange={onChangeProfileSearch} />

但是，可能有更好的方法来解决这个问题。

【讨论】：