需要关于Redux Toolkit的一些帮助。

huangapple go评论158阅读模式
英文:

Need some help regarding Redux Toolkit

问题

Here's the code with the requested translation:

  1. export const registerUser = createAsyncThunk(
  2. "auth/register",
  3. async (userData) => {
  4. try {
  5. const response = await axios.post(REGISTER_URL, userData);
  6. return response.data;
  7. } catch (error) {
  8. // console.log(error.response.data) the output is provided below
  9. throw error.response.data;
  10. }
  11. }
  12. );

Output:

  1. {
  2. "error": "Bad Request",
  3. "message": [
  4. "email should not be empty",
  5. "email must be an email"
  6. ],
  7. "statusCode": 400
  8. }

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

  1. .addMatcher(
  2. (action) => action.type.endsWith("/rejected"),
  3. (state, action) => {
  4. state.loading = false;
  5. state.error = action.error.message; // Use action.error.message to set the error messages
  6. }
  7. )

Complete code with the modification:

  1. import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
  2. import axios from "axios";
  3. const REGISTER_URL = "your_register_api_url_here";
  4. export const registerUser = createAsyncThunk(
  5. "auth/register",
  6. async (userData) => {
  7. try {
  8. const response = await axios.post(REGISTER_URL, userData);
  9. return response.data;
  10. } catch (error) {
  11. throw error.response.data;
  12. }
  13. }
  14. );
  15. const authSlice = createSlice({
  16. name: "auth",
  17. initialState: {
  18. loading: false,
  19. error: null,
  20. },
  21. reducers: {},
  22. extraReducers: (builder) => {
  23. builder
  24. .addCase(registerUser.pending, (state) => {
  25. state.loading = true;
  26. state.error = null;
  27. })
  28. .addCase(registerUser.fulfilled, (state) => {
  29. state.loading = false;
  30. state.error = null;
  31. })
  32. .addMatcher(
  33. (action) => action.type.endsWith("/rejected"),
  34. (state, action) => {
  35. state.loading = false;
  36. state.error = action.error.message;
  37. }
  38. );
  39. },
  40. });
  41. export default authSlice.reducer;

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

英文:

The thunk appears as follows:

  1. export const registerUser = createAsyncThunk(
  2. "auth/register",
  3. async (userData) => {
  4. try {
  5. const response = await axios.post(REGISTER_URL, userData);
  6. return response.data;
  7. } catch (error) {
  8. // console.log(error.response.data) the output is provided below
  9. throw error.response.data;
  10. }
  11. }
  12. );

Output:

  1. {
  2. "error": "Bad Request",
  3. "message": [
  4. "email should not be empty",
  5. "email must be an email"
  6. ],
  7. "statusCode": 400
  8. }

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

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

答案1

得分: 2

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

示例:

  1. export const registerUser = createAsyncThunk(
  2. "auth/register",
  3. async (userData, thunkAPI) => {
  4. try {
  5. const response = await axios.post(REGISTER_URL, userData);
  6. return response.data;
  7. } catch (error) {
  8. // console.log(error.response.data) 输出如下所示
  9. return thunkAPI.rejectWithValue(error.response.data);
  10. }
  11. }
  12. );

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

  1. .addMatcher(
  2. (action) => action.type.endsWith("/rejected"),
  3. (state, action) => {
  4. state.loading = false;
  5. state.error = action.payload; // 或从 payload 中选择你需要的内容
  6. }
  7. )
英文:

You should probably actually return a rejected Promise with the error instead of just rethrowing it. See Handling Thunk Errors for more details.

Example:

  1. export const registerUser = createAsyncThunk(
  2. "auth/register",
  3. async (userData, thunkAPI) => {
  4. try {
  5. const response = await axios.post(REGISTER_URL, userData);
  6. return response.data;
  7. } catch (error) {
  8. // console.log(error.response.data) the output is provided below
  9. return thunkAPI.rejectWithValue(error.response.data);
  10. }
  11. }
  12. );

From here it will just be in the registerUser.rejected action's payload.

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

huangapple
  • 本文由 发表于 2023年8月11日 01:42:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76878146.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定