Refactoring YouTube Player to Use Flux — Part 1

Previously, I have written a three part series blog to create a YouTube Player in ReactJS. It only used React and depended heavily on call backs from children to parent, particularly in a case wherein it was two levels deep.

This issue can be solved by using three solutions — Flux, Redux and Context API. In this tutorial, we will be solving this issue by implementing Flux.

Firstly, we will look into Flux. Flux follows the unidirectional flow of react, but it’s a closed circle. It has four parts — React Components, Actions, Dispatcher and Store.

React Component

It either creates an action or listens for a change in store or does both.

Actions

Does some action when triggered from component and passes it to dispatcher.

Dispatcher

Just a middleman which sends actions to all stores.

Store

Manages the logic and emits the changes to be picked up by components.

We only need three components in the Flux refactoring. The basic flow is shown below. Once we build it, we will explore more.

Flux Flow for YouTube Player

Now, I will be first cloning from the create youtube player repo.

Clone Exiting Call Back YouTube-Player Code

After the change to the directory, do a npm install. Once the npm install finishes successfully, do a npm start.

cd to directory and npm install, then npm start

In Flux and other central state logic implementations, we move much of the logic out of React. It only remains as a View, which it is meant to be.

Let’s install Flux into our project by npm install — save flux

npm install — save flux

Now, one of the main parts of our youtube-player logic is to go from the Async API call to YouTube through youtube-search-api. We will move this logic out from our App.js to action file. We will first see the basic unidirectional flow of Flux by showing an initial search of ‘React Tutorials’.

From the constructor, we call out the action file function videoSearch(). Next, it will be created.

New App.js

Now, create an actions folder in src directory and a file ytSearch_actions.js inside it. This action file is doing the Async YTSearch, with searchTearm(‘React Tutorials’ from App.js). It is receiving an array of object from YouTube as a response. Send the same to dispatcher as an object with an identifier in actionType and the received data in payload.

ytSearch_actions.js

Also, create a constants folder and an index.js file inside it. It is used here in actions(ActionTypes.FETCH_YTSEARCH) and will be used in store. It is used to keep the constants maintainable.

constant file

Now, create a dispatcher folder and an index.js file inside it. It is a simple file, with functionality written internally. It takes everything from the actions and passes it to all stores.

dispatcher

Now, create a folder stores and a file ytSearch_store.js inside it. It contains the major functionality in Flux application. Here, we are first importing an emitter. In constructor, we first register with the dispatcher as it receives data from dispatcher.

The dispatcher register calls the function _registerToActions(). Enclosed in it is a switch statement that checks the action type. Right now, we have only one, but in future we will have more. Here, it again uses the constant from the constant file.

It calls the function addNewSearchItem(action.payload). Notice the action.payload is nothing but the data from ytSearch_actions.js file. So, it’s the array of object we received from YouTube.

Later, we call the function _addNewSearchItem(), where we assign this array of object to a local array and EMITs it.

The getAllVIdeos() returns the state of this local array, which we will use later in receiving component. The next two functions addChangeListener() and removeChangeListener() will also be used in our receiving component.

ytSearch_store.js

Now, we will update our receiving component video_list_item.js. Note, in this refactored flux YouTube player, we don’t need the file video_list.js.

Here, we are importing the store. Create a state object with items as key, which calls YTSearchStore.getAllVIdeos() and gets the array of object.

In constructor, a _onChange() function is also called. It sets the state variable once it receives the array of object. This keeps on changing, as and when search is done.

There is react lifecycle hook componentWillMount() and componentWillUnmount(), which are used to addChangeListener() and removeChangeListener() from dispatcher.

In render() method, we display the URL and the title in a list using map and iterating over.

updated video_list_item.js

Our array of object, which we receive from YouTube.

array of object

Our list of videos demo YouTube is showing perfectly and this concludes the part 1. Watch out this space for part 2.

List of Videos from YouTube

Read More: Refactoring YouTube Player to Use Flux — Part 2

About Innominds

Innominds is a leading Digital Transformation and Product Engineering company headquartered in San Jose, CA. It offers co-creation services to enterprises for building solutions utilizing digital technologies focused on Devices, Apps, and Analytics. Innominds builds better outcomes securely for its clients through reliable advanced technologies like IoT, Blockchain, Big Data, Artificial Intelligence, DevOps and Enterprise Mobility among others. From idea to commercialization, we strive to build convergent solutions that help our clients grow their business and realize their market vision.

To know more about our offerings, please write to marketing@innominds.com