Переадресация при аутентификации Next JS Redux

Question

Я изучаю Next JS с Redux, и я создал хранилище, и мне удалось перевести пользователя в состояние Eedux при аутентификации, но теперь я не хочу, чтобы этот пользователь получал доступ к странице входа в систему при аутентификации.

Это код, который я написал до сих пор:

const SignInSignUp = ({ currentUser }) => {
  const StyledSignInSignUp = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
  `;

  const renderSignIn = () => {
    if (currentUser) {
      Router.push('/');
    } else {
      return (
        <StyledSignInSignUp>
          <SignIn />
          <SignUp />
        </StyledSignInSignUp>
      );
    }
  };

  return (
    <motion.div
      initial={{ y: 50 }}
      animate={{ y: 0 }}
      exit={{ y: 50 }}
      className="container"
    >
      {renderSignIn()}
    </motion.div>
  );
};

const mapStateToProps = ({ user }) => ({ currentUser: user.currentUser });

export default connect(mapStateToProps)(SignInSignUp);

Он работает и перенаправляет пользователя, но занимает около 3 секунд, прежде чем состояния приходят, прежде чем их перенаправить.

Есть ли способ не отображать страницу до того, как у меня уже есть состояние или что-то, что может предотвратить это?

Answer 1

В вашем выражении возврата может быть условие, когда вы просто визуализируете фрагмент при загрузке информации о том, вошел ли пользователь в систему:

const SignInSignUp = ({ currentUser, isUserLoading }) => {
  const StyledSignInSignUp = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
  `;

  const renderSignIn = () => {
    if (currentUser) {
      Router.push('/');
    } else {
      return (
        <StyledSignInSignUp>
          <SignIn />
          <SignUp />
        </StyledSignInSignUp>
      );
    }
  };

  return (
    <motion.div
      initial={{ y: 50 }}
      animate={{ y: 0 }}
      exit={{ y: 50 }}
      className="container"
    >
      {!isUserLoading ? renderSignIn() : <></>}
    </motion.div>
  );
};

const mapStateToProps = ({ user }) => ({ currentUser: user.currentUser, isUserLoading: user.isUserLoading (UPDATE THIS) });

export default connect(mapStateToProps)(SignInSignUp);

, где isUserLoading - это состояние, которое поворачивается false, когда вы закончите загрузку.