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

Question

我正在使用 react redux 和 Next.js，如果用户符合要求，我想将其重定向到某个页面。我将它添加到我的 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,
  ]);

Answer 1

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

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

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('...');
    });
});

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

Redirect user after login with react redux?

javascript

reactjs

redux

next.js

next-router

解决方案 1

解决方案 2