In the last section we finish setting up a new action creator called. 2
That's whether that's going to be responsible for creating an action that contains a request to the 3
back end API. 4
Its type was fetch whether Also note that the fecche whether action creator takes a city which is a 5
string and uses it as part of the search query like so. 6
We also installed the Axel's library which essentially behaves exactly like the Jayde queries Ajax method 7
. 8
It just reaches out. 9
Doesn't Ajax request in the form of a get to the URL that we supply and it returns a promise we pass 10
that promise in to the actions payload property here. 11
OK let's go ahead and move back to the search bar. 12
The goal here is to call the action creator whenever the user submits the form. 13
And as we previously discussed you know we kind of took care of that already here at the onset and that 14
for me that we want to do is wire up this form Samit so that whenever a user type something in and then 15
presses enter or clicks the search button we fire that action creator and make our actual API request 16
. 17
So remember we're working in a container here and the container needs to be able to call an action creator 18
. 19
It needs to be able to reach out to redox and work with redux directly. 20
That means that we need to connect our search bar container to redux using the connect method from the 21
re-act redux library. 22
We're also going to bind the action creator fetch whether as a property to this container as we've done 23
previously. 24
I know that going through the you know container setup process here probably ends up being a little 25
bit confusing. 26
But again this is something where just repeated process. 27
It's nearly always always always completely identical. 28
So let's go ahead and walk through it step by step. 29
At the top we're going to import a couple of things up here that we've already imported in other components 30
before we'll get the connect method from re-act redux. 31
We'll get bind action creators from redux and then we'll get the action creator that we just created 32
. 33
So we'll import fecche weather from go up into actions and then index so up into actions and then index 34
. 35
Okay. 36
Now before we go any farther I would really like it if you save this directory or save this file right 37
here and go back over to the browser and just refresh the page and VCO want to make sure that happens 38
here is that you don't get any errors popping up here in the con.. 39
You know so open up your console double check it make sure that no errors are popping up. 40
We just added a bunch of code in the auction creator over here with a lot of kind of like you know complicated 41
syntax in here. 42
And I was on make sure that you don't have any typos in there before we go any further. 43
OK. 44
Since that looks like it's working just fine. 45
Let's get back to it. 46
So our goal here is to hook up the action creator fecche weather to our search bar container. 47
So remember we do that by defining a function at the bottom called Map dispatch to process 48
and then inside of here we will return a call to bind action creators with fetch weather and then as 49
a separate set of parentheses we'll pass in. 50
Oh sorry typo here as a second argument we pass and dispatch like so. 51
So remember this causes the action creator whenever it gets called and returns an action find action 52
creators with dispatch. 53
Make sure that that action flows down into the middleware and then the reducers inside of our redux 54
application. 55
So we've got our map dispatched to prop's. 56
Now we'll just export default and connect. 57
No. 58
Bear with me a second here. 59
Matt dispatch to prop's with search bar. 60
And before we talk about that no. 61
Just one more thing up here on the class. 62
Let's make sure that we aren't exploiting that as the default anymore. 63
OK. 64
There we go. 65
OK. 66
So we're down here at Connect with NULL as the first argument. 67
So I don't think we've seen this before. 68
Previously we've had components or containers where we map dispatch to props and we map state to props 69
as well. 70
So the only reason that we're passing Nolan in here is that whenever we are passing in a function that 71
is supposed to map our dispatch to the props of our container it always goes in as the second argument 72
in here. 73
That's all that's reasonably possible and for the first one by passing and know for the first argument 74
here all we're saying is hey you know I understand that redux is maintaining some state but this container 75
just doesn't care about it all. 76
Thanks but we don't need any state here 77
OK. 78
So by finding the actual crater fetch whether to dispatch and then mapping it to prop's that gives us 79
access to the function. 80
This stop Propp start fecche whether inside of our component here. 81
So let's go ahead and call that action create are now 82
inside of our on form submit which is when we want to call that action creator because that means like 83
a user trying to search for a given city we'll say this stop Propst fetch weather and then we need to 84
pass in the actual city. 85
You know the actual search term which is as we've said up previously this state term 86
as a convenience to our users after we kick off the search here we'll also clear out that search complete 87
we can clear the search and put really easily by just calling this Dotts set state and set term to empty 88
string like so. 89
So whenever the user clicks submit or they press ENTER you know what the foreign selected it will call 90
our action creator with the search term that they entered and then we will set the state of term to 91
empty string which will cause our component to Riera under the input a value of this dot state DOT term 92
. 93
So the inputs value will now be empty strings a little it will appear to have emptied out to the user 94
. 95
OK let's go ahead and give this a shot in the browser. 96
Now I'm going to save this and refresh. 97
And then over in my counsel I'm going to swap to the network tab then I'm going to go ahead and search 98
for a city. 99
Let's do New York. 100
Looks like we've got a small errand in here cannot read prop's of no. 101
Aha. 102
You might guess what's going on here. 103
So we have on form submit which is a callback and we just add in a reference to this and our error message 104
specifically was cannot read Property prop's of M.. 105
Does that sound familiar at all. 106
Does it sound like we might have forgotten a step somewhere in here. 107
I hope it does. 108
So remember when we have a callback that we pass to a GSX Elm or to a you know Dom element here and 109
it makes a reference to this we need to bind the context. 110
So at the top in the constructor will add this dot on form submit equals this dot on form submit it 111
binds this. 112
All right. 113
So let's give this another shot 114
going to refresh and again I mean the search for New York and then submit. 115
Now you'll notice that first off the input cleared out right which is what we expected when a user searches 116
for something we wanted the input to clear out immediately. 117
We don't want them to have to you know select the input again and you know highlight all the content 118
and delete it and what have you. 119
The second thing you'll notice over here on the right it looks like our request was successfully completed 120
. 121
We've got the forecast endpoint with a status of 200. 122
We go ahead and dial us up a little bit. 123
There we go. 124
And you increase the size here and I can click on the request and make sure that I select the preview 125
tab here and you'll notice that we've got our response here and it looks just like the response that 126
we were looking at from the browser earlier on. 127
If you recall looking out the japes on over here you flip back over. 128
There you go. 129
So we've got our city property which has the longitude latitude we've got the name of the city and then 130
we've got our big long list of all the different weather snapshots one for every three hours for the 131
next five days. 132
And then each of these has their own temperature and pressure and humidity exactly what we need. 133
Great. 134
It is looking pretty good. 135
OK. 136
So we're definitely on track here. 137
You know we're making a request to the correct end point but you'll notice that we're still not making 138
any use of the package that we installed earlier redux promise. 139
In addition while we were successfully creating the Ajax request here we're not really doing anything 140
with it right. 141
We assigned to the payload here but we're not actually making use of it at all. 142
So let's go ahead and continue in the next section and get a better handle on what's going on here.