In the last video I made a big deal around the fact that we imported our action creator right here and
then passed off the action creator to the connect function at the bottom as opposed to just directly
calling the action creator inside of our component.
So in this video I want to tell you a little bit more about exactly why that is happening.
All right so here's the important thing to understand this right here.
I want you to read this very carefully and remember it for every application that you ever put together
with redux redux is not magic redux does not somehow automatically detect any time that you call an
action creator.
It does not automatically detect any time that a function inside your application returns an object
that is called an action.
Now what do I mean by this.
Well if we go back over to our actions index such as file you'll remember that this contains our action
creator.
Now you and I are referring to this function as an action creator but there's nothing about this function
right here that somehow automatically wires itself into redux.
There's nothing inside this function that somehow registers the function it's redux.
There's nothing to say that anytime that I call this function like so in return that action that redux
has and to somehow magically detect that and take the action and threw it off to all those reducers
and update our state that does not happen at any step.
So with that in mind when we are inside of our songless component and we import the select song action
creator right here we're not so much importing action creator as we are importing a regular plain old
javascript function.
So if we call select song inside iffier we absolutely can we can call select song all day inside of
our component as many times as you want but this is going to be treated as a normal javascript function
call.
We're going to call the function.
It's going to return an object and that's it.
The object that gets returned from all these function calls right.
You're never somehow magically gets forwarded over to redux redux doesn't detect that we called a function
that you and I are arbitrarily calling a action creator that does not occur.
If we ever want to make sure that an action eventually makes it way its way over to our reducers we
have to call that dispatch function we have to take the action that gets returned and we have to pass
it into the dispatch function.
Now we saw an example of that back on the code Penn. example that we went through.
So here's that code Penn. example.
Notice how every single time that we dispatched an action we called our action creator that returned
an action object.
And then that was automatically passed or directly passed.
I should say into the store dispatch function if we had not passed the result of calling those action
creators after the dispatch function if we had instead simply called say create policy with Alex like
so and then maybe create a claim for Alex and then maybe he deleted the policy for Alex like so none
of these function calls right here are going to update our read book store they return actions.
Yes but those actions never got sent into redux and they never ended up inside of a reducers.
And so if I look at my counsel log over here of my final get state call you'll notice that I have no
policy no claims and no change in my default amount of money.
So if we ever want to make sure that an action Creator actually updates our states we have to take the
action that gets returned and send it into that dispatch function.
Now of course you do not actually see any reference to dispatch inside of our component.
There's no reference to dispatch inside of here.
So what's really going on.
Well essentially when we pass our action creators right here into the connect function the connect function
does a special operation on the functions inside of this object.
It looks at all the functions include inside this object and it essentially wraps them up in a nother
javascript function when we call the new javascript function the connect function is going to automatically
color action creator.
It's going to automatically take the action that gets returned and it's going to automatically call
the where is it.
Here we go the dispatch function for us so bypassing our action creator into that connect function whenever
we call the prompt start action creator or the X creator that gets added to our prop's object the connect
function is going to automatically take the action that gets returned and throw it into the dispatch
function for us.
So all that is happening behind the scenes and you don't really have to think about it when you are
making use of the connect function.
So that's where we passed our action creator off to the connect function as opposed to just directly
calling it from inside of our component.
So any time that you ever want to call a action creator from a component you are always going to pass
it into this connect function as opposed to just arbitrarily calling it as you had to import it inside
if you're like so not going to do this all right.
That's pretty much it.
Hopefully that makes a little bit more sense.
Now we're going to see this pattern of redux not being magic in many other locations.
At every step along the way I want to recall that redux is not magic and it's not going to just kind
of help you along your way.
You have to actually do a lot of wiring up and that's actually one of the chief complaints around the
library a lot of people say that whenever you write redux code it involves a lot of boilerplate because
you have to kind of write all these functions and then manually hook them all all together as opposed
to other state management libraries that are a little bit more magic and a little bit more automatic.
So it's kind of up to you whether you prefer the magic or actually understanding what's going on.
Again totally up to you.
OK so now that we understand what's going on there.
Last thing I want to do inside the map state to prop's Yeah we understand that we are updating our state
every time that we click on that button.
So I don't think we need that console log anymore.
So I'm going to clean up like so.
All right.
So let's take a quick pause right here.
When we come back the next section now that we know that we are able to successfully select a song we're
going to start working on our last component the song detail.
So quick break and I'll see you in just a moment.