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

Question

我正在尝试结合 react-router v4、react 和 redux。因为 react-router 跟踪 URL，所以我选择将该状态保留在 redux-model 之外。

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

我的第一次尝试是把它放在 react-router 的 Link 的 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 状态，然后加载 Album 组件。

问题在于，如果用户直接导航到 URL（例如 /album/a1），则永远不会分派操作，因为从技术上讲，永远不会点击链接。

因此，我删除了 Link 的 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)
        }
    ....
}

现在，每当安装 Album 组件或更改其属性时，它都会调度 redux-action。这是组合这些库的正确方法吗？

Answer 1

react-router-redux 通过在您的商店中应用一个中间件来为您执行此操作，该中间件在路由更改以及初始路由更改时调度操作。这绝对是最干净的方法。

唯一的缺点是它仍然是 alpha，但我们已经使用它一段时间了，没有任何问题。它也是 react-router 附加软件包 repo 的一部分。

Answer 2

您可以创建一个自定义Route 组件，在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），您还需要在componentDidUpdate 中调度操作，因为如果组件未卸载/重新安装您从/album/1 导航到/album/2。