Now that we have a better understanding of what middle is are in redux let's start to discuss exactly
what redux thunk does.
All right.
So in this diagram right here I have some normal rules around action creators.
So these are the normal behaviors expected of an action creator inside of a vanilla redux application.
Essentially the exact same redux out that we are working on right now.
So inside of a normal redux application an action creator must return an action object that action object
must be a plain javascript object that has a type property and optionally can also have a payload as
well.
So how does Reducto thunk work.
Redux I think essentially is going to relax these rules right here around an action creator.
Now you might be kind of surprised redux thunk itself is not going to have anything like intrinsically
built into it that says oh yeah just pass me some request object and I'll take it away for you.
That's not the purpose of redux thuck redux onc is an all purpose middleware that allows us to deal
with asynchronous action creators but it also allows us to do many other things as well.
So one thing that redux does is allow us to handle actual creators but that is not its primary purpose
and because of that you're going to see that how redux thunked changes the rules of our action creator
is kind of a little underwhelming almost.
All right.
So let's take a look here.
So these are the rules around an action creator.
Once we have installed redux thunk this is literally it right here.
This is the only change that redux thunked makes to your application which redux thunked installs your
action creator can return in action objects if you return an action object.
It still must have a type property and if it is an action object that gets returned it again optionally
can have the payload as well.
The other thing that redux thunked does it allows you to return either in action object or a function.
And if you return a function redux thunk is going to automatically call that function.
For you that's it.
That is all redux thunk does.
And as a matter of fact you and I are going to take a look at the source code for redux Thumbkin just
a little bit and I'll prove that to you.
I will prove to you that this is the only thing that redux thunked does it allows you to return a function
from an actual creator.
And if you do redux onc is going to invoke or call that function automatically.
So essentially if we put this into code form or we get an understanding or an idea of what redux thunk
allows us to do.
Basically we can return a function that is going to have some logic inside of it like so that is it.
That is all that this thing does.
So you might be thinking OK how does this help us exactly.
How does returning a function and having it be called.
How does that help us at all.
Well let me tell you a little bit more about what redux thunk is really doing behind the scenes.
And then I think this will start to make a little bit more sense as to how it's going to fix our problem.
OK so I'm going to flip back over to a new diagram.
Now this one's a little bit crazy.
This is a flow diagram of what redux thunk is doing internally.
So we're going to zoom into this thing and we'll go through it step by step.
OK so it all starts off up here when we call an action creator so our action creator is going to return
like an action.
I put that in double quotes because we're going to essentially say it can return either an object or
a function.
So maybe rather than action I should say something and I'll update it down here as well.
So now when we return in action creator it's going to return something that is either an object or a
function.
We're still going to take that something and pass it into the dispatch function.
Now remember when we dispatch something the dispatch function it's going to send that thing on to the
middleware.
So after we return something or dispatch it it's going to eventually end up inside of it.
Redux thunk.
And then inside of redux thunk redux thunk is going to take a look at that something and it's going
to say oh hey.
Welcome.
Are you a function or are you an object.
If this is an object right here so no it's not a function.
If this is an object then redux thunk is going to say hey you know what.
Thanks for stopping by.
I'm glad you visited but I don't really care to deal with you at all.
It's a redux I think is going to take any object that shows up and passed along to all the different
reducers inside of your application.
So with Redux I think we still can return to action objects as usual redux thunk is not going to involve
itself in normal action objects in any way shape or form.
Redux think only starts to get interesting if we return a function instead.
So if we return a function right here we're going to start to go into this alternate flow.
So if we return a function redux thunk is going to say Oh fantastic.
I'm happy that you're here I'm happy that a function redux.
Invoke our function and it passes into the dispatch and the get state functions as arguments.
So in other words with this function right here that we returned we are going to receive dispatch and
get States as arguments.
Now the dispatch function is the same dispatch function that we've been talking about quite a bit.
We can pass actions into the dispatch function.
Those actions will be sent through all of our different middleware and eventually forwarding it off
to our reducers to the dispatch function is essentially unlimited power to initiate changes to the data
on the read side of our app.
We've also seen this get state function very briefly back on that code Penn. example as well.
Remember.
Good state can be called on a redux store and that will return all of the data or all the state inside
of our store.
So these two arguments that our function receives are essentially unlimited power over everything that
goes on inside of a redux application through dispatch.
We can change any data we want and to get state we can read or access any data that we want.
So let's imagine for a second that we do exactly what we're trying to do right here.
We're trying to make a request inside this function so we will imagine that redux thunk invokes our
function with those two arguments.
Then inside of our function you and I are going to wait for our requests to finish so we're not going
to be inside of this kind of race scenario that we are back in over here.
We're going to wait to return or dispatch any action until we eventually get a response from our Type-I
code API.
Once we eventually get that response we're then going to use the dispatch function to manually dispatch
an action.
That's the key part.
That is the entire key right there with redux thunk we can manually dispatch an action at some point
in time in the future.
Now when we dispatch an action so we get this new action created right here this can again that can
be a plain javascript object or a function.
But when we're dispatching it manually from redux thunk we're inside of that function.
It's basically always going to be a plain object.
So we're going to dispatch this action.
It's going to flow back into dispatch.
This batch is going to send it right back into redux thunk redux thunk is going to say OK are you a
function or an object.
In this case it's going to be an object.
So we're going to have redux think automatically for that thing onto all of our different reducers and
that's pretty much it.
So the real takeaway here is that with redux thunk we can return a function if we do that function will
be invoked with the dispatch and get state arguments and with those two functions we have unlimited
power over a redux store.
We can change any data and we can read any data and so at any point in time in the future for example
after our request completes we can then manually dispatch an action and update the data inside of our
store.
OK so that's pretty much everything about redux stock.
Now the last thing on do.
Very quickly.
I know this is a long video.
I just want to show you this very quickly.
I want to have you take a quick glance at the source code of redux thunked itself.
So here's the link to the repository for redux thunk.
I'm going to open up a new browser tab and navigate over there.
So again redux thunked repository.
I'm going to find the SIRC folder inside there.
Inside it they're going to find the single file that really makes up the source code for redux thunk
just this index such as file and believe it or not that is it.
That is all of redux thunk right there.
A total of 14 lines.
And in reality only like 6 or so lines actually do anything.
All the other lines inside of here is this right.
Is kind of like an extra object or an extra option.
This is kind of an initialization step and we've got a function declaration at the top and an export
default at the bottom.
So again this right here.
That is it.
That is the whole shebang.
That is all redux thunked really does.
You'll notice on line 2 there is some kind of crazy syntax right here.
I know that looks nasty.
Essentially what is happening is we have a series of functions that return functions very similar to
how.
Right now you and I are defining a function that returns a function.
But if you look in the body of that thing you'll see the actual logic of what's going on.
Redux thunk is sane.
OK did you just return or see me.
Did you just dispatch an action.
If you did.
Is it a function.
If it is a function then redux thunk is going to invoke that action with dispatch and get state and
an optional extra argument.
But you and I are not going to make use of that at any point in time if our action was not a function
then redux thunked essentially says oh I don't care about this this action.
It's an object.
I don't care about it so I'm going to send it on to either the next middleware or all that different
reducers.
If there are no other middleware to run so that's it.
It is amazingly simple and straightforward when you actually look at the source code.
But of course understand it is a little bit more complicated.
OK so now that we have a better understanding of exactly what redux thunked does we'll take a quick
pause.
We'll come back in the next video and we're going to do a real factor to our fetch posts action creator
to truly make use of redux think.