CODEWITHSUNDEEP
async-awaitreact-hooksredux-toolkit
Peter
Peter

Reputation: 331

TypeError: Cannot read property 'type' of undefined (redux toolkit)

I'm trying to fetch some data with redux toolkit but it doesn't work. I just keep getting the error TypeError: Cannot read property 'type' of undefined. I set up the store correct because i have other reducer working fine. But when i tried the asyn or fetch data, i have this problem

Error:

enter image description here

App.js:

The code stop at const actionResult = await dispath(getLiveContest()) it doesn't console log anything after.

  const dispatch = useDispatch();

  useEffect(() => {
    const fetchLiveContest = async () => {
      try {
        console.log(1);
        const actionResult = await dispatch(getLiveContest());
        console.log(2);
        const liveContest = unwrapResult(actionResult);
        console.log(liveContest);
      } catch (error) {
        console.log("Failed to fetch live contest: ", error);
      }
    };

    fetchLiveContest();
  }, []);

GetLiveContest():

Here is the code of the function. I tried to return {name: 'lala'} and it's still gave me the type error

export const getLiveContest = createAsyncThunk(
  "contests/fetchLive",
  async (params, thunkAPI) => {
    console.log(thunkAPI, "thunkAPI");
    console.log(params);
    const liveContest = await axios ...

    return liveContest;
  }
);

Code of the slide:

export const liveContestSlide = createSlice({
  name: "live",
  initialState: {
    contest: [],
    loading: "idle",
  },
  reducers: {},
  extraReducers: {
    // Add reducers for additional action types here, and handle loading state as needed
    [getLiveContest.fulfilled]: (state, action) => {
      // Add contest to the state array
      state.contest.push(action.payload);
    },
  },
});

I followed the redux toolkit doc. I also checkout other question on stackoverflow but still can't fix the error, pls help

Upvotes: 5

Views: 13784

Answers (1)

Peter
Peter

Reputation: 331

I just change import getLiveContest from "./contestSlice"; to import { getLiveContest } from "./contestSlice"; and it work, turn out i just import the function wrong

Upvotes: 15

Related Questions