异步任务反应后如何调用函数

Question

我想在登录后导航到仪表板并且仪表板受保护路由

const handleLogin = (e) => {
    e.preventDefault();
    if (email || password) {
      dispatch(loginUser({ email, password }));
      navigate("/dashboard");
    } else {
      toast.error("Please Enter Email and Password");
    }
  };

我正在为 api 请求

使用 redux 工具包 createAsyncThunk

export const loginUser = createAsyncThunk("auth/login", async (userDetails) => {
  try {
    const { email, password } = userDetails;
    const res = await fetch("http://localhost:5000/api/users/login", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email,
        password,
      }),
    });
    const result = await res.json();
    if (result.error) {
      toast.error(result.error);
    } else {
      toast.success("Login successfull");
      localStorage.setItem("user", JSON.stringify(result));
      return result;
    }
  } catch (error) {
    console.log(error);
  }
});

当我点击登录时，它尝试在状态更新之前导航页面我想要的导航功能等到 api 响应收到然后导航到仪表板

Answer 1

dispatch(loginUser({ email, password })); returns 一个承诺，你可以等待承诺解决后再做额外的工作：

const handleLogin = () => {
  dispatch(loginUser({ email, password })).then(() => {
    navigate("/dashboard");
  })
}

见Unwrapping Result Actions

异步任务反应后如何调用函数

how to call function after async task react

asynchronous

reactjs

redux-toolkit