调度某个 Redux 操作时，如何将用户重定向到路由？答案

【问题标题】：How do I redirect a user to a route when a certain Redux action is dispatched?调度某个 Redux 操作时，如何将用户重定向到路由？
【发布时间】：2016-12-04 01:19:00
【问题描述】：

我有一个 React + Redux + React Router web 应用程序，它使用 websockets 与后端服务器通信。

假设用户使用该应用程序进行到一半，并且计算机闲置了几个小时。这将导致他们的会话过期。

因此，后端将向客户端发送一条消息SESSION_EXPIRED。

我希望能够将用户重定向到另一条路由/login，以便在发生这种情况时用户可以再次登录。

但是我不知道如何进行重定向。我已经设置了我的操作和减速器，因此它们可以正确更新商店。我的商店中有一个布尔值，名为 loggedIn: true|false。

当loggedIn 状态更改为false 然后将用户重定向到自动登录时，我有什么办法可以观察到？

【问题讨论】：

标签： reactjs redux react-router react-redux

【解决方案1】：

你可以有一个可以做重定向的 redux 中间件。

每个动作都会调用所有中间件，并且可以访问状态。欲了解更多信息：http://redux.js.org/docs/advanced/Middleware.html

【讨论】：

【解决方案2】：

我会采用以下两种方式之一：

第一个选项：

该州有一个路由器，当您从后端收到会话已过期的事件时，您可以使用它来导航 (using the push method)。

第二个选项：

使用一个根包装器组件来监控状态并在会话过期时呈现登录信息，否则它会呈现它应该呈现的内容。

类似的东西（在示例中使用 redux 和 react-redux）：

class Root extends React.Component {
    render() {
        const { isLoggedIn } = this.props;
        return (
            isLoggedIn ? {this.props.children} : <Login />
        );
    }
}

export default connect((state) => ({ isLoggedIn: state.isLoggedIn }))(Root);

【讨论】：

【解决方案3】：

这里有两种解决方案：

您可以将实例化的路由器实例导入您的 reducer 文件并从那里推送到新路由。
您可以简单地使用 location.href 推送到注销路由，react-router 将自动处理路由更改。在该注销路线上，您可以有一个 onEnter 处理程序来处理注销的业务逻辑。

希望这会有所帮助。

【讨论】：