So we've got our API key here. 2
We know the request response. 3
We know what it looks like. 4
We know the endpoint that we want to use back over here and we've even got our search term you know 5
from the input and we know exactly what city a San Antonio. 6
We know exactly what city a user might want to search for it. 7
So that's basically everything we need to go ahead and make our network and quest to get our forecast 8
data right. 9
Should be straightforward right. 10
Well not quite doing Ajax requests in rebox is kind of complicated the first time you do it doing it 11
the right way is complicated. 12
The first time you do it. 13
So as I've mentioned before about many things redox this is going to seem a little bit over the top 14
. 15
The first time we go through it but once you go through it once you practice on your own example on 16
your own project you're going to say to yourself Wow this is actually amazingly simple really straightforward 17
and very handy you know very well put together very well designed. 18
But the first time you're going to save yourself this is make any sense. 19
This sucks. 20
I quit. 21
And I encourage you to you know have some patience to try to champion through this content. 22
You know get through the section learn how to make the API request once you get through it. 23
Once you do your own example I think you're going to like it a lot. 24
So with that I hope I didn't discourage you too much here. 25
It might be that you you know lock onto it the first time which case I mean to say congratulations. 26
You never know. 27
So we've got a diagram here on the screen that we've seen before. 28
It is the action creators cycle in a redux application if you recall we've got you know a user does 29
something and calls the action creator that returns our action. 30
Let's skip right here. 31
The action flows into the reducer. 32
The reducers assemble a new global application state and then that gets injected back into our application 33
. 34
Everything we renders and everyone's happy. 35
So we've got one additional step on here that I didn't have labeled to for this step over here on the 36
bottom right about middleware is. 37
So what is a middleware. 38
What's it doing for us middleware is our functions that take an action and depending on the actions 39
type and the actions payload or any other number of factors the middleware can choose to let the action 40
pass through. 41
It can manipulate the action. 42
It can you know tonsil log it or it can stop it all together we can do all these different time type 43
types of little tasks on these actions before they reach any reducer. 44
So you can kind of think of these middle weares as gatekeepers of sorts. 45
You know someone's going to call an action creator which is going to try to toss an action over to the 46
reducers right the middle weares are sitting in here kind of like you know the gatekeeper. 47
They're like a doorman or you know bouncer or what have you I don't know what whatever term you want 48
to you know you want to think of. 49
They stop any action they inspected and they say OK like you know you're fine you can go through or 50
no I'm sorry but you're not going to go to any reducers. 51
Or maybe it says OK you can go but I'm going to change this particular value on you your you know any 52
way that we want to manipulate these actions whatsoever. 53
So you might be thing yourself. 54
Why in the world would I ever want to modify an action at all. 55
You know I just called the action creator of course I want to go the reducer. 56
That's the point of calling the auction creator. 57
I want to change the state. 58
Well the answer is that middleware is allow us to do some really interesting things by kind of intercepting 59
these actions which we're going to see here very shortly. 60
At this stage I just want you to know that all the actions that we create flow through this middleware 61
step and that the middle weares can modify actions. 62
We're not seeing that here. 63
We can have many different steps of middleware is our application so we can have like you know one piece 64
of middleware we can have zero middle whereas we can have 100 different middleware if you want. 65
They're all just functions where actions pass through them before hitting the reducer. 66
OK so that is a short spiel on middleware. 67
We're going to make use of a middle here very shortly in the form of a package that we're gonna install 68
here. 69
So I'm going to open up my browser and I'm going to do a search for redux promise 70
and you'll see a hopefully one of your first results here is Ford NPM package Schir hosted on NPM us 71
or NPM JS dot com. 72
So I'm going to go here. 73
So this is a very popular middleware package for redux. 74
We're going to install this package to help us handle Ajax requests inside of our application. 75
So we're going solve this as an NPM package from the command line. 76
Let's do that now. 77
And my terminal inside of my project directory I'm going to run NPM install dash dash save redux price 78
. 79
So this is going to go out to the NPM registry grab our package install it for us. 80
In the meantime OK we're going. 81
OK. 82
So we're going to kind of dive in here a little bit and then talk about exactly what this thing is doing 83
for us. 84
So before we can actually make use this middleware package we still have to kind of hook it into our 85
application you know just because we installed it as a package doesn't mean that it magically gets inserted 86
into our redux application. 87
We need to first hook it up. 88
So we're going to do that inside of index G-S inside of our root project or something inside of our 89
source directory. 90
So you'll see and here you know we've got some stuff like react on that render some other stuff in here 91
blah blah blah. 92
Now very set up this package or our boiler plate excuse me to handle middleware. 93
All we got to do is add it right in here in a future section. 94
We'll talk a lot more about how to apply middleware. 95
And you know go through all that kind of steps. 96
For right now I want to keep it just a little bit simple and just have it as dropping as possible. 97
So at the top we'll make a new line and we're going to import redux promise which is the package that 98
we just installed. 99
So we'll import that from redux promise and then we're going to apply that middleware by just adding 100
it inside of this first set of parentheses right here. 101
Again you know we'll talk about in the future exactly what's going on here for analysis. 102
Drop it in here. 103
So we'll say redux promise. 104
Okay. 105
So that's all it takes to basically hook it into our application. 106
We just hooked a matt middleware into our redux process here. 107
Let's go ahead and continue in the next section where we will make use of this middleware