My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Refactoring Youtube Player to use Flux — Part 1

Refactoring Youtube Player to use Flux — Part 1

Nabendu Biswas's photo
Nabendu Biswas
·Jun 19, 2020

I have written a three part series to create a youtube player. It used only React and heavily depends on callbacks from children to parent and in one case two level deep. We can solve this issue using three solutions — Flux, Redux , Context API. We will look into solving this with Flux in this tutorial.

We will first look briefly into what is Flux. Flux also follows the unidirectional flow of react, but it’s a closed circle. It have four parts — The React components, Actions, dispatcher and Store

React Component It either creates an action or listen for a change in store or do both.

Actions Do some action when triggered from component and pass it to dispatcher

Dispatcher Just a middleman, 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 this Flux refactoring. The basic flow will be as below. We will understand it more, once we build it.

Flux flow for Youtube PlayerFlux flow for Youtube Player

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

Clone exiting callback youtube-player codeClone exiting callback youtube-player code

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

thewebdev.tech/refactoring-youtube-player-t..