Javascript 需要有关 Redux Toolkit 的一些帮助

发布于08月11日

重音如下所示:

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
}

在给定这种输出格式的情况下，我应该如何在Reducer的.addMatcher()中构造state.error更新？

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

推荐答案

你可能真的应该把被拒绝的promise 和错误放在一起，而不是仅仅把它重新扔出go .有关更多详细信息，请参见Handling Thunk Errors.

示例:

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);
    }
  }
);

从现在开始，它将只在registerUser.rejected个动作的payload.

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