React Redux登录路由跳转后状态不更新导致重定向问题求助

我来帮你排查这个问题，核心原因是你的组件没有正确响应Redux状态的变化，导致路由判断一直用的是初始值。具体问题和修复步骤如下：

问题根源 #

1. 直接读取store状态，未订阅更新：你通过store.getState()获取的logginState只会在组件首次渲染时读取一次，当Redux中的loggedIn变为true后，组件不会自动重新读取这个值，所以它始终是初始的false。
2. connect未正确配置：虽然你用了connect，但没有定义mapStateToProps来把Redux状态映射到组件props，所以this.props.loginReducer实际上是无效的。
3. Provider位置错误：你把Provider放在了Router内部，这会导致部分路由组件无法访问Redux store，正确的做法是让Provider包裹整个Router。

修复步骤 #

1. 修正Provider的包裹范围 #

把Provider移到Router外面，确保所有路由组件都能获取到store：

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router history={history}>
          <div className="App">
            <Switch>
              {/* 路由配置 */}
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  }
}

2. 配置mapStateToProps，正确连接Redux #

定义mapStateToProps函数，将Redux中的登录状态映射到组件props，这样状态更新时组件会自动重新渲染：

// 新增mapStateToProps
const mapStateToProps = (state) => {
  return {
    loginReducer: state.loginReducer
  };
};

// 用connect连接组件与Redux，并导出App
export default connect(mapStateToProps)(App);

3. 使用props中的状态进行路由判断 #

现在可以通过this.props.loginReducer.loggedIn来判断登录状态，它会随着Redux状态更新而同步：

<Route 
  exact path="/home" 
  render={() => (
    this.props.loginReducer.loggedIn ? <Home /> : <Redirect to="/" />
  )} 
/>

4. 优化登录action的执行顺序 #

你当前是先跳转再分发action，这会导致跳转时状态还没更新。应该先更新状态，再执行页面跳转：

return (dispatch) => {
  fetch('./data.json')
    .then(response => response.json())
    .then((data) => {
      console.log('data', data);
      // 先分发action更新Redux状态
      dispatch(loginSuccess());
      // 状态更新完成后再跳转
      history.push('/home');
    })
}

验证效果 #

完成以上修改后，当你点击登录按钮，action会先更新Redux中的loggedIn为true，然后跳转到/home。此时App组件会因为Redux状态更新而重新渲染，this.props.loginReducer.loggedIn为true，不会触发重定向，你就能正常停留在Home页面了。

内容的提问来源于stack exchange，提问作者user3106347