当你的操作完成后，如何使用redux-toolkit和createAsyncThunk()进行导航？

yshpjwxd 于 2023-04-06 发布在其他

关注(0)|答案(1)|浏览(128)

定义的操作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));
    } 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()行动-据我所知。
所以我尝试从Login组件的handleSubmit()中导航。但是如果signInUser()操作触发了它的catch（由于登录失败），那么我不想在handleSubmit()中触发navigate("/posts")。我认为我需要它触发handleSubmit()中的catch，而不是执行navigate("/posts")。
或者用其他方式处理？

redux

来源：https://stackoverflow.com/questions/75892280/how-do-you-navigate-once-your-action-has-completed-with-redux-toolkit-and-create

1条答案

按热度按时间

tuwxkamq1#

createAsyncThunk Thunk***always***返回一个解析的Promise，其中包含fulfilled或rejected action对象。有关详细信息，请参阅处理Thunk结果。但基本要点是，返回的thunk具有unwrap属性，该属性提取已实现的payload，或者如果由rejectWithValue返回，则抛出错误对象或有效载荷。请参见展开结果操作。
打开返回的Promise。

const handleSubmit = async (e) => {
  e.preventDefault();
  const { username, password } = formData;
  try {
    await dispatch(signInUser({ username, password })).unwrap(); // <-- unwrap Promise
    navigate("/posts");
  } catch (err) {
    console.log(err);
  }
};

如果UI需要来自Thunk的值或错误，则这些也应该被返回。

export const signInUser = createAsyncThunk(
  "auth/loginUser",
  async (user, thunkAPI) => {
    const { username, password } = user;
    try {
      const { data } = await axios.post("/api/auth/login", { username, password });
      thunkAPI.dispatch(loginUser(data));
      return data; // <-- return POST response data
    } catch (err) {
      thunkAPI.dispatch(setErrors(err.response.data));
      return thunkAPI.rejectWithValue(err.response.data); // <-- return error payload
    }
  }
);

赞(0）回复(0）举报 2023-04-06

我来回答

当你的操作完成后，如何使用redux-toolkit和createAsyncThunk()进行导航？

1条答案

相关问题

热门标签

最新问答