Why createAsyncThunk is not returning error message?

Question

The url I put inside axios.get is a wrong url. I am expecting an error message through action.error.message in the reducer section. But it's not returning any message despite the fetch request being failed. The code as follows:

usersSlice.js

const createSlice = require("@reduxjs/toolkit").createSlice;
const createAsyncThunk = require("@reduxjs/toolkit").createAsyncThunk;
const axios = require("axios");

const initialState = {
  loading: false,
  users: [],
  error: "",
};

const fetchUsers = createAsyncThunk("users/fetchUsers", () => {
  return axios
    .get("https://jsonplaceholder.typicodeasdf.com/users")
    .then((res) => console.log(res.data.map((user) => user.name)));
});

const usersSlice = createSlice({
  name: "users",
  initialState,
  extraReducers: (builder) => {
    builder.addCase(fetchUsers.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(fetchUsers.fulfilled, (state, action) => {
      state.loading = false;
      state.users = action.payload;
      console.log("success");
    });
    builder.addCase(fetchUsers.rejected, (state, action) => {
      state.loading = false;
      state.users = [];
      state.error = action.error.message;
      console.log("failed");
    });
  },
});

module.exports = usersSlice.reducer;
module.exports.fetchUsers = fetchUsers;

store.js

const configureStore = require("@reduxjs/toolkit").configureStore;
const reduxLogger = require("redux-logger");
const usersSlice = require("./Features/users/userSlice");

const store = configureStore({
  reducer: {
    usersSlice: usersSlice,
  }, 
});

module.exports = store;

index.js

const { fetchUsers } = require("./App/Features/users/userSlice.js");
const store = require("./App/store.js");

console.log("intial state", store.getState());
const unsubscribe = store.subscribe(() =>
  console.log("updated state", store.getState())
);
store.dispatch(fetchUsers());
unsubscribe();

output

intial state { usersSlice: { loading: false, users: [], error: '' } }

updated state { usersSlice: { loading: true, users: [], error: '' } }

failed

Note In the output I am expecting

updated state { usersSlice: { loading: false, users: [], error: 'some error message' } }

score 0 · Answer 1 · answered Sep 05 '22 at 20:03

The thunk function in RTK has a built-in method to return an error message if the promise is rejected. I was actually willing to get that message. However, I resolved the problem. Instead of returning the data I actually console logged it. And completely forgot to fix it.

const fetchUsers = createAsyncThunk("users/fetchUsers", () => {
  return axios
    .get("https://jsonplaceholder.typicodeasdf.com/users")
    **.then((res) => console.log(res.data.map((user) => user.name)));**
});

Why createAsyncThunk is not returning error message?

1 Answers1