我应该在 React/Redux 中调度一个导航操作吗

Question

我将 React 与 Redux 和 thunk 一起使用。我想使用browserHistory.push，但不确定我应该在哪里调用这个函数。假设我们有一个组件，它有一个简单的按钮。单击按钮时，我想调用browserHistory.push 方法。我对 redux 的理解是，我应该调度一个动作 ({type: 'NAVIGATE'}) 并创建一个 thunk，我将在其中调用 browswerHistory.push 方法。组件只会请求导航，而 thunk 会实际处理请求。

但是，我听到了不同的意见，比如 Redux 中的操作应该只在更新商店时使用。如果您不修改商店，则无需调度操作。

这个问题的最佳解决方案是什么？

Answer 1

您可以使用react-router-redux 中的push 方法并将其绑定为动作创建者，就像任何其他redux 动作一样。

import React from 'react'
import { connect } from 'react-redux'
import { push } from 'react-router-redux'

function YourComponent({ redirectTo }) {
  return (
    <div>
      ...
      <button onClick={() => redirectTo('/nextRoute')}>
        Click-me
      </button>
    </div>
  )
}

export default connect(
  undefined,
  { redirectTo: push }
)(YourComponent)