In the last section we started to discuss how we could use redux thunked to get more flexibility out
of our action creators.
So enough of the lectures and the last like five or so then a lot of talking let's just wire this thing
up and see how it works.
So remember the golden rule of redox is that nothing happens for free and that certainly applies to
redux thunk as well.
So before our application can actually use it we have to wiretap.
We have to tolerate redux please make use of redux stunk over here.
So we're going to do that inside of our app file.
So here is my app component right here.
I'm going to import redux thunk from redux thunk while I'm here.
I'm also going to clean up my re-act native tags.
I'm not using these anymore so I'm going to dump them real quick.
OK.
Redux thunk itself is what is called a middleware.
So that is the part they're actually wiring up here we are wiring up a middleware to our redux application
to include any type of middleware we have to import a helper from redux thunk as well called apply middleware.
And as you might imagine applying middleware is what allows us to take the middleware Intel redux to
actually make use of this thing.
So now down inside of our render method to find our store.
So here's our story here is the create store call.
I'm going to add on a second argument of no.
Excuse me.
Empty object not known.
And then a third argument of apply middleware.
I'm going to pass that redux thought.
Now this is a really long line of code right here.
So I'm going to cut this out.
Declare the story ahead of time and get a more legible and I'm pass the story was a little bit of background.
The second argument right here is for any initial state that we might want to pass to our redux application.
So if we had some like imaginary property like you know maybe I wanted to populate the email and password
flag for my Auth. reducer I could pass that in right here.
Totally optional.
Something that we don't do too common.
Mostly to server side rendering.
Actually the third argument here is what are called store enhancers.
So the supply middleware call with redux thunked is referred to as a store enhancer because it is adding
additional functionality to the store.
Anyways just a little bit of off topic stuff.
So this is how we wired up redux thug.
Now that we've installed it we can actually make use of it inside of a reducers the action creator.
So here is my action creator file.
I've got my log in user action creator right here.
And again I'm going to skimp on the lecture a little bit.
We're just going to throw up how this thing works right here.
And then talk about how it works.
So the tween or right after the action Kryder opening brace over here and when you add a new line and
the safe return dispatch.
And I'm going to wrap that entire firebase call in a federal function.
OK.
There we go.
So this is where the syntax starts to get a little bit hairy.
So do be sure to double check your syntax here.
I've got return dispatch an opening curly brace the authentication call and then the closing curly brace
down here.
OK.
So that's it.
That's really excellent connection right.
Well yeah maybe maybe what's actually going on here.
What impact does this really have on our app.
Right.
That's what we have to really figure out.
Check out a diagram and see what redux thunk is really going to be doing for us.
So it's a little bit of an ascii diagram.
It's because there's a lot of steps to it.
But bear with me for a moment.
So now now that we have read thunk this whole flow of calling an action creator is going to change up
just a little bit.
So here's how it's going to work.
We're going to call the action creator action creators now going to return a function so that as a we
just added in our action creator is now returning a function
when that function is returned it redux is going to see it as going to say ah they return to function
from that action Creator and it will immediately call the function with the dispatch method.
Right and remember that the dispatch method is what actually sends actions off to all the different
reducers in our application.
So redox Reebok's thunks kind of the purpose here is to just say AAVE returning action from action creator
and then immediately call that function.
Or assuming the return to function with any action creator Emily calls that function area.
So once Reebok's thunked calls the action or calls the function we returned we will then start our log
and request you will say hey firebase try to silence please and then we're going to sit there and wait
and wait a bit longer and eventually when the request is complete and the users logged in our dot van
runs and inside of the door then we will manually dispatch our actions so this last step right here
is the entire key to it.
So the entire key this entire thing works by recognizing that hey some asynchronous action is going
to happen here and we cannot immediately return an action by giving us access to dispatch.
We can call dispatch at any point in time like inside of the door then or inside of the door catch wherever
we want to.
And at that point in time we can manually dispatch an action instead of waiting for our Instead of immediate
returning action from the action crater itself.
So let's take a quick break come back and test out this implementation in the next section.