extraReducers builder.addCase 拒绝状态未显示Using Redux Thunk With Redux Toolkit With Typescript

Question

我正在尝试使用 React 向端点发出 POST 请求。在我的

builder.addCase

减速器的已完成状态下，我的数据会生成或在完成后返回给我，但在我的

builder.addCase

减速器的拒绝状态下，检查我的 Redux 开发工具，即使我有错误，也没有找到拒绝状态。相反，应该处于拒绝状态的错误消息被发现或填充为已完成状态。检查 Redux Dev Tools 我只能找到待处理和已完成状态，找不到拒绝状态。

这是我的代码：

export const userRegisterAction = createAsyncThunk(
  "users/register",
  async (user: User, { rejectWithValue }) => {
    try {
      const response = await axios.post(
        "http://localhost:5000/api/users/register",
        user,
      );
      return response.data;
    } catch (error) {
      return rejectWithValue(error);
    }
  }
);

这是我的切片：

const usersSlices = createSlice({
  name: "users",
  initialState: {
    userAuth: "login",
    registered: {},
    loading: false,
    Error: ""
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(userRegisterAction.pending, (state) => {
      state.loading = true
    })

    builder.addCase(userRegisterAction.fulfilled, (state, { payload }) => {
      state.registered = payload
    })

    builder.addCase(userRegisterAction.rejected, (state) => {
      state.loading = false;
    })
  }
});

export default usersSlices.reducer;

这是我发出行动的地方。

const dispatch = useAppDispatch(); 
   
export interface User {
  firstName : string;
  password : string;
  lastName: string;
  email : string;
}

export const Signup = (): JSX.Element => {
  const [passwordFieldType, setPasswordFieldType] = useState<boolean>(false);
  const [user, setUser] = useState<User>({
    firstName: "",
    lastName: "",
    email: "",
    password: ""
  });

  const dispatch = useAppDispatch();

  const handleInputChange = (e: any) => {
    const name = e.target.name;
    const value = e.target.value;
    setUser({
      ...user,
      [name]: value.trim()
    });
  }

  const handleInputSubmit = async (event: any) => {
    event.preventDefault();

    const { firstName, lastName, email, password } = user;

    if (!firstName || !lastName || !email || !password) {
      return toast.error(
        "Please, fill up all inputs !!!",
        {
          toastId: "fill_inputs", 
          position: toast.POSITION.TOP_CENTER,
          autoClose: 1000,
        }
      );
    }

    const response = await dispatch(userRegisterAction({
      firstName,
      email,
      password,
      lastName
    }))
  }
}

我已经尝试了所有能做的事情，但没有成功。我也上网查了，没有相关的帮助或解答。

Answer 1

几分钟前我遇到了同样的挑战。对我来说，这是因为我没有在“rejectWithValue”之前添加“return”；这阻止了我的“拒绝”工作，因为该功能是一个具有三种状态的承诺。每当您履行承诺时，请务必返回您的回复。 对于您来说，您需要在拒绝函数中解析“error.response.data”而不是仅解析“error”，并使用被拒绝的操作更新状态“Error”。请参阅下面的实现。

之前的userRegisterAction函数的实现

export const userRegisterAction = createAsyncThunk(
  "users/register",
  async (user: User, { rejectWithValue }) => {
    try {
      const response = await axios.post(
        "http://localhost:5000/api/users/register",
        user,
      );
      return response.data;
    } catch (error) {
      return rejectWithValue(error);
    }
  }
);

userRegisterAction 函数的新实现

export const userRegisterAction = createAsyncThunk(
      "users/register",
      async (user: User, { rejectWithValue }) => {
        try {
          const response = await axios.post(
            "http://localhost:5000/api/users/register",
            user,
          );
          return response.data;
        } catch (error) {
          return rejectWithValue(error.response.data); //This carries the response you are receiving from the server
        }
      }
    );

以前的 usersSlice 实现

const usersSlices = createSlice({
  name: "users",
  initialState: {
    userAuth: "login",
    registered: {},
    loading: false,
    Error: ""
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(userRegisterAction.pending, (state) => {
      state.loading = true
    })

    builder.addCase(userRegisterAction.fulfilled, (state, { payload }) => {
      state.registered = payload
    })

    builder.addCase(userRegisterAction.rejected, (state) => {
      state.loading = false;
    })
  }
});

export default usersSlices.reducer;

usersSlice 的新实现

const usersSlices = createSlice({
  name: "users",
  initialState: {
    userAuth: "login",
    registered: {},
    loading: false,
    Error: ""
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(userRegisterAction.pending, (state) => {
      state.loading = true
    })

    builder.addCase(userRegisterAction.fulfilled, (state, { payload }) => {
      state.registered = payload
    })

    builder.addCase(userRegisterAction.rejected, (state) => {
      state.loading = false;
      state.Error = payload; // Note: I updated the state here
    })
  }
});

export default usersSlices.reducer;

我希望这可以帮助您解决该错误。

Answer 2

就我而言，我在 createAsyncThunk 的 catch（错误）中使用

throw error.response.data;

并在 .rejected 中设置

state.error = action.error.message;