Problems with createAsyncThunk

I have just completed Learn Redux on Codecademy and want to that knowledge in practice. But I have an error. When I create extraReducers for updating the state to actual promise status it does not add information and displays error shown on the image below

getUserSlice.js

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchUserInfo } from '../../api';

export const loadUser = createAsyncThunk('getUser/loadUser', async (arg, thunkAPI) => {
  const data = await fetchUserInfo();
  const json = await data.json();
  return json;
});
const sliceOptions = {
  name: 'getUser',
  initialState: {
    info: [],
    isLoading: false,
    hasError: false,
  },
  reducers: {},
  extraReducers: {
    [loadUser.pending]: (state, action) => {
      state.isLoading = true;
      state.hasError = false;
    },
    [loadUser.fulfilled]: (state, action) => {
      state.info.push(action.payload);

      state.isLoading = false;
      state.hasError = false;
    },
    [loadUser.rejected]: (state, action) => {
      state.isLoading = false;
      state.hasError = true;
    },
  },
};

export const getUserSlice = createSlice(sliceOptions);
console.log(getUserSlice);

export const selectUserInfo = (state) => {
  console.log(state);
  return state;
};

export default getUserSlice.reducer;

api.js

export const fetchUserInfo = async () => {
   const user = fetch('http://localhost:5000/api/user');
   const json = await user.json();

   return json;
}

Error

error

Console.log of getUserSlice and state in the selector

console log (getUserSlice and second state)

1 answer

  • answered 2021-10-13 04:35 Erwin Ramadhan

    Maybe you can use (builder) => {} function in extraReducer and you edit your loadUser because your Api.js already return json like code below:

    import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
    import { fetchUserInfo } from '../../api';
    
    export const loadUser = createAsyncThunk('getUser/loadUser', async (arg, thunkAPI) => {
      return await fetchUserInfo();
    });
    const sliceOptions = {
      name: 'getUser',
      initialState: {
        info: [],
        isLoading: false,
        hasError: false,
      },
      reducers: {},
      extraReducers: (builder) => {
      builder
        .addCase(loadUser.pending, (state) => {
         state.isLoading = true;
         state.hasError = false;
        })
        .addCase(loadUser.fulfilled, (state, action) => {
         state.info.push(action.payload)
         
         state.isLoading = false;
         state.hasError = false;
        })
        .addCase(loadUser.rejected, (state, action) => {
         state.isLoading = false;
         state.hasError = true;
        })
      },
    };
    
    export const getUserSlice = createSlice(sliceOptions);
    console.log(getUserSlice);
    
    export const selectUserInfo = (state) => {
      console.log(state);
      return state;
    };
    
    export default getUserSlice.reducer;
    

    and you maybe forgot to add await before fetch, you should edit your fetching data in api.js into this below:

    export const fetchUserInfo = async () => {
       const user = await fetch('http://localhost:5000/api/user');
       const json = user.json();
    
       return json;
    }
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum