无法获取我的身份验证状态以在受保护的路由（react-redux）中更新

现在，我的受保护路由/searchathletes仅呈现isSignedIn:null的身份验证状态的初始状态，直到几秒钟后它才更新，这使我重定向回主页

这里也是我的GitHub存储库的链接：Here

ProtectedRoute.js

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
const ProtectedRoute = ({ component: Comp, isSignedIn, path, ...rest }) => {
  return (
    <Route
      path={path}
      {...rest}
      render={(props) => {
        console.log(isSignedIn);
        return isSignedIn ? (
          <Comp {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/',
            }}
          />
        );
      }}
    />
  );
};

const mapStateToProps = (state) => {
  return {
    isSignedIn: state.auth.isSignedIn,
  };
};

export default connect(mapStateToProps)(ProtectedRoute);

App.js

  
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import ProtectedRoute from './ProtectedRoute';
import Header from './Header';
import SportsListings from './SportsListings';
import SearchAthletes from './SearchAthletes';
import About from './About';
import Footer from './Footer';

import '../css/App.css';

const App = (props) => {
  return (
    <div>
      <div className="main-content">
        <Router>
          <Header />
          <div>
            <Route path="/" exact component={SportsListings} />
            <ProtectedRoute path="/searchathletes" component={SearchAthletes} />

            {/* <Route path="/searchathletes" exact component={SearchAthletes} /> */}
            <Route path="/about" exact component={About} />
          </div>
        </Router>
      </div>
      <Footer />
    </div>
  );
};

export default App;

GoogleAuth.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { signIn, signOut } from '../actions';

import '../css/GoogleAuth.css';

class GoogleAuth extends Component {
  componentDidMount() {
    window.gapi.load('client:auth2', () => {
      window.gapi.client
        .init({
          clientId:
            '967910967947-lmvmibddgajcg0c3purmra7hgtjls8sr.apps.googleusercontent.com',
          scope: 'email',
        })
        .then(() => {
          this.user = window.gapi.auth2.getAuthInstance();
          this.onUserAuthChange(this.user.isSignedIn.get());
          this.user.isSignedIn.listen(this.onUserAuthChange);
        });
    });
  }

  onUserAuthChange = (isSignedIn) => {
    return isSignedIn
      ? this.props.signIn(this.user.currentUser.get().getId())
      : this.props.signOut();
  };

  onSignInClick = () => {
    this.user.signIn();
  };

  onSignOutClick = () => {
    this.user.signOut();
  };
  renderAuthButton() {
    if (this.props.isSignedIn === null) {
      return null;
    } else if (this.props.isSignedIn) {
      return (
        <button className="auth-button" onClick={this.onSignOutClick}>
          Sign Out
        </button>
      );
    } else {
      return (
        <button className="auth-button" onClick={this.onSignInClick}>
          <i className="fab fa-google"></i>Sign In With Google
        </button>
      );
    }
  }

  render() {
    return (
      <div className="auth-button-container">{this.renderAuthButton()}</div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    isSignedIn: state.auth.isSignedIn,
  };
};

export default connect(mapStateToProps, { signIn, signOut })(GoogleAuth);

actions / index.js

import sportsDB from '../apis/sportsDB';

// ====== Google oauth ==========/

export const signIn = (userId) => {
  return {
    type: 'SIGN_IN',
    payload: userId,
  };
};

export const signOut = () => {
  return {
    type: 'SIGN_OUT',
  };
};

// ====== API ==========/

export const fetchSports = () => async (dispatch) => {
  const response = await sportsDB.get('/all_sports.php');
  dispatch({ type: 'FETCH_SPORTS', payload: response.data.sports });
};

authReducer.js

const INITIAL_STATE = {
  isSignedIn: null,
  userId: null,
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'SIGN_IN':
      return { ...state, isSignedIn: true, userId: action.payload };
    case 'SIGN_OUT':
      return { ...state, isSignedIn: false, userId: null };
    default:
      return state;
  }
};