title: React-Redux how to prevent page from rendering before redirect
body: <p>I'm working on a personal project and I have trouble with checking if a user is logged in or not so that when they try to go to /login, it'll redirect them to the home page. Currently what my code does is the following:</p>
  
  <ol>
  <li>Defined my own Route components</li>
  <li>When checkIfSignedIn is called, it dispatches actions that set the isLoggedIn state to either True or False.</li>
  <li>The AuthenticatedRouter component checks if the store's isLoggedIn state is true or false and will either render the component or redirect to home.</li>
  <li>This works, but the issue is that isLoggedIn is initially false, so if they are logged in, the login form shows up for a second and then redirects after isLoggedIn becomes true. </li>
  </ol>
  
  <p>I can't figure out how to fix the problem with rendering the component with the default state and then suddenly redirects because the state changes. Thanks</p>
  
  <ul>
  <li>I'm using firebase for the user account.</li>
  </ul>
  
  <p>Routes.js</p>
  
  <pre><code>const Routes = (props) =&gt; {
      props.checkIfSignedIn();
      return(
          &lt;Router&gt;
              &lt;Switch&gt;
                  &lt;Route exact path='/' component={App}/&gt;
                  &lt;AuthorizedRoute path="/signup" component={SignUp}/&gt;
                  &lt;AuthorizedRoute path="/signin" component={SignIn}/&gt;
                  &lt;Route component={InvalidPage}/&gt;
              &lt;/Switch&gt;
          &lt;/Router&gt;
      );
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return{
          checkIfSignedIn: () =&gt; dispatch(checkIfSignedIn())
      };
  };
  
  export default connect(null, mapDispatchToProps)(Routes);
  </code></pre>
  
  <p>AuthorizedRoute.js</p>
  
  <pre><code>class AuthorizedRoute extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              isLoggedIn: false
          };
      };
  
      render(){
          const { component: Component, ...rest } = this.props;
          return(
              &lt;Route {...rest} render={props =&gt; {
                  if (this.props.isLoggedIn){
                      console.log(this.state.isLoggedIn);
                      return &lt;Redirect to="/" /&gt;
                  } else{
                      return &lt;Component {...props} /&gt;
                  }
              }} /&gt;
          );
      }
  };
  
  
  const mapStateToProps = (state) =&gt; {
      return{
          isLoggedIn : state.authentication.isLoggedIn
      };
  };
  
  export default connect(mapStateToProps, null)(AuthorizedRoute);
  </code></pre>
  
  <p>authentication.js - action creators</p>
  
  <pre><code>const setSignedInFalse = () =&gt; {
      return{
          type: IS_SIGNED_IN_FALSE
      };
  };
  
  const setSignedInTrue = () =&gt; {
      return{
          type: IS_SIGNED_IN_TRUE
      };
  };
  
  const checkIfSignedIn = () =&gt; {
      return dispatch =&gt; {
          firebaseApp.auth().onAuthStateChanged(user =&gt; {
              if (user){
                  dispatch(setSignedInTrue());
              } else{
                  dispatch(setSignedInFalse());
              }
          });
      };
  };
  
  export default checkIfSignedIn;
  </code></pre>
  
  <p>authentication.js - reducer</p>
  
  <pre><code>const defaultState = {
      isLoggedIn: false
  };
  
  const authentication = (state = defaultState, action) =&gt; {
      let authenticationState = null;
      switch (action.type){
          case IS_SIGNED_IN_FALSE:
              authenticationState = {
                  isLoggedIn: false
              };
              return authenticationState;
          case IS_SIGNED_IN_TRUE:
              authenticationState = {
                  isLoggedIn: true
              };
              return authenticationState;
          default:
              return state;
      };
  };
  
  export default authentication;
  </code></pre>
  
  <p>Hacky solution (Not sure if this is frowned upon).</p>
  
  <p>I set my Auth reducer's default state, isLoggedIn : null instead of false. Then in my AuthorizedRoute component I now have 3 conditions to render null first and then either the component or redirect.</p>
  
  <pre><code>//AuthorizedRoute Component
  if (this.props.isLoggedIn){
      return &lt;Redirect to="/" /&gt;
  } else if (this.props.isLoggedIn === false){
      return &lt;Component {...props} /&gt;
  } else{
      return null;
  }
  </code></pre>