为什么调度功能在呈现注销功能之前会重新定位到主页

Question

我正试图开发一个简单的应用程序来应对编码挑战，因为我不久前就开始学习编码了。我设法从后端给每个用户一个令牌，并将其发送到后端。问题是，当单击注销按钮时，它会显示到主页，而不会首先将用户注销。我做错了什么？

注销操作：

export function logOut(data) {
  localStorage.clear();
  return {
    type: "LOG_OUT",
    isLoggedIn: false,
    error: false,
    user: null
  };
}
export function logOutAction(ownProps) {
  return dispatch => {
    dispatch(logOut());
    console.log("ownProps", ownProps);
    ownProps.history.push("/");
  };
}

注销缩减器：

 case FETCH_LOGOUT_SUCCESS:
      return {
        ...state,
        isLoggedIn: false,
        isError: false,
        user: null
      };
    default:
      return state;
  }
};

注销按钮：

 render() {
    return (
      <div>
        <Link
          className="logout"
          to="/"
          onClick={() => this.props.logOutAction()}
        >
          Log Out
        </Link>
        <Link to="/" className="inicio">
          <img className="homeButton" src={home} alt="home"></img>
        </Link>{" "}
      </div>
    );
  }
}

非常感谢您的帮助！

Answer 1

问题

您将调度的注销操作放在链接的onClick处理程序上，单击该处理程序将导航到"/"，因此在处理注销操作时，它当然会导航到"/"。

可能的解决方案

一个可能的解决方案是在路由器中添加一个注销页面，并在单击链接时导航到那里。让注销页面管理发送注销操作，然后发送一些FETCH_LOGOUT_SUCCESS操作来更新您的状态。有一个单独的效果，等待映射道具isLoggedIn变为false，并将导航推回到主页。

render() {
  return (
    <div>
      <Link className="logout" to="/logout">
        Log Out
      </Link>
      <Link to="/" className="inicio">
        <img className="homeButton" src={home} alt="home"></img>
      </Link>{" "}
    </div>
  );
}

注销页面.jsx

const LogoutPage = ({ history, isLoggedIn, logOutAction }) => {
  // Empty dependency array to call effect only when component mounts
  useEffect(() => {
    logoutAction();
  }, []);
  // when user no longer logged in, push home route
  useEffect(() => {
    !isLoggedIn && history.push('/');
  }, [history, isLoggedIn]);
  // Display some "logout text", or spinner, whatever you 
  // want while the logout is processing
  return <Spinner />;
}

这也有一个好处，即在您的操作完成后，不会一些"异步"导航回主页，即

1. 用户单击注销按钮，导航到某个位置
2. 不等待注销操作完成，导航其他地方
3. 注销操作完成并将其导航回主页

通过用页面控制它，注销仍然可以完成，并且他们只有在"/logout"上才能导航回家。