In the last section we discussed the role that middleware has with redux middleware has the ability
to block modify or just let pass through actions as they are created before they hit or reduce.
So you didn't really think of middleware is as like a gatekeeper of sorts.
We then installed a piece of middleware called redux promise which is going to help us with our Ajax
request and a little bit in this section we're going to work on creating that actual Ajax request and
we're going to temporarily bench the topic of Middle weares and redux promise.
We're going to come back to both of those in a section or two in this section is going to focus on making
the actual request.
OK.
So the actual Ajax request itself.
Remember our application state holds all the data of our application.
And as you might imagine that includes stuff like weather data.
We only change our application state through our reducers and actions.
So as you might imagine to load our weather data you know to actually change our application state and
add that weather data we need to dispatch an action call it you know call an action creator which is
going to be responsible for making that Ajax request.
So I'm inside of index not us in our actions directory here where we're going to create an action creator
that's going to be responsible for making API request to go fetch our weather data.
So as before we're going to create a new function and export it so that it can be required into other
files in our project here.
And we're going to call it fetch whether
member action creators always have to return an action and an action is an object which always always
always has to have a type.
Now the last time we made an action we put a string in here that kind of looks like this wasn't the
same string and now the same words but it was a string.
This time around rather than making this a string we're going to extract this to a separate variable
and export it
and assign it to the constant fetch whether
And instead of using a string to your will use fetch whether the variable.
So all we did was define a variable called fecche whether we assign the string to it fetch whether And
then we exported that variable.
And finally we created an action where the type was such weather.
So you might be asking well you know what's the purpose of this.
Why don't we just make the thing a string.
And the answer is to keep our action types consistent between our action creators and our reducers in
a little bit.
We're going to create a reducer that handles this type right here.
Right.
And it's going to specifically say for action that type and then when have a switch statement and it's
going to be looking for the string that's weather.
Right.
Well imagine for a second that in this file right here I had the string fetch weather and then in the
reducer I had the same thing fetch weather and then someone comes along and they accidentally did that.
You know they actually make some typo that causes the type in here inside of our action crater to not
be identical to the type inside of our reducer.
That's a huge bug right there.
None of our actions would then be recognized by that reducer.
So what we usually do as a convention is make a single variable that holds our actual type and we use
it in here and then later on we're going to import that variable into our reducer as well so that we
don't ever have to be referencing or like you know copy pasting strings between different files.
We just have the single canonical source of action type right here this variable right here.
What that means is I could then later come on through here and do like that or something if I wanted
to write and because my reducer and my action are referencing this variable it doesn't really matter
what the value of the string is.
So long as it's consistent in both locations.
OK so enough on action types here.
Let's get back to making our request.
So we have our action creator that's returning an action with type fecche weather.
So now it's time to actually go ahead and make our API request to make our API request.
We need to put together our request you are.
This is just like if you're familiar with Jay queery And you know get requests.
That's basically what we're going to do here we're going to make a deal.
We're going to make an AJAX get request to it and that's going to return our data for us.
So the really critical part here is making sure that we put together the correct URL to do that.
We're going to reference the documentation a little bit more.
So I'm going to come over here and we'll just use this string right here as kind of a template for us.
So I'm going to copy this URL and come back over to our project and make a new variable Konst route
you are l and I'm going to paste
wrap it in quotes and put a semi colon at the end.
So this is the part of the URL that we really care about it's Scott this kind of you know the route
you are l the domain and the path.
But then it's also got this queery right here.
And the application ID which should be our API key instead.
So we're going to clean up the world just a little bit.
We're going to delete everything from the Q to app ID so just Q equals.
Yours might say in London not Lundell whatever coming to us in an ampersand.
OK so I now have forecast questionmark app ID equals law.
And again we don't really want to use someone else's API keys so I'm going to delete this as well.
So we're then reduced just down to forecast.
Question mark app ID equals.
So we do want to get the API key in here.
One way that we can do that is to say take that string plus API key.
This would definitely work but we can also make use of yes 6 template strings in here to clean up this
code a little bit.
So this is going to be you know again another little bit a piece of yes six syntax template strings.
Just take one string and then a javascript variable and it inserts or injects that javascript variable
into a string.
So we want the API key to be at the very end here.
So I'm going to replace both of my quotes with back ticks.
I remember back ticks are the character that's to the left of the one on your keyboard.
Then I'm going to delete the plus API key and then to inject the javascript variable into this.
All right.
Dollar Sign curly braces and then API key.
So the result here is a year old that looks like forecast.
Questionmark up ID equals and then 6 7 8 blah blah blah blah blah.
You don't have to use template strings if you don't want to.
Know again this is iOS 6 syntax right here.
Totally totally optional.
You can always just write you know the base Eurail plus API key if you want to if you think that's more
clear template strings in general though you know it's cleans up the code a little bit makes things
a little bit more easier read I suppose.
But again totally optional if you don't want to use it.
OK so we've got our root your L.
All he needs to do now is make sure that we get the actual city queery in there.
I remember you know pop open the End Point.
Here again we need to pass in.
Q equals and then the city name and the country code in here.
Separated by a comma.
So we need to get that city from somewhere.
We're going to say that whenever someone calls the fetch weather action they're going to pass along
a city name as well.
So we're going to just say that we should always have a argument in here of city which should be a string
which would be like you know a search term basically like London or San Antonio or New York or what
have you.
So with that we can then craft our final you or else string that includes that search term.
Again we're going to use a query string for this to form up our final u r l.
So we'll make our back ticks will insert the root u r l and then I'm going to flip back over here real
quick.
Remember we have to have two equals.
And then the city name comma city country code so we've got everything up to the app ID.
So Will do.
And for an additional piece of the query string.
Q equals dollar sign city.
So that's we're injecting in the city name here comma and then normally we would put in the country
code in this application we're going to make the country code static.
So it's always going to be just us if you want to have a different country in here.
You know if you're from some other country and you don't want to be just searching for U.S. cities all
day you can certainly place the different country code in here.
You can find that country code within the documentation over here you're going to need to do a little
bit of research to find the appropriate one.
OK.
So finally we've got our URL here should be pretty good.
We've got the route you well we've got our app I.D. and we add on an additional query here of and q
with a city name Khama us.
I like this looking pretty good.
So we've got to request your l.
Last thing we need to do is make the actual request.
So if you again if you're familiar with Jay Querrey you might be expecting to write something like you
know a dollar sign get you r l or something like that.
Well we don't really need a library as fully featured as Jay Querrey for application here.
J.A.G. contains a ton of functionality and all we really need to do is just make it simple Ajax request.
So instead of using a query we're going to use a another library called ASIO's which we're going to
install from the terminal.
So at the terminal we're going to write NPM install dash save x.
It is A-X.
Oh yes.
So Axel's is a library that is solely made for making Ajax requests from the browser.
It works almost identically to Jay query.
As a matter of fact I'm going to hop over to my browser and pull ups and the documentation will look
at an example or two really quick.
And so right here you can see you know here's a get request which is exactly what we need to make use
call ASIO's type get passed in the URL and that returns a promise.
So we can write Daut then and have a function in here that will handle the response for us.
Super straightforward.
If you're not familiar with promises don't sweat it.
We don't actually we're not actually going to work with promises that much here.
As a matter of fact that's actually the purpose of redux promise as you might imagine.
All we really need to do is make make the Ajax request which will do by writing just as Dot get.
So let's do that now.
At the top of our file I'm going to import Axel's from Axel's because we just installed it and then
down in our action creator will say constant requests equals x start get you r l.
So basically take this URL that we crafted with a very particular search city and make a get request
on it.
This will return a promise right here.
I'm just going to call it request.
So last step here we're going to pass that request into our pay into our action here as the payload.
Remember the payload is an optional property that goes along with actions that can contain some additional
data that describes this particular action.
So we got payload is the request.
OK.
So we added a ton of code in here.
Well maybe not a ton.
We've only got about you know 16 lines or so but I feel as though it's pretty complicated so let's do
a quick rundown of it again in the next section.