Instructor: In the last section,
we outlined some of the difficulties
of this signin action creator that we made
and the big difficulty was that we've been used
to using redux-promise,
which has a very linear flow.
We made a request, we returned it on the action,
everything ended up good by the time it got to the reducer.
But this time around, we've got wildly branching behavior
and in one case of that behavior,
we wanna do three different things here.
So redux-promise is probably not going
to be the solution we want this time around.
Instead, we're going to use a different library
for helping us achieve this behavior right here
called Redux Thunk.
So Redux Thunk is a just crazy town name
for this library but I assure you,
Thunk is an actual term, believe it or not.
Anyways, totally unrelated.
Let's talk a little bit
about exactly what Redux Thunk is going to do for us.
So before we talk about that exactly though,
I wanna do a quick review
on what an action creator really does
inside of the Redux pipeline.
So in this diagram, at the very top left,
we have an action creator.
Whenever we call that action creator,
it returns an action, right?
Simple enough, that's all the different action creators
we've made so far.
That action creator,
what's kind of happening behind the scenes
is that action is getting piped
into this big funnel-looking thing right here
that we call the dispatch method.
The dispatch method is what takes the action,
pipes the action through all of our different middleware,
and then eventually sends it on
to all of our different reducers.
So this dispatch object right here takes an action,
sends it through middlewares
and eventually throws it off to the reducers.
So you can really think of the dispatch really
as it's pictured in this diagram right here.
It's a big funnel of sorts.
If we just throw an action into it,
it ends up exactly where it needs to be.
So this dispatch thing right here
is one of the very core aspects
or pieces of functionality inside of Redux.
Now, we have, for the most part,
avoided any big discussion about dispatch
just because well, let me hold that.
Let me hold onto that.
Let's put a feather in that topic
and we'll come back to exactly why we've avoided talking
about dispatch for a good amount
for all the material we've covered.
But there is a very good reason.
We'll come back to it.
The purpose of Redux Thunk is to give you direct access
to this dispatch method right here.
So it's an actual function
and all Redux Thunk does
is give you very direct access to this dispatch.
Okay?
That's really hard to kind of describe
what it does with words
and so this is definitely one of those times
where the best way to approach it is
to just go through an example.
So we're going to make use of Redux Thunk.
Redux Thunk is a middleware
and it's a middleware that we have to install
as a separate module.
So over in our terminal,
I'm going to end our existing server
and then install redux-thunk.
And then once it's installed,
I'm gonna start the server back up with npm run start.
Now, like all middleware,
before we can make use of it inside of our application,
we have to add it as a distinct middleware
when we create our store.
So back in our top-level index.js file,
this is src, index.js,
we will import the library that we just installed.
We are going to import
reduxThunk from redux-thunk.
And then we will add this to our applyMiddleware chain.
So I'll just say reduxThunk like so.
Okay?
So again, reduxThink is a middleware.
But that doesn't really help us understand
what it does, right?
It doesn't really help us out at all.
So back inside of our actions, index file,
we've still got the signinUser action creator here.
This right here inside of our action creator
is where we make use of Redux Thunk.
So remember one of those very important rules
that I've repeated many, many times over and over again:
an action creator always returns an object.
The object is what we call an action
and the action has a type
and I've just repeated that nonstop all the time,
all the time.
So that's where that rule kind of goes out the window,
and today because we installed Redux Thunk,
another valid return value
from our action creators is a function.
So let's put the code down for that
and we'll talk about exactly what's going on.
Instead of returning an object out of here,
we're going to return a function.
So I'm just gonna return a function like so.
So already, kind of looking kind of weird.
We have not returned any functions
from action creators before.
We've always returned objects.
So what is the purpose of returning a function?
Well, this function is how we get direct access
to that dispatch method that we just saw in that diagram.
I think I just closed it unfortunately.
There it is.
By using Redux Thunk,
again we get direct access to this dispatch,
which is kind of the all-powerful function
where if we just throw an action into it,
poof, it's gonna magically get forwarded on
to all of our different reducers.
So here's how Redux Thunk works.
We return a function from our action creator,
and the first argument
to the function is the dispatch method.
That's it. That's pretty much all it does.
It's pretty much all Redux Thunk does.
Now inside of this function,
we can make any type of asynchronous request
or action or anything like that
and at some point in the future basically,
like at any point in time that we want,
we can call the dispatch method,
and we could pass in an action of like blah, blah, blah,
whatever type we want.
So all Redux Thunk is doing
is giving us arbitrary access to this dispatch function,
allowing us to dispatch our own actions at any point
in time that we want.
So inside of this inner function here,
we can place a ton of logic.
All the logic that we need to place right here.
All the stuff where we submit our email
and password to the server,
where we figure out whether or not the request is good,
whether or not it's bad.
All of that logic we can stick
inside of this function right here.
So I'm gonna move all these comments,
all this kind of planned activity
that we wanna do inside this function right here.
And that's pretty much it.
That's all Redux Thunk is doing for us.
It is allowing us to return a function
and it's going to recall that function
with the dispatch method.
So let's continue in the next section
where we will start wiring up the request
to submit the email and password to our server.
I'll see you there.