Build Youtube in React 38: fetching and displaying channel information
1 Overview
Let’s continue where we left off and fetch channel information when the user pastes the URL
into the web browser directly.
In this case, we don’t know the channel id
. All we know is the video id
. So we can start fetching information on that particular videos
and on related
videos. But as soon as we have the video details at hand, we can actually fire a consecutive request to fetch information about the channel.
In fact, we can include this request in our fetchVideoDetails
function
.
2 Fetching channel information when navigating to the page directly
2.1. Updating fetchWatchDetails
First things first. How do we know when we need to delay the channel request to the fetchVideoDetails
function?
Well we know it when the channelId
we get passed in our fetchWatchDetails
worker saga
is null
.
We need to pass this information on to our function
that performs the consecutive requests. We will do this by just passing a boolean
.
Just update the last line of code in the try
block. In this line we are calling a function
that performs consecutive requests.
2.2. Updating fetchVideoDetails worker saga
Now that we know whether we need to fetch the channel
information in the consecutive request or not, we need to adapt our code.
If we need to fetch the channel information, there’s no other way but doing a little bit of parsing of the previous request.
We look for the request that contains the details about the video
we are about fo display. Remember that the items
array from the response of kind VIDEO_LIST_RESPONSE
only contains one item
. That is because we explicitly requested information on a video
with a particular video id
.
We now grab the first element in the items
array and extract its channelId
value from the snippet
object.
Naaah 🧐 this is not ideal. We are parsing a previous request in our saga. But there’s currently no other way around it.
GraphQL would be nice in this case because then we would not have the hustle.
Ok, but this is the last time we parse a response in a sage for this tutorial. I promise. We only did it two times and only because we had no choice.
2.3. Updating channel reducer
We need to adapt our VIDEO_DETAILS_SUCCESS
reducer
to also parse the response of the channel
request.
Well, how hard can it be 👨💻
Let’s first update our channels
reducer to also react to the VIDEO_DETAILS_SUCCESS
action.
Now, the only thing that we still need to do is write the reduceVideoDetails
function
.
You’ve seen this pattern a couple of times now. First, we pick the channel
response from our responses array
. After that, we grab the items
array of our response and pick the first element. We know that the response will contain at most most element. That is because we explicitly asked for a channel
with a specific id
.
We then associate the channel with its id
and merge it into our channels.byId
state.
2.4. Verifying that our magic works
Head over to the Home
feed and click an arbitrary video. You should now be redirected to the Watch
component.
Now reload the page and have a look at your Redux dev tools
. You should see that there is an entry in our global state about the channel.
Click on the image to see it in high resolution.

3 Displaying channel information
The data is there, we just need to display it.
3.1 Creating a channel selector
To decouple our components from our state
, let’s create a channel
selector
that returns a channel for a specific id
.
We will put it into the src/store/reducers/channels.js
file.
3.2 Using our channel selector
To make use of our selector
, we update our mapStateToProps
function inside WatchContent.js
Now that we have pulled in the channel from our Redux
state, we can pass it on to the video info box
.
Update the props
of the VideoInfoBox tag
in WatchContent's
render
function
like so:
3.3 Making VideoInfoBox dynamic
Let’s add a new function that updates the text of the red subscribe button with the correct amount of subscribers in our VideoInfoBox
component
That was quite easy. We just added a new function
inside the VideoInfoBox.js
class and recycled our getShortNumberString
function
.
Pretty nice. Let’s make use of it in the component’s render
function.
We’ve done a couple of things here. First, we added a new safety check. We check if we get a channel object passed as props. If not, we just render
an empty <div>
. There would be nothing to show anyways.
In our render
function, we call our new getSubscriberButtonText
function
and save the channel's title
and the thumbnail URL
in a separate variable.
We then make use of these variables in our markup and display the correct information.
4 Wrap Up
Yes, yes, yes 😁.
Our stuff is working. Check out the Watch
component now.
Click on the image to see it in high resolution.

You can find the entire code on Github.
The only thing we don’t in our Watch
component yet, is the comments section. However, this will be pretty straight forward.
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.
Recent Comments