Build Youtube in React 26: Populating Home feed with most popular videos
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
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 (
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
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
reselect. Refactoring this took quite some time. And you don’t wanna make your life miserable, do you? 🤓
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
2.2. Adding most popular videos selector
Please put the following code inside
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
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.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
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
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
As before, we check if
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.