使用Redux Toolkit与createAsyncThunk完成操作后如何正确导航？

方案一：在AsyncThunk中重新抛出错误 #

问题核心是你在signInUser的catch块里捕获了错误但没有重新抛出，导致dispatch(signInUser())返回的Promise始终处于resolved状态，所以handleSubmit里的try块会一路执行到navigate。

修改signInUser代码：

export const signInUser = createAsyncThunk(
  "auth/loginUser",
  async (user, thunkAPI) => {
    const { username, password } = user;
    try {
      const res = await axios.post("/api/auth/login", { username, password });
      thunkAPI.dispatch(loginUser(res.data));
      return res.data;
    } catch (err) {
      console.log(err.message);
      thunkAPI.dispatch(setErrors(err.response.data));
      // 重新抛出错误，让dispatch返回的Promise变为rejected状态
      throw err;
    }
  }
);

修改后，登录失败时dispatch(signInUser())会返回rejected的Promise，自动进入handleSubmit的catch块，不会执行导航：

const handleSubmit = async (e) => {
  e.preventDefault();
  const { username, password } = formData;
  try {
    await dispatch(signInUser({ username, password }));
    // 仅登录成功时执行导航
    navigate("/posts");
  } catch (err) {
    console.log(err.message);
    // 这里处理登录失败的逻辑
  }
};

方案二：判断AsyncThunk的执行结果 #

如果不想抛出错误，也可以直接通过dispatch返回的结果判断执行状态。createAsyncThunk的dispatch返回值包含明确的状态标识：

const handleSubmit = async (e) => {
  e.preventDefault();
  const { username, password } = formData;
  const result = await dispatch(signInUser({ username, password }));
  
  // 匹配成功状态的action
  if (signInUser.fulfilled.match(result)) {
    navigate("/posts");
  } else {
    // 登录失败时的处理逻辑
    console.log("登录失败");
  }
};

这种方式不需要修改signInUser的代码，直接在组件内判断结果类型即可实现需求。

内容的提问来源于stack exchange，提问作者R.J.