In the last section we successfully issued an Ajax request for a weather forecast. 2
We did that by hooking up our search bar here to the fair weather action creator and remember we got 3
access to that action career by connecting our component through map dispatched to prop's with the search 4
bar. 5
All right. 6
So in this section we're going to work a little bit more on figuring out exactly what's going on with 7
the package that we installed earlier redux promise. 8
We're also going to make sure that we can at least have an idea of how we're going to work with the 9
data that's coming back. 10
So to get started on this we're going to go ahead and create a new reducer for handling the Thach Weather 11
Action going to create a new file called reducer. 12
Whether or not a US inside of the reducers folder and inside of here are going to export default. 13
Remember reducers are just functions. 14
The first argument is always our state for this particular piece of state that the user is responsible 15
for. 16
Defaulted to null and the second argument is always our action. 17
Now in here I'm just going to go ahead and console log action received action. 18
So we're going to console log the action. 19
We're also going to return state like so then we need to make sure that this reducer is actually being 20
made use of by adding it to our combined reducer is called Inside of reducers indexed on. 21
Yes it's inside of here will import the reducer 22
reducer weather and this will be responsible for the weather part of our state like zone. 23
OK. 24
So back over inside of producer here. 25
Let's take a second to review where we are. 26
We've got a simpler reducer here that just takes an action at console logs it and it doesn't really 27
do anything with the state so we can pretty much just ignore this you return state call. 28
Right now all we really need to be concerned about is this console log. 29
Next we're going to flip over to our action creator and in here I want to do something as well. 30
I just want to cancel the request that goes out as well and say request is request. 31
So remember what happens in our application here. 32
A user enters the search term they submit the form that calls the action creator. 33
That's weather and passes in the city. 34
We then crop to you or L with the city and make an Ajax request with ASIO's and ASIO's returns a promise 35
here just as you know the documentation that we looked at very briefly said it's a it's a promise that's 36
that's all it is a return is a promise now a promise is a data structure that doesn't actually yet contain 37
any of our request data right. 38
If you're not familiar with promises don't don't sweat it. 39
Just take my word for it. 40
The promise doesn't actually return or excuse me the promise doesn't actually contain any of our data 41
but I want you to take note here that we are returning the request. 42
The promise on the payload key here is very important right here. 43
We're returning the promise as the payload. 44
All right. 45
So with that in mind let's do a little experiment. 46
We've got two council logs in here. 47
One inside of the reducer and one inside of the 48
action creator inside the action creator. 49
We are console logging the request and then attaching it to the payload and then inside of the reducer 50
we're Konst logging the entire action which should have that same exact payload right. 51
Same payload. 52
So he refreshed the page and you'll notice that right away we get three console logs here. 53
And these are all action receives. 54
And they have type of redux in it. 55
Redux probe unknown action. 56
These are some default actions that redux always dispatches whenever it first starts up so it's just 57
you know it's in like boot up actions just to assemble some initial state for our application and make 58
sure that all of our inducers makes sense and don't return undefined et cetera et cetera. 59
OK so I'm going to do something here. 60
Are you going to search for San Francisco. 61
And I want you to watch the console log here very closely. 62
It's going to search and you'll see that I get two additional console logs here. 63
I get one that is the request. 64
So that's you know definitely coming from the reducer excuse me from the actual creator because that's 65
where we said console log request and then we've also got axen received which is definitely coming from 66
the reducer we look at the request here. 67
We see that we're Council logging a promise. 68
You know it's definitely a promise that says promise promise promise promise all the way through your 69
I promise you take my word for it is a promise. 70
If I recall as we've just I just said six times in a row probably we take this promise. 71
We assign it to the payload key and then that goes off to our reducers. 72
So this is that same action right here. 73
Here's the payload this object right here should be the promise. 74
So let's check it out. 75
We'll expand that and then we'll expand the payload and. 76
Well wait a minute we've got a status of 200 status tests. 77
OK. 78
And we've got some data here and looking at the data make this a little bit bigger to be looking at 79
the data. 80
This is our actual request response right here. 81
So what the heck just happened to make you just to make sure it's really clear why this is weird. 82
We've got our action creator. 83
We've got a request. 84
It's a promise. 85
We return it as the payload. 86
The action is supposed to go straight over to the reducers. 87
Here's that same action. 88
We canceled it but now instead of being a promise on the payload we have the response there instead 89
. 90
So what's happening here. 91
Well as you might imagine maybe have led up to this way too much. 92
There as you might imagine this is the purpose of redux promise is exactly what re-index promise does 93
remember redux promise is a middleware middleware is have the ability to stop or manipulate actions 94
before they hit any reduce or whatsoever. 95
So what's happening is redux promise sees this in-coming action you know as the gatekeeper sees the 96
action it looks at specifically the payload property the payload property right here if the payload 97
is a promise redux promise stops the action entirely. 98
It says Hey here's an action it's got a payload of a promise I care about this. 99
This is something that you know this is my thing it's my job and this is what I do. 100
It stops the action entirely 101
and then once the request finishes it dispatches a new action of the same type but with a payload of 102
the resolved request. 103
So in other words it unwraps the problem is for us it says OK this is a promise. 104
The reducers don't really care about just getting a promise they really care about the data. 105
So it stops the action. 106
It waits until the promise resolves and then it says OK I've got the resolved data. 107
Here's the request from the from the server. 108
I'm going to now send that to the redos sir as the payload. 109
OK. 110
So this is really where middleware starts to get really really fantastic by doing this kind of you know 111
interstitial handling of actions for us. 112
If you imagine for a second you know what would we do if we ended up inside of our seducer with a promise 113
that may be kind of hard to work with. 114
You know we would have to say like OK well here's our switch statement but don't run the switch statement 115
until this action gets resolved. 116
That would be kind of a pain in the rear. 117
So what we do is we use this middleware that stops the promise and it stops the action in its tracks 118
until the promise is resolved and then it goes off and does its thing to help nail the point home. 119
Just one more time here. 120
Let's run through it one more time. 121
Got a diagram here. 122
Probably should have opened it sooner. 123
But such is the way. 124
So here is essentially the flow through our application of this promise of this action. 125
See me first we've got our action that returns from the action creator. 126
It enters our middle where it enters you know specifically the redux promised middleware redux promises 127
. 128
Does the action have a promise as a payload if it doesn't then. 129
Okay this isn't you know it's not my job. 130
I don't care for it just let it go through let it go and hit the reducers. 131
If the action does have a promise as a payload though it does yes stop the action just stop it entirely 132
and only after the promise resolves. 133
After the Ajax request is finished create a new action and then send it through to the reducers where 134
the reducers can say like oh sweet just you know normal data. 135
Not a problem. 136
Normal data. 137
I know how to handle this. 138
OK. 139
So this is why you know again middleware is so fantastic it allows us to make this really fantastic 140
step in here that dramatically simplifies our application the code that we've written. 141
You know this Ajax request is asynchronous in nature. 142
It it really it doesn't happen instantly. 143
Normally we have to like pass a callback to it or we have to do with a promise or something like that 144
. 145
But the code that we've written in here it really doesn't appear that we've got any asynchronous coding 146
here it all looks like it's 100 percent synchronous. 147
And what that allows us to do is to have some really nice looking code that is not overly complex. 148
That's the point of redux promise to clean up our code. 149
All right. 150
So with this very thorough explanation through I'm going to remove our two console logs in here. 151
So out of the action creator and out of our reducer and let's go ahead and continue inside the next 152
section where we're going to finish up our weather reducer.