Build Youtube in React 26: Populating Home feed with most popular videos

1 Overview

In the last few tutorials we worked on fetching the most popular videos via Youtube's API. We already have the data in our Redux state, but we haven’t populated our Home feed with it.

Let’s do this now.

2 Most popular videos in Home feed

2.1. Redux selector for most popular videos

We already talked about the importance of selectors in Redux. They help us to keep the coupling between our global state and our components low. If needed, please refer to a previous tutorial where we explain their purpose.

We already used selectors when we were building the api reducer (src/store/reducers/api.js).

In this case, we just created a function that returns state.api.libraryLoaded. We didn’t compute any derived data from our state.

With our most popular videos, things are a little bit different. Ideally our component gets an array of the videos it should display and renders them accordingly. However, remember that due to normalisation, we just store the video ids in our videos.mostPopular object and put all the video data our videos.byId “dictionary”.

We don’t want our component to reassemble this information because then it would have a pretty tight coupling to our Redux state. Therefore, we will use selectors, i.e. we will use redux-reselect. We already covered the purpose of selectors and redux reselect. If you are not familiar with reselect, please check out this blog post here to understand the basics.

Reselect offers us the possibility to calculate derived data from our state (i.e. an array with the most popular videos). The derived data is cached and only recomputed if the underlying state changes. This makes the entire process pretty efficient.

2.2. Installing redux reselect

Some of you might say, well, that’s not really needed here, we don’t have performance problems. Yes, that’s true. But if we use selectors, let’s use them properly right away. We don’t want to refactor our codebase later on. And believe me I know what I’m talking about because the initial version of the this app didn’t use selectors or reselect. Refactoring this took quite some time. And you don’t wanna make your life miserable, do you? 🤓

Install reselect by running:

Now that we have reselect, let’s create our most popular videos selector. We will colocate it with our reducer, as recommended by Dan Abramov, the creator of Redux.

2.2. Adding most popular videos selector

Please put the following code inside src/store/reducers/videos

The createSelector function is variadic function, i.e. it accepts an arbitrary amount of parameters. Say the createSelector function has n parameters, then the first n - 1 parameters are functions that get a particular part of our global Redux state. The function's last argument is the function that actually computes the derived state. The function's return value is cached.

To return an array of the most popular videos, we need to access two parts of our global state. First of all, we need our big “video dictionary” where we store the details of each video. This is what the first function in the createSelector’s argument list is returning. Second, we need to get the the video ids that correspond to the most popular videos. We can do that by accessing state.mostPopular.

Finally we can compute our array by joining our two objects together

So to sum up: our selector will depend on two parts of the state, that is state.videos.byId and state.videos.mostPopular. As soon as at least one of them gets updated, reselect will re evaluate the function that computes the derived part of the state. In our case we return an array of the most popular videos.

2.3. Adding most popular videos selector to HomeContent component

Great, now that we got this out of the way, we only have to wire up our HomeContent component with the most popular videos. We do so by making use of the react-redux connect helper.

We create a mapStateToProps function to pull in the selector we defined earlier. By doing so, we have access to an array of most popular videos via this.props.mostPopularVideos. There is also a new function called getTrendingVideos that returns us the first 12 videos we have stored. At first, we only want to display a limited amount of trending videos and not all of them at once.

Note that we deleted the second VideoGrid item we hard-coded earlier. We don’t need it any more because we will generate the grids dynamically in the future. For now, let’s just focus on the most popular videos grid and do the other grids later.

We use the react-redux connect helper to connect our component to the global Redux state. Note that we are using a default export now and therefore we have to update our import statement in our Home component.

2.4 Making Youtube VideoGrid component dynamic

We now pass an array of the most popular videos down to our VideoGrid component. But we don’t do anything with it. Remember that the VideoGrid component is responsible for laying out our videos in a nice grid with a heading. Let’s make our it dynamic then.

First of all we check whether we get videos passed as props. If not, then we just render an empty div because there is nothing to display.

However, if we do have some videos, we just create a VideoPreview element for each of them. As soon as we map over an array and create components dynamically, we should pass a key prop so that React can render our components more efficiently. If you don’t do that, you get a warning.

Ok, so now our VideoGrid component dynamically creates VideoPreview elements and lays them out as desired. Now we only need to make our VideoPreview component dynamic.

2.5 Making Youtube VideoPreview component dynamic

Let’s display the data we get passed as props in VideoPreview.

As before, we check if this.props.video is truthy. If not, we just return an empty <div>. You can see that we replaced the static dummy data we added before with data from the Youtube endpoint. If you are not sure on how the video object is structured, please check out the endpoint’s response in the Youtube API explorer.

3 Wrap Up

Here’s how our Youtube app looks right now. 

Click on the image to see it in high resolution.

First of all, it’s nice that we made the Home feed a little bit more dynamic. However, you can see that the video duration and the publication date definitely need some formatting.

Right now, they are not user-friendly. We will tackle that in the next tutorial.

As always thanks for reading. You can find the entire 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.