In the last video we got a much better idea of exactly what redux thunks is doing.
So it's now installed redux slunk into our project to be precise we already installed it as a dependency.
But before we can make use of it we have to wire it up to our redux store remember nothing inside of
redux.
It's magic.
So if you ever expect anything to be done chances are you have to do it yourself.
And that includes wiring up middleware so to wire up redux think as a middle where we're going to go
to our root index such as file inside of here.
I'm going to import phunk from redux dash thunk and then I'm also going to import a second function
from the redux library as well.
So next you create store.
I'm also going to imports apply middleware the Apply middleware function is how we connect a middleware
like Thankx to our read store itself.
So here here's where we create our store.
We're going to have to add a little bit of code to this thing so just make our code a little bit more
clear and legible.
I'm going to extract that create store with a cut and I'm going to declare it ahead of time as a variable
and then I will make sure that I still pass that story in to the store prop on that provider element.
So now to hook up redux thunk as a second argument inside of create store I'm going to call apply middleware
when I call applied middleware over here.
I'm going to pass in thuck
and that's pretty much it.
That's how we hook up a middleware to a redux store.
Pretty darn straightforward.
All right so now we can flip back over to our actions index touchiest file which has our action creator
now inside of your we need to make just one or two small changes.
First off inside of the inner function we are currently returning an object.
This is supposed to be our action when we are making use of redux thunk.
We are not going to return any actions from the inner function any more.
We can still have member we can still have normal action creators so we could still have export consta.
I don't know select post or something like that.
And inside of here we can still return a normal object with a type property partly an option no problem
whatsoever.
With redux thunk we just get the ability to return a function as well.
That's the only change so we don't actually need the action creator I just wanted to make sure is really
clear that you can still make normal action creators that return action objects so inside of this inner
function we do not need to return in action if we are returning a function if we ever want to dispatch
an action.
We will instead call the dispatch function manually with the action that we are trying to dispatch.
So rather than returning an action side of your I would instead call dispatch and pass in my action
object like so.
So let's say fenceposts and then we can add on a payload property aswell that has all the data from
our request.
Now in order to make sure that we still get our data inside of here we're going to revert back to that
same async or wait syntax that we had before.
So I'm going to mark this function as async and then I'll put the Awake keyword in front of J some place
holder and then I'm going to again change the name of this variable back over to response because that's
what it really is.
And then on my palette property output response like so now you might be curious Wait wait wait wait
why are we using the syncopate syntax again here.
Well with three ducks thunk we can use a sink.
Oh wait no problem whatsoever.
Remember the entire problem with async Oh wait is that with a synchronous action Creator it causes us
to return a request object instead of a action.
But once we have read stunk the async await syntax right here is only going to modify the return values
of this inner function and we don't care about what we return from this function.
Nothing from this function return or invocation ever gets used.
You just looked at the source code of redux thunk and you saw that redux thunked did not somehow get
a reference to whatever gets returned from right and make use of it for some nefarious purpose or anything
like that so we can return or not return anything we want from the inner function.
It is only what we return from our outer function the actual creator itself that we are concerned about
OK.
Now we're going to do a little bit of a refactor to the function.
Right now we are using the function keyword here.
I just wanted to make sure that it was really clear that we could return a function.
But whenever you make use of redux thunk you will very commonly seen this.
See this thing refactor just a little bit.
So first off it's very common to return a arrow function instead of a keyword function like so.
Secondly you'll notice that you're not using this state argument or function anywhere inside the function.
So we don't have to always list out get state we are making use of dispatch.
So we will leave that in.
Remember that whenever we have a aero function with only one arguments the parentheses around it are
optional.
So I can remove those and then finally on the outer function you'll notice that we do not have any other
variables inside of here.
We just have one expression that we are immediately returning and so on the outer function we can optionally
remove those semi-colons or mean Curly braces at the top and the bottom and remove the return key word
right there.
And so this entire statement can be shortened up to just this like so totally equivalent to what we
just had a moment ago.
We just took made use of a couple of yes 20:15 pieces of syntax that's all.
So the syntax you see right here.
You are going to very frequently see in a lot of redux projects.
Remember all this is doing is we're defining a function that is going to return a function that says
pretty much it.
This is what we're going to end up with right here.
So I'm going to save this and then I'm just going to flip back over to my browser really quick and make
sure that we do not have any error messages back over here I don't see any error messages so it looks
like we're good to go.
All right so now that we understand how to create an asynchronous action creators we're not going to
go back to our original flow around loading data up inside of a redux application.
So this one right here.
So some steps in this flow are going to kind of change now that we understand how to create asynchronous
action creators but essentially at this point we have now taken care of those steps right there and
now it's really just up to us to define a reducer that's going to see the action we are dispatching
and get the data from that API off the payload property.
So let's take a quick pause right here and we'll start taking care of our inducers in the next video.