如何使用react router v4调度redux操作？

Question

我试图结合反应路由器v4，反应，和redux。因为react-router跟踪URL，所以我选择将该状态块排除在redux模型之外。

但我仍然需要一种方法来在react路由器发生路由更改时调度redux操作。哪里是最好的地方？

我的第一次尝试是将它放在react路由器链接的onClick属性中：

render() {

  // link config
  const links = this.props.photo.album( album => {
    <Link key={album.name} 
             to=`/album/${album.name}`
             onClick={() => this.props.dispatchAction(album.name)} />
  })

  // route config
  return (
     <div>
         {links}
         <Route path={`/album/:albumName`} component={Album}/>
     </div>
  )
}

其思想是，当用户单击链接时，dispatchAction（）将更新redux状态，然后加载相册组件。

问题是，如果用户直接导航到URL（例如/album/a1），则不会发送该操作，因为从技术上讲，该链接从未被单击过。

因此，我删除了链接的onClick部分，并将dispatchAction移动到Album组件的生命周期方法：

class Album extends Component {
    // invoked when user navigates to /album/:albumName directly
    componentDidMount() {
        this.props.dispatchAction(this.props.match.params.albumName)
    }

    // invoked whenever the route changes after component mounted
    componentWillReceiveProps(nextProps) {
        if (this.props.match.params.albumName != nextProps.match.params.albumName) {
            this.props.dispatchAction(nextProps.match.params.albumName)
        }
    ....
}

现在，每当安装相册组件或更改其属性时，它都会发送还原动作。这是组合这些库的正确方法吗？

Answer 1

您可以创建一个自定义的路由组件，该组件在componentDidMount中调度您的操作：

class ActionRoute extends React.Component {
  componentDidMount() {
    const { pathname } = new URL(window.location.href);
    const [albumName] = pathname.split('/').slice(-1);
    this.props.dispatchAction(albumName);
  }

  render() {
    return <Route {...this.props} />
  }
}

现在，每当加载路由时，这将调度您的操作。可组合性FTW！

旁注：如果对参数化路由使用ActionRoute（例如/album/1和/album/2），则还需要在componentdiddupdate中调度操作，因为如果从/album/1导航到/album/2，组件不会卸载/重新装载。

Answer 2

react-router-redux通过在存储上应用一个中间件来实现这一点，该中间件可以在路由更改以及初始路由更改时调度操作。这绝对是最干净的方法。

唯一的缺点是它仍然是alpha，但我们已经使用它一段时间没有任何问题。它也是react路由器的一部分附加包回购协议的一部分。