Build Youtube in React 28: Fetching Video Categories
1 Overview

We’re finally done with the most popular videos. When you look at our mockup again, you see that we have more than one video grid.
In our Home
feed we first show the top 12
trending videos on Youtube
. The next video grids show the top 12
trending videos for a specific category, e.g. Lifestyle.
When fetching most popular videos, we can put a category id
in our request so Youtube
will only return the most popular videos for the category we specified.
However, we first need to know which categories actually exist.
This is what we will do now.
2 Fetching video categories from Youtube Data API
2.1. Youtube VideoCategories API endpoint
Please have a look at the API explorer. You will see that Youtube offers a VideoCategories resource from which we can pull available categories.
A typical endpoint response looks like this:
2.2. Let’s talk about state
Let’s recap the state we have so far.
We somehow have to get the video categories into our state. As the name already says, the categories
are related to videos. Therefore, it makes sense to put them into the videos
object. From the API
response above, we only need two pieces of information: the category id
and the category's title
. That’s it, this should be sufficient. Please have a look at the following example state because it illustrates how we will include video categories into our global Redux
state.
As you can see, we just added a new categories
object where we we have the category id
as a key and its title as a value. Nice. So we know what we’re up to.
2.3. Building the request for video categories
You already saw in the API explorer that we need to send a GET
request to the following endpoint.
Let’s add a function inside src/store/api/youtube-api.js
to do this. That’s any easy one.
2.4. Youtube video categories actions
The nice thing is that we have some common functions
already in place, so creating actions is super easy.
So head over to your src/store/actions/video.js
and add
As usual, we create three action types: VIDEO_CATEGORIES_REQUEST
, VIDEO_CATEGORIES_SUCCESS
and VIDEO_CATEGORIES_FAILURE
. We use our createAction
function to avoid too much boilerplate.
2.5. Creating Youtube VideoCategories sagas
We recycle our fetchEntity
method we created in tutorial 23. This function
executes the request we pass it, waits for the result and dispatches a SUCCESS
or FAILURE
action afterwards.
The bind
function takes the fetchEntity
function, creates a copy of it and already pre-populates it with the parameters we want. We use bind
because our redux-saga
needs a function it can execute. Note that we can directly bind to fetchEntity
because we don’t have any additional parameters to pass.
The first parameter of the bind
function is this
. Since we don’t care about this
here, we just pass null
.
We could have also used:
Both approaches are fine. The statement above probably gets clearer if we add a few more parentheses.
Note that both statements are semantically equivalent, the second one is just more explicit but has more parentheses.
Now we just need to wire up our watcher
saga with our root saga
inside src/store/sagas/index
.
2.6. Video categories reducer
Did you notice that we are moving much faster because we have some basic structure in place? Kinda nice, isn’t it?
We only need the reducer. Let’s modify our switch statement
inside src/store/reducers/videos
first.
Note that we added a a new empty categories state in our initial state. We also added a new case statement for the VIDEO_CATEGORIES_SUCCESS
action type.
The only thing we do in our reduceFetchVideoCategories
function is to convert the items
array into an object. In this object the category id
is used as a key and the category title
is used as the value.
So nothing special here.
2.7. Video categories selector
Let’s just add a selector
to reduce the coupling between our components later on.
Remember that we always colocate our selectors with our reducers, so we just put it into src/store/reducers/videos.js
file.
The selector
returns us all category ids in an array and uses reselect
to cache the results.
2.8. Fetching video categories in Home feed
It’s time to use our new logic in our Home
component.
First of all, we wire up our video categories request action creator in our mapDispatchToProps
function. Like so we can call this.props.fetchVideoCategories()
. We need video categories to display the most popular videos
for a certain category. Since the video categories request does not have any parameters, we fetch them when we are fetching the most popular videos
.
To avoid additional boilerplate code, we created a new function
called fetchCategoriesAndMostPopularVideos
. In this function
we fetch both the most popular videos and the video categories in parallel.
So instead calling fetchMostPopularVideos
inside componentDidMount
and componentDidUpdate
, we now fetch both the categories and the most popular videos.
3 Intermediary result
We don’t display the video categories yet, but we can see in our Redux Devtools
extension that they are fetched successfully.
Just start the app and click the redux Dev Tools
icon at the top right of your browser.
Click on the image to see it in high resolution.

4 Wrap Up
Nice. We now have our video categories in our Home feed
. Now that we know the categories
, we can start fetching the trending videos for each category.
We will do this in the next lecture.
You can find the project’s code on Github.
Follow @productioncoderPlease 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