Build Youtube in React 39: fetching comments
We’re almost done with our
Watch component. The only thing we haven’t covered yet is comments.
Right now, we just display some hard-coded comments.
Click on the image to see it in high resolution.
Let’s change that and fetch the actual comments for a specific video.
2 Fetching video comments
2.1. Youtube Comments endpoint
Comments can be fetched by reaching out to the
Youtube /commentThread endpoint. We only need to send along a specific
video id to get a list of the available comments. I encourage you to have a look at the endpoint in the API explorer.
We basically need to fire a
GET request to the following endpoint.
A typical response might look like this:
We won’t need all of the
fields. But you can see that it returns an
items array as well which contains detailed information on a
comment thread. A
comment thread has a top level comment and may have “sub comments”. Currently we’re only interested in the top level comments.
2.2. Let’s talk about state
As part of this tutorial series, we will only display the top level comments. That’s why the state for our comments will be rather simple.
We take the very same approach we took with our videos and will put all of our comments into a “big dictionary” for an easy lookup. In addition we associate
video ids with an array of
comment ids for an easy lookup.
Our new state might look like this:
We associate each
video id with an
object contains a
next page token and a list of
We store the
next page token in case we want to fetch more comments when we hit the bottom of the page. Each comment is associated with its
id in the
byId “dictionary” for easy and fast lookup.
2.3. Creating the comment thread request
Now that we’re clear on our state, we first need to add a new
function that performs the actual network request. Head over to the
src/store/api/youtube-api.js file and add the following request.
We’re reaching out to the
/commentsThreads endpoint, pass the
video video and the
next page token. Note that if our
next page token is
null, we won’t send it along. Our
function automatically kicks out fields whose value is
2.4. Comment thread action creator
First things first, we need
action creators. Since we will store the
comments in a new top level object inside of our
Redux state, we should put all the logic into a separate file.
- Create a new file called
So here’s our
Oour request function expects two parameters. The first parameter is the
video id for which we’d like to fetch our comment threads. The second parameter is the
next page token, in case we want to gradually load more comments.
Remember that the
Youtube endpoint supports pagination and that it does not return all available
comments at once. That is because video might have tens of thousands of
comments. Fetching them in one request would be too much.
2.5. Fetching comments inside our watch component
Now that we have the ability to fetch
comments, we should use it inside our
Watch component. So all we need to do is to make yet another request to the Youtube endpoint in our
Oh well, that was easy, wasn’t it? We just reach out to the
/commentThread endpoint. Don’t forget to import the
buildCommentThreadRequest function at the top!
2.6. Comments reducer skeleton
Now that we’re actually fetching data from the
/commentThreads endpoint, we need a
reducer to handle the response. Let’s create a new file called
comment.js inside our
src/store/reducers directory because
comment is a new top level element in our global
- Create a new file called
Let’s first add the basic skeleton of our
reducer state contains of an object that contains an empty
Initially, we react to the
WATCH_DETAILS_SUCCESS action type.
Well, there’s one more thing. When we parse the response in our new
reducer, we don’t know the
video id where the
comments belong to. Now there are two options. We could fish out the video details response from our response array and extract the
video id from there. As an alternative, we could just pass the
videoId as an additional parameter in our action creator. The second option is the safer option because we don’t depend on the result of another request. So let’s do this first.
2.7. Passing the video id as a parameter
First, we need to pass on the
video id in our
WATCH_DETAILS worker saga into our success callback. We must update the
fetchWatchDetails function inside
src/store/sagas/watch.js. In here, we need to pass the
video id to our success action creator:
Right now our success action creator ignores the
videoId parameter. This must be changed.
Nice. Now we can access the
video id in our reducer.
2.8. Updating the global Redux state when comments are loaded
We haven’t implemented the
function yet (
function is supposed to do the actual parsing. Let’s do this step by step.
We fish out our
/commentThread request by picking the first first of kind
youtube#commentThreadListResponse. Have a look at the response from the
comments endpoint again. in here, there’s a kind field so we know what type of response it is. We then delegate all the actual work to a new function called
Here’s how we implement this.
First, we iterate over our response’s
item array and associate each comment id with the actual object.
Now that we have the
comment ids we need, let’s update the state. We need to make sure that we don’t throw away the
comment ids we already have for a particular video. In case we already have some
comment ids, we merge our “old” data with our new data.
Finally, we extract the response’s
next page token and
return the updated state. Note that we are making use of our
videoId parameter when creating the new state.
2.9. Wiring up our reducer with our root reducer
Finally we must plug our
comments reducer into our
root reducer. Head over to the
src/store/reducers/index.js and add the comments reducer.
3 Wrap Up
That was a lot of work. Let’s check in our
Redux Dev tools whether our magic works.
Head over to your
Watch component and watch an arbitrary video.
Redux Dev tools state should look like this.
We’re getting there. Let’s continue this in the next tutorial because otherwise this one gets too long.Follow @productioncoder
Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.
If you are interested in more high-quality production-ready content, please enter your email below.