5

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

2
  • Please post the whole code and not the images as they are hard to read and we cannot copy paste them to reproduce the problem Commented Nov 11, 2020 at 16:05
  • okay i will fix Commented Nov 11, 2020 at 16:12

1 Answer 1

15

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.