Redux 工具包：无法访问服务器发送的错误消息

Question

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

在客户端，我想显示我从服务器发送的自定义错误消息。但是，当我 console.log 操作对象时，错误消息显示为：'Request Failed with status code 500'。

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

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

代码片段如下：

productsSlice.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;

Products.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 实用函数访问从服务器发送的错误消息。

执行 return rejectWithValue(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;

Redux 工具包：无法访问服务器发送的错误消息

Redux Toolkit: Unable to get access to the error message sent from the server

error-handling

reactjs

redux

react-redux

redux-toolkit