问题

Here's the code with the requested translation:

export const registerUser = createAsyncThunk(
  "auth/register",
  async (userData) => {
    try {
      const response = await axios.post(REGISTER_URL, userData);
      return response.data;
    } catch (error) {
      // console.log(error.response.data) the output is provided below
      throw error.response.data;
    }
  }
);

Output:

{
  "error": "Bad Request",
  "message": [
    "email should not be empty",
    "email must be an email"
  ],
  "statusCode": 400
}

Given this output format, how should I structure the state.error update within the reducer's .addMatcher()?

.addMatcher(
  (action) => action.type.endsWith("/rejected"),
  (state, action) => {
    state.loading = false;
    state.error = action.error.message; // Use action.error.message to set the error messages
  }
)

Complete code with the modification:

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

const REGISTER_URL = "your_register_api_url_here";

export const registerUser = createAsyncThunk(
  "auth/register",
  async (userData) => {
    try {
      const response = await axios.post(REGISTER_URL, userData);
      return response.data;
    } catch (error) {
      throw error.response.data;
    }
  }
);

const authSlice = createSlice({
  name: "auth",
  initialState: {
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(registerUser.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(registerUser.fulfilled, (state) => {
        state.loading = false;
        state.error = null;
      })
      .addMatcher(
        (action) => action.type.endsWith("/rejected"),
        (state, action) => {
          state.loading = false;
          state.error = action.error.message;
        }
      );
  },
});

export default authSlice.reducer;

Please replace "your_register_api_url_here" with the actual URL you are using for registration.

export const registerUser = createAsyncThunk(
  "auth/register",
  async (userData) => {
    try {
      const response = await axios.post(REGISTER_URL, userData);
      return response.data;
    } catch (error) {
      // console.log(error.response.data) the output is provided below
      throw error.response.data;
    }
  }
);

{
  "error": "Bad Request",
  "message": [
    "email should not be empty",
    "email must be an email"
  ],
  "statusCode": 400
}

.addMatcher(
  (action) => action.type.endsWith("/rejected"),
  (state, action) => {
    state.loading = false;
    state.error = ?; // What's the appropriate way to structure the error messages?
  }
)

答案1

得分: 2

你应该实际返回一个带有错误的拒绝承诺，而不只是重新抛出它。有关更多详情，请参阅处理 Thunk 错误。

示例：

export const registerUser = createAsyncThunk(
  "auth/register",
  async (userData, thunkAPI) => {
    try {
      const response = await axios.post(REGISTER_URL, userData);
      return response.data;
    } catch (error) {
      // console.log(error.response.data) 输出如下所示
      return thunkAPI.rejectWithValue(error.response.data);
    }
  }
);

从这里，它将只在 registerUser.rejected 动作的 payload 中。

.addMatcher(
  (action) => action.type.endsWith("/rejected"),
  (state, action) => {
    state.loading = false;
    state.error = action.payload; // 或从 payload 中选择你需要的内容
  }
)

export const registerUser = createAsyncThunk(
  "auth/register",
  async (userData, thunkAPI) => {
    try {
      const response = await axios.post(REGISTER_URL, userData);
      return response.data;
    } catch (error) {
      // console.log(error.response.data) the output is provided below
      return thunkAPI.rejectWithValue(error.response.data);
    }
  }
);

.addMatcher(
  (action) => action.type.endsWith("/rejected"),
  (state, action) => {
    state.loading = false;
    state.error = action.payload; // or pick out what you need from payload
  }
)