使用 redux-toolkit 和 createAsyncThunk() 完成操作后如何导航？

Question

定义的动作登录用户：

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));
    } catch (err) {
      console.log(err.message);
      thunkAPI.dispatch(setErrors(err.response.data));
    }
  }
);

提交表单时，handleSubmit() 调度 signInUser() 操作。组件：

const Login = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { username, password } = formData;
    try {
      await dispatch(signInUser({ username, password }));
      // DON'T WANT BELOW CODE TO RUN IF signInUser() FAILS (BUT IT DOES)
      navigate("/posts");
    } catch (err) {
      console.log(err.message);
      // NEED THIS CATCH TO RUN IF IT FAILS
    }
  };

据我所知，在 signInUser() 操作中无法导航。

所以我试图从登录组件的 handleSubmit() 中导航。但是，如果 signInUser() 操作触发了它的捕获（来自失败的登录）——那么我不想在 handleSubmit() 中导航（“/posts”）。我想我需要它来处理 handleSubmit() 中的问题——而不是执行 navigate("/posts")。

或者以其他方式处理它？