-: In the last section, we had a long discussion
about how the Redux Promise Middleware works.
We're going to continue in this video
by trying to create this entire flow on our own.
So our eventual goal here is to take
Redux Promise out of our project entirely
and replace it with the Middleware that you and I write.
So let's get to it.
I'm going to get started by creating a new directory
inside my source folder.
I'm going to call this directory Middlewares.
So eventually it will house all the different
Middlewares inside of our application.
Then inside that directory
I'm going to make a new file called async.js.
That's going to be the name of our Middleware
that's going to allow us to create
asynchronous action creators
or action creators that return a promise
on its payload property.
Then inside of here, we're going to write out
a little bit of boiler plate for the Middleware itself.
And I'm going tell you right away,
the code we're going to write
is going to look a little bit funky, all right?
But we'll talk about exactly what it's doing.
So at the very top, I'm going to say
export, default, a function
and then inside there I'm going to return a function
and then inside of there, I'm going to return a function.
Okay? So little bit crazy, yes?
We've got a function that we're exporting
that is returning a function
and that is returning a function.
So right now we've got three functions
all stacked up on top of each other.
So immediately this probably looks
really strange and really nasty.
Well, believe it or not, this is how we create Middlewares.
We have a series of functions that return each other.
Your first question, your very immediate question might be
why in the world are we doing this right here?
And the answer that I have for you
is that it's somewhat arbitrarily put together this way.
The author of Redux decided to make the signature
of Middlewares look like this.
It's a completely arbitrary and random decision.
We somewhat could have just as well
gotten away with doing Middlewares
that just looked like this.
We probably could have figured out a way
or the author of Redux,
probably could have written it out like this
and say, "Okay, just put your Middleware logic
inside of here and you're good to go."
That probably could have happened,
but for whatever reason they decided to use
a little bit more fancy syntax
like what you see up here.
So kind of an arbitrary decision,
not necessarily a great reason for it.
So let's talk about what the purpose
of each of these functions are. At the end of the day
each function is going to be getting called
with a slightly different set of arguments.
The first outer function right here, is going to be called
with a couple of different properties on the first argument.
So it's going to be an object with a couple properties.
Right now, you and I only care about
one property off of that object,
so we're going to destructure that one property off.
That one property is called dispatch, like so.
And notice that we have the curly braces here
because we specifically want to pull off
just that dispatch thing
and we'll talk about what dispatch does in just a second.
But for now, let's talk
about the other two functions as well.
The second function down is going to be called
with a single argument of, next.
Next, right here is also a function.
Next, is a reference to the next Middleware on our chain.
So remember, inside of our application
we could potentially have many different Middlewares.
When we were looking at this diagram just a second ago
we had the text on here that said something like
I don't know, I don't care about this action,
send it to NEXT Middleware.
So NEXT right here, very purposefully put in capitals.
NEXT is a reference to the next Middleware
inside of our chain.
If our Middleware does not care about the incoming action
then it can call this next function with that action
and that's going to afford the action
onto the next Middleware.
Now the last function, the third one right here
is going to be called with our action object.
So this is like the very real action that got returned
from our action creator.
So it's going to be like this thing up here.
It's going to be an object with a tight property
and possibly with a payload as well.
Okay, so we spoke about the three functions here
and some of the arguments that are
encapsulated with each one.
So we've got the arguments on here
and I think you can agree with me
that although this code looks really nasty
you can kind of understand what's going on.
We've got a function, that returns a function,
that returns the function.
So now that we've kind of got an idea
of what's happening here
we're going to do a little refactor to this file.
Now, when we do the refactor
it's going to make the code look really crazy
but I really want you to understand
that the refactor we're going to do,
even though the syntax will look strange,
is going to be a 100% equivalent
to what you currently see on the screen.
Okay? It's going be a 100% equivalent.
So let's do this refactor.
To get started, I'm going to go up
to the very top line up here,
and I'm going to replace the function keyword
with an arrow function instead.
So to refactor this thing to an arrow function
I'm going to remove the function keyword
and then I'll put the arrow on the other side
of that argument like so.
Okay? So that's refactor number one.
Now remember, anytime we have an arrow function
if the arrow function contains a single expression
like just one line of JavaScript code,
then we can optionally remove our semi or our curly braces.
So this curly brace right here
and this curly brace right here,
and we can omit the return keyword.
So that's one valid refactor,
one very valid way to write out an arrow function.
The arrow function contains a JavaScript expression.
We can optionally omit the curly braces
and remove the return keyword.
So let's apply that refactor to what we, what we have now.
So I'm going to remove the curly braces,
that one and that one
and I will remove the return keyword.
Okay, so that's step two.
So now what we have is a 100% equivalent
to what we just had a moment ago.
This is still a function that returns a function.
Now we're going to do that same refactor again
to the next function.
This one right here.
So I'm going to turn this function
into an arrow function as well.
I'll get started by removing the function keyword.
I will put an arrow on the other side of the argument list.
And because I only have one single argument inside of here
I'm going to remove the parenthesis around that next thing.
Now we're going to apply that same rule
that we just applied a second ago.
Remember, if the body of our function
so this thing right here is a single JavaScript expression
then we can optionally omit our curly braces
and the return keyword.
So I'm going to do that refactor right now.
I'm going to remove the curly braces
and omit the return keyword.
So now we're going to do the same refactor, one last time.
I'm going to turn this function
into an arrow function instead.
So to do so, I'm going to remove the function keyword.
I'm going put an arrow on the other side.
And because I have one argument here
I'm going to remove that set of parentheses.
Now, in this case, we probably are going to have more
than a single Java JavaScript expression in here.
So I'm not going to omit the curly braces in this case.
All right, so what we have
on the screen right now is a 100% equivalent
to what we just had a moment ago
with all three of those function keywords in here.
This is still a 100% valid JavaScript code.
Now, the very last thing I'm going to do
is to condense these functions down
onto a single line up here.
So all I'm doing is removing new line characters.
So right here, I'm going to put that on a line above it
and I'll do the same thing with action as well.
And then the very last step
I'm going to indent that curly brace, all right?
So can't say it enough.
This is a 100% equivalent code
to the three functions that we were looking at a moment ago.
So this right here is the boiler plate
that you're going to write out.
Anytime you are creating a Middleware function.
We have in total three functions.
A function, that returns a function,
that returns a function.
So now that we've done this crazy refactor,
let's come back in the next section
and we're going to talk about exactly what logic
we're going to put inside of this thing.
So quick break, and I'll see you in just a minute.