如何以正确的方式使用 redux/toolkit 处理被拒绝的消息

Question

我有一个关于处理拒绝值的问题。 如果我尝试使用存在的 email 和密码分配 function，一切正常，但是当我输入随机的 email 和密码时，我无法到达来自后端的 404 错误消息。

这是我的切片代码

import { authService } from "../services/AuthService";

export const AuthSlice = createSlice({
  name: "weather",
  initialState: {
    authStatus: "idle",
    jwt: "",
    messageCode: "",
  },
  reducers: {},
  extraReducers: (builder) => {
    //Auth Controller
    builder
      .addCase(authService.pending, (state) => {
        state.authStatus = "loading";
      })
      .addCase(authService.fulfilled, (state, action) => {
        console.log("fullfiled", action);
        const {
          data: {
            code,
            message_code,
            result: { jwt },
          },
        } = action.payload;

        state.messageCode = message_code;
        state.jwt = jwt;
        state.authStatus = "succeeded";
      })
      .addCase(authService.rejected, (state, action) => {
        console.log("rejected", action.payload);
        state.authStatus = "failed";
      });
  },
});
export default AuthSlice.reducer;

这是服务代码

import axios from "axios";

export const authService = createAsyncThunk(
  "authController/auth",
  async (auth) => {
    const data = await axios({
      method: "post",
      url: "example.url",
      headers: {},
      data: {
        email: auth.email, 
        password: auth.password,
      },
    });
    return data;
  }
);

这些是来自后端的值。 如果我输入随机 email 和密码，后端返回{ "code": 0, "message": "User not found.", "message_code": "LOGIN_ERROR" }

如果我输入 exist email 并且密码后端返回{code:1,message_code:"LOGIN_SUCCESS",result:jwt:"token here"}

问题是当我输入随机值时，authService.rejected 正在运行，但服务没有采取任何行动。

我尝试在 axios 代码之后编写 catch，但这次即使我从服务中获取错误值，它也会进入 authService.fulfilled，这次代码无法正常找到 jwt 令牌，我收到一个新错误，这就是原因。

我想知道处理这个问题的最佳方法是什么。 有什么方法可以在 authService.rejected 中获取来自后端的错误消息，或者我是否需要编写 catch 并需要在 authService.fulfilled 中获取错误消息并写入 jwt 令牌错误的控件。

Answer 1

    name: "contactDetails",
initialState: {
  contactInfoData: [],
  loading: false,
  error: null,
},
extraReducers: {
  [getContactsList.pending]: (state, action) => {
    state.loading = true;
  },
  [getContactsList.fulfilled]: (state, { payload }) => {
    state.loading = false;
    state.contactInfoData = payload;
  },
  [getContactsList.rejected]: (state, action) => {
    state.loading = false;
    state.error = action.payload;
  },
}

我希望这会有所帮助