Build Youtube in React 30: Most popular videos per category reducer
Let’s continue where we left off and create the reducer to handle the
2 Youtube most popular videos reducer
First of all let me tell you that this reducer is probably one of the hardest and most complex things we will write during this tutorial series. But let’s take one step at a time.
2.1 Update videos reducer
We add a new case block to our
videos reducer for the
MOST_POPULAR_BY_CATEGORY_SUCCESS action. We delegate the parsing process to a function called
reduceFetchMostPopularVideosByCategory. A long name, I know, but it’s very descriptive.
Note that we pass three parameters instead of two here. Remember that the
Youtube endpoint sometimes returns varying video category ids even though we requested videos for one particular category. Therefore, we carry the categories array around which contains an array of
category ids. We already discussed the issue.
2.2 Parsing most popular videos by id requests
Oh wow, what the hell is this? Well as I said, it kinda gets a little bit more advanced here. So what do we do. Let’s go through this step by step. Remember that we fetch the most popular videos for multiple categories concurrently. Therefore, our response is actually an array of responses. If we fire
n requests, we get
n responses back.
There is two things we need to do in our reducer. We need to update our videos.byId object because we just received new information about new videos. In addition, we must store to which video category the freshly fetched videos belong to.
At the very beginning we declare the
videoMap and the
byCategoryMap variable. The
videoMap variable will later be merged into our
videos.byId object and associates each
video id with the respective video. The
byCategories is later used to update the
videos.byCategory state and stores the total amount of results, the
next page token and an items array with
We iterate over all responses and first check if the
Youtube endpoint returned an error. If we got an error back, we just ignore it and continue with the next response.
In case we actually got some data back, we call a function we have yet to define called
function returns an object that contains a small video “dictionary” (
byId) and an object that contains the content that should later go into the
object. Right now, let’s just assume we already implemented this.
Once we have the results, we update our
byCateogoryMap variable and later on merge our new data into our global Redux state
I know this is not easy to understand. It’s probably best you step through it with a debugger to see what it does. But the response format we get from Youtube is complex and we need to transform it into a proper normalised Redux state. Don’t give up here. Remember that you started this tutorial to really understand React and Redux.
2.3 Grouping videos by id and category
We have yet to implement the
Remember that each entry inside our global
videos.byCategory state is an object that contains the total results, the next page token and an array with video ids. As a first step, we can extract the total amount of results and the next page token. Then we only have to take care of the video ids.
Our approach is the exact same as in the
reduceFetchMostPopularVideosByCategory function. We have a
byId object and a
byCategory object. Our byId object serves as a little “dictionary” where we associate a
video id with the actual video object.
We iterate over each video and add an entry in our
byId “dictionary”. Should we already have some elements in the
items array of our
byCategory object, we just
append the current video id. If not, we create an array with the current video id.
Note that we are using a rather
iterative style here so we don’t have to create new objects all the time.
Again, it might make sense to step through this code in the debugger because it is not easy to understand 🤓. The transformation we do is complex after all.
2.4 Most popular videos by category selector
Now that we have the data, we only need to display it inside of our
Since we have a normalised state, it makes sense to create a new
returns us an object where videos are associated with its
Head over to your
src/store/reducers/videos.js file and add
selector depends on three objects inside
state.videos. We need to know which
video ids are associated with a particular category. That’s why we depend on
state.videos.byCategory. We also depend on our big “dictionary” which associates a video’s id with the actual object. Therefore, we need
state.videos.byId. Of course, we also need to know the available video categories and so we depend on
First, we pick the
video category ids and iterate over them. We first get the
video ids for one specific category by
Next we get the title associated with a specific
category id. Finally, we associate a
category's title with an array of videos. So the
return somewhat like this:
For simplicity, I just included one
category title as key in the example above.
3 Wrap Up
All right, we’re getting there. We now have everything we need.
However, we still need to wire our logic with our
Home feed up
Please head over to Github to find all the code.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.