Build Youtube in React 28: Fetching Video Categories
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.
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
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
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_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
FAILURE action afterwards.
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
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
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
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
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
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
fetchCategoriesAndMostPopularVideos. In this
function we fetch both the most popular videos and the video categories in parallel.
So instead calling
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 @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.