reactjs - Redux工具包: Unable to get access to the error message sent from the server

Question

我有一个产品组件，它向“/api/products”发出 GET 请求。在后端的路由处理函数中，我抛出一个错误并向客户端发送一条自定义错误消息(“未授权”)。

在客户端，我想显示从服务器发送的自定义错误消息。但是，当我对操作对象进行 console.log 时，错误消息显示:“请求失败，状态代码为 500”。

如何访问从服务器发回的错误消息？

我对 createAsyncThunk 中的错误处理进行了一些研究。根据文档，我可以使用 rejectWithValue 处理错误。但我不知道如何在我的情况下实现它。

代码片段如下:

产品Sli​​ce.js

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

const initialState = {
  status: "idle",
  products: [],
  error: null,
};

export const fetchProducts = createAsyncThunk(
  "products/fetchProducts",
  async () => {
    const { data } = await axios.get("/api/products");
    return data;
  }
);

export const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {},
  extraReducers: {
    [fetchProducts.fulfilled]: (state, action) => {
      state.status = "succeeded";
      state.products = action.payload;
    },
    [fetchProducts.pending]: (state, action) => {
      state.status = "loading";
    },
    [fetchProducts.rejected]: (state, action) => {
      console.log(action);
      state.status = "failed";
      state.error = action.error.message;
    },
  },
});

export default productsSlice.reducer;

产品.js

import React, { useEffect } from "react";
import { Row, Col } from "react-bootstrap";
import Product from "./Product";
import { fetchProducts } from "./productsSlice";
import { useDispatch, useSelector } from "react-redux";

const Products = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchProducts());
  }, [dispatch]);

  const { status, products, error } = useSelector((state) => state.products);

  return (
    <>
      <h1>Latest Products</h1>
      {status === "loading" ? (
        <h2>Loading...</h2>
      ) : error ? (
        <h3>{error}</h3>
      ) : (
        <Row>
          {products.map((product) => (
            <Col sm={12} md={6} lg={4} xl={3} key={product._id}>
              <Product item={product} />
            </Col>
          ))}
        </Row>
      )}
    </>
  );
};

export default Products;

Answer 1

我终于设法使用rejectWithValue实用程序函数访问从服务器发送的错误消息。

执行 returnrejectWithValue(errorPayload) 会导致被拒绝的操作使用该值作为 action.payload。

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

const initialState = {
  status: "idle",
  products: [],
  error: null,
};

export const fetchProducts = createAsyncThunk(
  "products/fetchProducts",
  async (_, { rejectWithValue }) => {
    try {
      const { data } = await axios.get("/api/products");
      return data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);

export const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {},
  extraReducers: {
    [fetchProducts.fulfilled]: (state, action) => {
      state.status = "succeeded";
      state.products = action.payload;
    },
    [fetchProducts.pending]: (state, action) => {
      state.status = "loading";
    },
    [fetchProducts.rejected]: (state, action) => {
      console.log(action);
      state.status = "failed";
      state.error = action.payload.message;
    },
  },
});

export default productsSlice.reducer;