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 @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.