使用 react redux 登录后重定向用户？

如何解决使用 react redux 登录后重定向用户？

我在 Next.js 中使用 react redux，如果用户符合要求，我想将用户重定向到某个页面。我将它添加到我的 useEffect 中并且它可以工作，但是每次当我返回主页时它都会再次重定向到同一页面。如果我刷新要清除 redux 状态的页面，它工作正常。

useEffect(() => {
    const validateUser = (services: ServiceType[]) => {
      if (services.length === 0) {
        router.push('/dashboard/expert/onboard');
      } else {
        router.push(
          '/dashboard/expert/[expertname]?view=overview',`/dashboard/expert/${userProfile.expertProfile.name}?view=overview`
        );
      }
    };
    if (userProfile) {
      if (userProfile.isVerified) {
        if (nextPath && nextPath.as) {
          router.push(nextPath.href,nextPath.as);
        } else if (userProfile.isExpert) {
          setModalVisible(false);
          if (services) {
            validateUser(services);
          }
          // setAlreadySignedUpModalVisible(true);
        } else if (loginResponse && loginResponse.expertApplications.rejected > 0) {
          setModalVisible(false);
          setApplicationRejectedModalVisible(true);
        } else if (loginResponse && loginResponse.expertApplications.pending > 0) {
          setModalVisible(false);
          setApplicationReceivedModalVisible(true);
          setIsPendingExpert(true);
        } else {
          if (nextPath) {
            router.push(nextPath.href);
          }
          setModalVisible(false);
        }
      } else {
        setModalVisible(false);
        setEmailVerifyModalVisible(true);
      }
    }
  },[
    loginResponse,setAlreadySignedUpModalVisible,setApplicationReceivedModalVisible,setApplicationRejectedModalVisible,setEmailVerifyModalVisible,setModalVisible,userProfile,nextPath,setIsPendingExpert,services,]);

解决方法

我知道您希望在用户登录并通过验证时现在重定向。

这是对某些特定事件的反应，因此您需要某种“事件处理程序”。

useEffect 是不是事件处理程序，useEffect 用于“保持状态同步”。

因此 useEffect 在您的情况下希望在应用程序具有特定状态时进行重定向，无论用户是刚刚登录还是之前已经登录，都会给出该状态。
（例如，请注意，当组件第一次加载时，useEffect 总是至少被调用一次，因此状态最初是同步的。）

解决方案 1

通过将 moment-it-happended 包含在状态中，可以将“映射”和事件“映射”到状态。这并不总是微不足道的，因为“它刚刚发生”意味着“从那时起没有发生任何矛盾”，并且您可能无法监控（甚至知道）所有冲突事件。

因此，您的事件状态不仅“已登录并已验证”。我认为您可以将所需的状态描述为：
“登录状态已更改，因为用户在页面上且已登录且有效”

例如

const [ hasLoggedInSinceOnPage,setHasLoggedInSinceOnPage ] = useState(false);
...
loginRequest.then( (xyz)=>{
    yourLoginCode(xyz);
    setHasLoggedInSinceOnPage(true);
});
...
useEffect(()=>{
    setHasLoggedInSinceOnPage(false);
},[ currentPage ]);

另一个想法是像 wasRedirectedAlready 这样的状态。

解决方案 2

如果可能，我会尝试直接调用 router.push 作为登录事件的结果（即不使用 useEffect）。这可能需要对代码进行一些重新设计。有时也可能无法以干净的方式实现（我不确定）。

例如：

loginRequest.then( (xyz)=>{
    validate(xyz).then( (isValid)=>{
        router.push('...');
    });
});