Speaker: In the last section,
we wired up the reduxThunk middleware
to our create store call
along with the Apply Middleware helper
inside of our Route index.js file.
We will now continue by starting
to put together our signup action creator.
To get started, I'm going to create a new directory
inside my source folder called Actions.
And then inside of Actions
we'll make the two files that we usually see
the types file and the index.js file.
We'll first begin with the types.js file inside of here.
We'll just create one type for right now.
We'll make it the export const out.
We're gonna call it auth user,
rather than calling it something like Signup User.
You'll see why in just a moment.
But for right now, just bear with me.
We're gonna call it the auth user type.
And so I'll give it a string of auth user.
Then inside the Actions folder,
I'll make a new file called index.js.
At the top, we'll import that action type that we just made.
So we'll do our import auth user from types
and then underneath that we'll make our action creator
called simply signup.
So signup is going to be called
with the email and password from our form.
So we'll receive that, those two arguments like so
and then we can open up our action creator.
Now, just a moment ago, we added reduxThunk
to our application
and I had mentioned that I'm going to assume
that you've not made use of reduxThunk before.
So in this section, we're gonna go through a quick overview
of reduxThunk and try to get a better understanding
of what it does for us.
The first thing I want to point out to you here
is that we are looking at a very typical action creator.
We might call it, and then inside the Action creator,
it's our duty to always return an object
that has a tight property,
maybe auth user or whatever,
and then a payload of whatever.
So that's what our action creators usually look like.
We usually return an action
and then magically this action is taken,
it gets sent to our middleware,
it gets sent to our reducers.
The reducers produce our new state
and that flows back into our components.
So typically we have a flow that looks a little something
like this.
So we got our action creator up here
returns the action that goes to our middleware
which then eventually the action goes to
our reducers as well.
Now, this entire process of taking that action
and sending it through our middleware
and our reducers is all facilitated
by a function tied to Redux called the dispatch function.
So the dispatch function belongs to Redux,
you give it in action,
so just a plain JavaScript object with a tight property
and the dispatch function is going to automatically funnel
that action object through our middleware
and through our reducers.
I personally like to think of that dispatch function
as kind of being like a big funnel of sorts.
So inside this diagram
we've got our action creator at the top.
It returns an action
and that action automatically gets funneled,
like I said, that's kinda like the keyword,
that's what I like to imagine here.
It gets funneled into that dispatch function.
Dispatch then takes it, passes it
to all of our middleware, all the different reducers,
and our application state updates.
So it's very clear that this dispatch function
right here is a very powerful little function
and it's how we really initiate change
within our Redux application.
So let's now kind of pivot a little bit
and talk about why this is relevant to reduxThunk.
Let's first begin by flipping back over to our code editor.
I'll find my signup action created right here
and I'm gonna make a little change to this action creator.
So rather than returning an object from this thing
I'm going to instead return a function.
And this function is going to be called
with a single argument that we're going to call dispatch.
So this argument right here of dispatch
that is the D's dispatch function
and this is what reduxThunk allows us to do.
When we add reduxThunk as a middleware to our project
it allows us to return a different value type
from our action creators.
So solely because we have installed reduxThunk
we can now return either an action object
or a function from our action creators.
If we return a function, that function will be
automatically called with a dispatch function.
Remember what we just spoke about a moment ago?
If we take the dispatch function
and we pass an action into it
that action will be automatically sent
off to all of our middleware
and all of our actions inside of our application.
So by having the ability to return a function
that gets called with dispatch,
we gain the ability to return or dispatch
as many actions that we want from a single action creator.
So now inside this inner function, I could call dispatch
and pass in an action of type auth user.
And I'm not limited to doing that just one time.
I can do that as many times as I wish.
In addition, if we had a promise of some sort
or we were making an asynchronous request
inside this thing and we had some request object
we could wait for that promise to resolve.
So we could say, you know, wait for the then
and then inside of our callback that gets invoked,
when that request gets resolved
we could dispatch an action as well.
So this is the purpose of reduxThunk.
It allows us to get total control
over the dispatch process.
Inside of one action creator
we can dispatch as many actions as we wish
and we could dispatch them at any time that we wish as well.
So you can really think of reduxThunk
as being an alternative approach
to asynchronous action creators.
That's just a little bit different than Redux Promise.
With Redux Promise, we are still limited
to returning one action creator or one action, and
that action has to have a promise on the payload property.
So Redux Promise is a little bit more straightforward,
but it's also more limited.
We can only ever return that one promise.
With reduxThunk, we can make as many requests as we want.
We can wait as long as we want.
We essentially can do anything we want inside
of our action creator.
And then only when we complete some request
or we get back some data
or we do some validation or whatever it might be
we then have the option to dispatch an action
and dispatching that action will cause our reducers to rerun
and update the state inside of our application.
Okay, so that is a very brief overview on reduxThunk.
Now I'm gonna delete the contents of that function
and I'm gonna make one small change here.
So if you already went through that middleware section,
you saw that we first wrote
out three functions that return each other in a row
and then we very quickly refactor that to be a series
of arrow functions that automatically return each other.
So when we make use of reduxThunk,
we normally do the exact same thing.
So rather than writing out a long form
function keyword like this right here,
I'm going to instead replace it with an arrow function.
So I'll remove the function keyword
and on the other side of the argument list
I'll add in my object, excuse me, my arrow.
Now our action creator is returning a single value
or in other words there is a single
JavaScript expression right here.
So rather than writing out the long form curly braces
and the return keyword right here,
we can optionally omit that return keyword
and the curly braces.
So the outer curly braces right there, and this one up here.
So this is 100% equal to the code we were
just looking at a moment ago.
If we want to, we could do a little bit
of reformatting here.
We can pull the declaration of this arrow function
onto the line right above it like so.
And then we can also optionally,
because we have one argument listed right here,
we can remove those parentheses.
I'm then going to dedent that closing curly brace
and put on a comma as well.
Okay, so what we see on this screen right now
is 100% equivalent to what we had just
a moment ago when we were returning that keyword function.
This right here is how you're going to usually
see reduxThunk action creators defined.
You're gonna have the export const,
the name of the action creator itself,
and then we're going to have one arrow function
that returns another arrow function.
And so all the logic around our action creator,
like making our request,
trying to sign up with the email, password,
and then eventually calling dispatch with our action
will occur inside the function body right here.
Okay, so that's a lot
on reduxThunk so let's take a quick pause right here.
When we come back in the next section
we're going to make use of Axios
to take our email and our password
and attempt to post them over to our backend API
to sign up for a new account.
So let's take a quick pause right here
and we'll continue in the next section.