REDUX工具包 - 即使有错误

Question

如果未注册用户，API将投掷401。但是，即使存在错误，ExuflaredUcer也执行满足的情况。这也发生了500和其他错误。

Exurothareucers

  extraReducers: (builder) => {
    builder
      .addCase(login.pending, function (state) {
        console.log("pending");
        state.isLoading = true;
      })
      .addCase(login.fulfilled, (state, action) => {
        console.log("fullfield");
        state.isLoading = false;
        state.user = action.payload;
        state.isAuthenticated = true;
      })
      .addCase(login.rejected, (state, action) => {
        console.log("rejected");
        console.log(action.payload);
        state.isLoading = false;
        state.error = true;
        state.message = action.payload;
        state.user = null;
      });
  }

asyncthunk登录方法

export const login = createAsyncThunk("auth/login", async (user, thunkAPI) => {
  try {
    let user = await authService.login(user);
    return user;
  } catch (error) {
    console.log(error);
    thunkAPI.rejectWithValue(error);
  }
});

登录authservice

const login = async (user) => {
  const response = await axios.post(`${PROXY}/${API_URL_LOGIN}`, user);
  if (response.data) {
    localStorage.setItem("user", JSON.stringify(response.data.data));
  }

  return response.data;
};

Answer 1

您尝试过以下内容吗？

return thunkAPI.rejectWithValue(error);

Answer 2

用这种方式运行良好！完整的登录代码。

    import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "@/Axios";
const initialState = {
  loading: false,
  user: {},
  error: "",
};

export const loginUser = createAsyncThunk(
  "users/loginUser",
  (user, thunkAPI) => {
    return axios
      .post("/login", user)
      .then((res) => {
        if (res.status === 200) {
          // localStorage.setItem("token", data.token);
          return res.data;
        }
      })
      .catch((err) => {
        return thunkAPI.rejectWithValue(err.response.data.message);
      });
  }
);

const loginSlice = createSlice({
  name: "users",
  initialState,
  extraReducers: (builder) => {
    builder.addCase(loginUser.pending, (state) => {
      state.loading = true;
    }),
      builder.addCase(loginUser.rejected, (state, action) => {
        state.loading = false;
        (state.user = {}), (state.error = action.payload);
      }),
      builder.addCase(loginUser.fulfilled, (state, action) => {
        (state.loading = false),
          (state.user = action.payload),
          (state.error = "");
      });
  },
});

export default loginSlice.reducer;