Instructor: So we just started off
with doing a quick introduction
to higher-order components
and we installed our boiler plate package.
I'm gonna open my code editor,
let me pull it on the screen, very good.
So I mentioned at the end of the last section
that you have already been using
higher-order components without really realizing it.
And once I tell you about it,
it's gonna start to make a little bit of sense
if you're still not familiar
with exactly what a higher-order component is doing.
So in my boilerplate package,
I'm gonna open up my components directory
and then open the app component.
So let's play a little bit
of make-believe here for a second.
And let's assume that we are in the middle
of a existing really large application
where we want to get access
to some piece of Redux State
on top of our App component.
So in other words, we wanna turn App into a container.
What would be the process that we would go through
to promote a component to a container?
Well, we wrap it with the connect function, right?
The connect function from React Redux.
Let's do that really quick
and just see what kind of happens.
I'm going to import connect
from react-redux at the top.
I didn't mention it, but I just pulled off
the export default on the class right here.
And I'm gonna put the export default at the bottom,
and then we will connect App.
And finally, I will add function mapStateToProps.
And let's just assume
that we are going to return some property called...
How about "posts: state.posts"?
Then we'll pass mapStateToProps to connect.
So, I have said several times now
you've been using higher-order components
without really realizing it.
This connect function right here
is a higher-order component.
So we call connect with some configuration option
and then whatever gets returned from connect,
we immediately invoke again with our component.
So this is a classic case of a higher-order component.
We're taking the React component we created
and we are wrapping it or enhancing
or composing its functionality
with some helper here.
And so you might be saying,
"Okay, well what the heck is...
What is Connect even doing there?
How is it enhancing our store,
what is it doing?"
So this is where things start to get really interesting
and we're gonna talk about that question
that might have been burning in your mind all this time,
what is the provider up here?
What is the purpose of the provider?
How do higher-order components get involved with this?
I'm gonna pull a diagram on the screen
to help answer that question.
So here's a diagram
of what's going on behind the scenes
when we create a provider
and we connect some child components.
What's happening is the connect
is a higher-order component
that is specifically made
to make communication with the provider
at the top of our application.
The provider wraps the Redux store,
which is Redux the actual library,
it's the object that holds
our global application state
that is formed by all of our different reducers.
The provider holds the Redux store
and it watches the Redux Store very directly says,
"Hey, Redux store, whenever you change,
I want you to tell me,
just tell me whenever you change."
That's the job of the provider.
Then whenever the Redux store changes,
the provider takes notice of it and it says,
"Okay, new state, something new just happened,
I need to go and update
any child components that I have."
So provider broadcasts down
to any connected component,
"Hey, there is just some change to the Redux state,
something just happened
and here's what the new state is.
Take it re-render yourself,
do whatever you want with it,
here's the new state."
So connect is a higher-order component
that's making direct communication
with the provider inside of our application.
And the provider is what has direct access
to the Redux store.
So this is just one example
of a higher-order component.
It's a higher-order component
where it's being used
to add some additional functionality
or data onto our components,
say comment box or comment list
or back in the code we were just editing,
our app component.
So again, higher-order components
are components that take a component we write,
add some additional data
or some additional functionality to it,
and then returns the newly wrapped
or enhanced component.
So in practice, after we use the connect function here,
we end up exporting by default
the enhanced or composed version of App.
And that's a very common pattern that we'll see.
We'll see that in a lot of the files we write
where we use higher-order components,
we end up exporting the enhanced
or composed version of our apps,
excuse me, our components.
Okay, so I only added the connect library
inside of this component right here as an example.
I'm gonna go ahead and do a very long undo here,
just to get back to where we started,
'cause we're not going to be turning App
into a container inside of this particular application
that we're gonna build.
Okay, so now that we know a little bit more
about what's going on with our provider
and the connect function
and maybe have a little bit better idea
of what's going on with higher-order components,
let's continue the next section
where we'll talk about the app that we're gonna build
to help us understand
what's going on with higher-order components.