Refactoring Youtube Player to use Flux — Part 3

Welcome to Part 3 and here we will add the functionality to click on a video, in the list to select it and display it in player.

Now the flow will be —
* We will have a click handler in video_list_item.js on each video.
* Which will fire a new action in yTSearch_action.js
* Through the dispatcher, this video will be passed to ytSearch_store.js. It will emit the video then.
* Then video_detail.js will receive this specific video and show it in player.

Let’s now start with video_list_item.js and add the onClick() handler. Here we have imported the YTSearchAction first and then in li (which will hold a single video in list), added an onClick() handler which will fire an action in actions file. The line key={video.etag}, is to identify this video uniquely as etag for each video from youtube is unique. It is required to do in React when handling arrays, or else it throws a big red warning.

video_list_item.js

You can read rest of the blog from my blog site. The link is below.

This concludes our series. Hope you enjoyed it. The github repo is here.

UI Lead- ReactJS, JavaScript and everything in-between.