如何使用React Router 4重定向Redux Action回调

Question

我正在构建一个前端React JS应用程序，它使用后端API，我目前正在处理一个基本的登录表单。我正在使用Redux和React-Router 4

以下是它目前的工作原理：

1. 用户填写登录表单：用户输入作为状态存储在LoginForm组件上
2. 在Submission时，将调度LoginUser Action：LoginForm用户输入状态被提交给LoginUser Action。此操作负责向服务器提交AJAX请求。成功响应后，Redux Store将更新所有相关用户信息

理论上，当我的AJAX请求在身份验证后成功接收用户信息然后随后更新redux存储时，应该将用户重定向到他们的仪表板页面。理想情况下，此代码应作为我的AJAX请求的回调存在于我的LoginUser Action中。

我的问题是：如何以编程方式将用户重定向到我的操作文件中的另一个路由？有没有办法用React-Redux 4做到这一点？

编辑因此决定在我的LoginForm组件中保留重定向状态并在LoginForm组件上创建一个函数（redirectToDashboard（）） - 然后将此函数作为参数发送到位于我的操作文件中的fetchUser AJAX请求。我觉得这是目前最好的做法。如果有其他人有其他想法，请告诉我！

特别感谢@ alexander-borodin为我提供指导！

Answer 1

你可以找到一个解决方案here

首先，您应该为组件的上下文提供历史记录：

static contextTypes = {
  router: React.PropTypes.shape({
    history: React.PropTypes.object.isRequired,
  })
};

然后在成功回调函数中推送新位置

   export default YourComponent extends Component {
      ....
      successCallback() {
          this.context.router.history.push('/my-new-location')
      }
      ....
   }

Answer 2

最干净的方法是React路由器在路由更改后运行回调。可悲的是，他们没有这个功能。有两个库可以使用中间件 - Redux-Saga和Redux Observable来做到这一点。监听状态更改的想法，在这种情况下是历史记录中的位置更改，并运行一个函数。