title: Redux Toolkit: Unable to get access to the error message sent from the server
body: <p>I have a Products component, that makes a GET request to '/api/products'. At the backend, in the route handler function, I am throwing an error &amp; sending a custom error message ('Not Authorized') to the client.<br />
  <a href="https://i.stack.imgur.com/K3n80.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K3n80.jpg" alt="enter image description here" /></a></p>
  <p>At client side, I want to display the custom error message that I have sent from the server. However, when I console.log the action object, the error message reads: 'Request Failed with status code 500'.
  <a href="https://i.stack.imgur.com/vDhKl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vDhKl.jpg" alt="enter image description here" /></a></p>
  <p><strong>How can I get access to the error message that I send back from the server?</strong></p>
  <p>I did some research for handling error in createAsyncThunk. As per the documentation, I can handle errors with <strong>rejectWithValue</strong>.But I couldn't figure out how to implement that in my case.</p>
  <p>Code snippets are given below:</p>
  <p>productsSlice.js</p>
  <pre><code>import { createSlice, createAsyncThunk } from &quot;@reduxjs/toolkit&quot;;
  import axios from &quot;axios&quot;;
  
  const initialState = {
    status: &quot;idle&quot;,
    products: [],
    error: null,
  };
  
  export const fetchProducts = createAsyncThunk(
    &quot;products/fetchProducts&quot;,
    async () =&gt; {
      const { data } = await axios.get(&quot;/api/products&quot;);
      return data;
    }
  );
  
  export const productsSlice = createSlice({
    name: &quot;products&quot;,
    initialState,
    reducers: {},
    extraReducers: {
      [fetchProducts.fulfilled]: (state, action) =&gt; {
        state.status = &quot;succeeded&quot;;
        state.products = action.payload;
      },
      [fetchProducts.pending]: (state, action) =&gt; {
        state.status = &quot;loading&quot;;
      },
      [fetchProducts.rejected]: (state, action) =&gt; {
        console.log(action);
        state.status = &quot;failed&quot;;
        state.error = action.error.message;
      },
    },
  });
  
  export default productsSlice.reducer;
  </code></pre>
  <p>Products.js</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { Row, Col } from &quot;react-bootstrap&quot;;
  import Product from &quot;./Product&quot;;
  import { fetchProducts } from &quot;./productsSlice&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  
  const Products = () =&gt; {
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(fetchProducts());
    }, [dispatch]);
  
    const { status, products, error } = useSelector((state) =&gt; state.products);
  
    return (
      &lt;&gt;
        &lt;h1&gt;Latest Products&lt;/h1&gt;
        {status === &quot;loading&quot; ? (
          &lt;h2&gt;Loading...&lt;/h2&gt;
        ) : error ? (
          &lt;h3&gt;{error}&lt;/h3&gt;
        ) : (
          &lt;Row&gt;
            {products.map((product) =&gt; (
              &lt;Col sm={12} md={6} lg={4} xl={3} key={product._id}&gt;
                &lt;Product item={product} /&gt;
              &lt;/Col&gt;
            ))}
          &lt;/Row&gt;
        )}
      &lt;/&gt;
    );
  };
  
  export default Products;
  </code></pre>