Build Youtube in React 20: Youtube Client Library
Here’s the thing. We could just use
OAuth flow. Look, I don’t know about you, but I’d rather let the library handle authentication than messing around with that on my own.
The only sort of caveat that this client library has is that it is not available as an
npm module. So we will have to reach out to a
Youtube CDN server and load the this library the old-school way. Old-school means that we are either using a
<script> tag in our
HTML or that we attach the script to our
This is kind of a guilty pleasure. Generally, I would not recommend doing that. However, since the library is (for whatever reason) not available as an
npm module, this seems to be the only way.
2 How to attach Youtube client library to our React application
2.1. Getting started
This is the only part about the application, I’m not very happy about.
Here’s how we load the library. Once our
App component is mounted, we reach out to the
Youtube and fetch the client library asynchronously. Once we the library is there, we will dispatch a
synchronous action to tell all the components that they can start doing their
This is also a good opportunity to demonstrate the workflow the overall action dispatching process.
- Create a new file called
api.jsand put it into
store/actions. This is where we’ll put all the
actionsthat are related to setting up our client library
- Add a new file called
api.jsand put it into
You can probably already see the pattern we’re following. We’re putting related action creators into the same file. We then create a file with the same name into
store/reducers and handle the state changes that the actions of one particular file trigger. Like so, we have a separation between actions and reducers but know that for a file called
store/actions, there is always a file
store/reducers that will handle the respective actions.
Before we create the action, let’s add a generic method inside
store/actions/index.js that will return an action. Like so, we keep our code base DRY.
Most other tutorials wouldn’t care about this, but this is probably how you would do it if you have a bigger application.
2.2. Creating our first action
Head over to your
src/store/actions/api.js file and add the following action
Oh wow, that’s pretty concise, isn’t it. Note that we are using
2.3. Creating our first reducer
Put the following code into your
reducer is pretty straight forward. If we our action type tells us that we successfully fetched the
Youtube client library, we set the
libraryLoaded flag to
Other components can bind to this flag will notice when it changes. Note that we are typically using a
switch statement in our reducer.
It is also very important to always include the default case in the
switch statement. Should we ever encounter an action for which we haven’t specified the reducer logic yet, we just don’t do anything. It’s sort of a fail-safe.
Well what is the
getYoutubeLibararyLoaded method for? This is something called a selector. Please have a look at the Selectors in Redux blog post which explains how and why you should use selectors.
Redux, you should always aim at using selectors because they make your code more maintainable and extendable.
2.4. Combining reducers
Since this will be a bigger application, our root reducer, i.e. the one in
index.js will be comprised on multiple reducers itself. These sub-reducers are responsible for handling a particular part of the state. Like so, we don’t end up with a huge and unmaintainable
Since storing whether the library was loaded is kind of unrelated to the other information we’ll store (such as videos, comments, etc), we put this into its own sub reducer.
This means that our current global state looks like this:
As soon as we start loading data from the
Youtube backend, our state will get more complex.
2.5. Loading the Youtube client library
Let me just give you the code and then we talk about it.
App component is mounted, we programmatically load the Youtube client library. To do so, we attach a script
element to the
DOM, wait for the library to load and dispatch the
YOUTUBE_LIBRARY_LOADED action. As I already said, this way of pulling in dependencies should be the absolute exception and you should always use npm if you have the option to do so.
Note how we wire up the action creator in our component. We create a function called
mapDispatchToProps which attaches the
youtubeLibararyLoaded action creator to our
props. We use the
bindActionCreators function from
Redux for this.
When exporting the component, we use the
connect helper so the
youtubeLibraryLoaded action creator gets attached to our props.
If you’ve worked with
Redux before, the
mapDispatchToProps method and the
connect helper should be fairly familiar.
I remember that I was quite confused the very first time I saw this. If this is confusing right now, don’t worry, you’ll get the hang on it.
Please don’t forget to put your
API key into the
API_KEY variable at the top, otherwise your
API calls won’t work.
3 Wrap Up
That’s it for today. We introduced a lot of new concepts.
Thanks for reading, you can find the project’s code in our Github repository.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.