In the last video we started talking about the redux side of this application.
So in total we're going to have the two reducers in one action creator.
Now that we understand the react side and the redux side it's time to understand how these two things
are going to fit together.
And remember that is the job of the re-act redux library.
So in this video we're going to talk about how to get these things to play nicely together using that
library.
Let's get to it.
All right so first diagram right here.
Now I'm going to be honest with you.
Some of the things I'm going to show you are going to seem a little bit complicated in this because
I want you to understand some of the behind the scenes stuff that is going on with the reactor redux
library but you're not going to really understand some of these moving parts until you actually write
the code out for it.
So just take this diagram and the next one that we're going to take a look at which just I don't know.
You know a high level overview I suppose.
And if it's not entirely clear.
That's totally fine.
Let's try to write out some code first and then we'll say OK now we understand it.
OK so here's what's going to happen using re-act redux.
We're going to create two new components.
These components are called the provider and the connect.
These are both components that are created by re-act redux.
You and I were going to create instances of them and then we want to pass some props into both them
to configure exactly how they work.
So remember that provider and connect implemented by re-act redux.
You saw a moment ago when we were working on Copen that after we took all of our producers and combined
them together we then eventually ended up with something called the redux store and that store is what
contains all of our producers and all the state of our application.
We are going to take that store that gets created and we're going to pass it as a prop into this provider
thing.
The provider is going to be rendered at the very very top of our application hierarchy even above the
app component.
So technically we're going to show the app inside of this provider thing.
The provider is then going to have that eternal reference to the store right here.
That word provider or the term provider essentially means it is providing information to all of the
different components inside of rap.
Now the next thing we're going to do is focus on that song list.
You'll notice I did not show the song detail here just for clarity.
So everything we're about to talk about is going to happen to the song detail as well.
But I just want to talk about the song list in isolation just to make the diagram a little bit more
straightforward.
So after wiring up this Ferriter we're then going to find every component inside of our application
that needs to somehow access the data that is stored inside of our store the song list definitely needs
to know about the list of songs that is produced by this producer that produces the list of songs.
So because of that we're going to create a instance of the connect component right above the song list.
So we're going to essentially wrap this songless component with this Kinect thing that connect tech
or the connect function or.
To me the Kinect component.
Those are all valid terms as you will see in just a minute.
I usually refer to it as the connect tag you'll see why in just a moment but the connect component right
here is a very special component.
It is special because it can communicate with the provider tag at the very top of our hierarchy.
It connect it communicates with that provider not through the props system but through a completely
different system of communication.
Inside if we act that we have not discussed yet called the context system we are going to discuss the
context system later on inside of course.
But right now just understand that the context system essentially allows any parent component to communicate
directly with any child component even if there are other components in between them such as the app.
In this case.
So at some point in time when we put that Kinect tag in there we're going to configure the Kinect tag
and tell it that when it gets rendered on the screen and then when it renders the song list as a child
it needs to reach back up to that provider and tell the provider that it needs to get the list of songs
that are contained within our store.
So the Connect is essentially going to send a little message up say hey tell me any time that the list
of song changes just let me know.
And then the provider in return is going to say all right.
Sounds great.
Well here's our current list of songs.
And so it's going to send that list of songs back down to the connect function or the connect component
down for that connect component in turn is going to take that list of songs.
And pass it as a prop down into our song list component's that's what's going on with the data that
is inside of our store.
But remember we've also got these action creators as well.
The action creators are not stored in any way inside our store.
Instead we call an action creator.
We take the action that gets returned and we send it into the store dispatch function.
Remember that's how we change data in the redux side of our application.
Now once we start making use of re-act redux that flow is going to change just a tiny tiny little bit.
Essentially we're going to pass some more configuration into this connect components.
So in addition to telling it that we want to get a list of songs we're also going to tell the connect
function that we want to be able to call the select song action creator from within our song list.
So when we tell that the connect function or the connect component about that the connect component
says OK no problem.
I'm going to make sure that this action creator called select song it's sent down to our song list component
as well.
As a prop so this entire flow essentially all we have to do is create the provider it a reference to
our redux store then any time that we have a component that needs to interact with the redux store in
any way we're going to wrap it with this connect function.
And like I said I'm going to very frequently refer to this as the connect function components or tag
somewhat interchangeably.
Well then configure this connect function or connect tag right here by telling it what different pieces
of states we want out of our store and what different action creators we want to have wired up as well
that connect function is going to then kind of do all the magic for us and make sure that all that data.
Both the state and the action creators show up inside of our component as props.
All right so that's what's going on behind the scenes now.
Trust me if that sounds really complicated the code to make this all happen is way more straightforward
than you might think.
All right.
That could be really straightforward stuff.
It's just understanding the pun the scenes stuff that gets a little bit more complicated.
So let's take a quick pause right here.
When we come back the next section we're going to start implementing our entire app it's all see you
in just a minute.