Portfolio Project - Reddit page

Hi there.

I have run into a problem I can’t find an answer about anywhere…
I have created this Async Thunk but the code does not work.
After some debugging, I have discovered that my fetch() returns a function instead of an Object.
Can anyone help me, please?

Here is the code:

export const fetch = createAsyncThunk(
    "feed/get",
    async (feed) => {
        const data = await fetch(`https://www.reddit.com/r/meirl/comments/136g1rn/meirl.json`);
        console.log(typeof(data)); //Prints 'function'
        const res = await data.json();
        return res;
    }
)

I don’t think the issue is with the type of the data object, as our code is almost exactly the same. However, when you return the res object, you should probably access the correct property, which you can see in my working code below:

export const getPosts = createAsyncThunk(
    'subreddits/getPosts',
    async ({subreddit, sort}) => {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}/${sort}.json`)
        const data = await response.json()
        return data.data.children
    }
)

Check out what the actual json object looks like by putting the url into your browser and going there, and you’ll be able to see what you’re looking for.

Also, this is a small thing, but technically, the initial object returned is the response from the fetch command, so you should probably call it as such. The data object should then be the json’d return of the response.

1 Like