1

00:00:01,380  -->  00:00:05,280
In the last section we finish setting up a new action creator called.

2

00:00:05,460  -->  00:00:11,220
That's whether that's going to be responsible for creating an action that contains a request to the

3

00:00:11,220  -->  00:00:12,630
back end API.

4

00:00:13,110  -->  00:00:21,390
Its type was fetch whether Also note that the fecche whether action creator takes a city which is a

5

00:00:21,390  -->  00:00:28,540
string and uses it as part of the search query like so.

6

00:00:28,860  -->  00:00:35,610
We also installed the Axel's library which essentially behaves exactly like the Jayde queries Ajax method

7

00:00:35,610  -->  00:00:36,210
.

8

00:00:36,210  -->  00:00:37,620
It just reaches out.

9

00:00:37,620  -->  00:00:44,520
Doesn't Ajax request in the form of a get to the URL that we supply and it returns a promise we pass

10

00:00:44,520  -->  00:00:48,810
that promise in to the actions payload property here.

11

00:00:49,710  -->  00:00:56,520
OK let's go ahead and move back to the search bar.

12

00:00:56,520  -->  00:01:01,590
The goal here is to call the action creator whenever the user submits the form.

13

00:01:01,590  -->  00:01:05,760
And as we previously discussed you know we kind of took care of that already here at the onset and that

14

00:01:05,760  -->  00:01:12,360
for me that we want to do is wire up this form Samit so that whenever a user type something in and then

15

00:01:12,390  -->  00:01:19,290
presses enter or clicks the search button we fire that action creator and make our actual API request

16

00:01:19,310  -->  00:01:19,830
.

17

00:01:20,370  -->  00:01:27,060
So remember we're working in a container here and the container needs to be able to call an action creator

18

00:01:27,060  -->  00:01:27,090
.

19

00:01:27,090  -->  00:01:31,110
It needs to be able to reach out to redox and work with redux directly.

20

00:01:31,140  -->  00:01:38,310
That means that we need to connect our search bar container to redux using the connect method from the

21

00:01:38,310  -->  00:01:40,500
re-act redux library.

22

00:01:40,500  -->  00:01:46,470
We're also going to bind the action creator fetch whether as a property to this container as we've done

23

00:01:46,470  -->  00:01:48,930
previously.

24

00:01:49,170  -->  00:01:54,720
I know that going through the you know container setup process here probably ends up being a little

25

00:01:54,720  -->  00:01:55,400
bit confusing.

26

00:01:55,410  -->  00:01:58,130
But again this is something where just repeated process.

27

00:01:58,230  -->  00:02:02,040
It's nearly always always always completely identical.

28

00:02:02,040  -->  00:02:05,320
So let's go ahead and walk through it step by step.

29

00:02:05,790  -->  00:02:13,290
At the top we're going to import a couple of things up here that we've already imported in other components

30

00:02:13,290  -->  00:02:18,670
before we'll get the connect method from re-act redux.

31

00:02:19,320  -->  00:02:29,190
We'll get bind action creators from redux and then we'll get the action creator that we just created

32

00:02:29,190  -->  00:02:29,290
.

33

00:02:29,290  -->  00:02:39,750
So we'll import fecche weather from go up into actions and then index so up into actions and then index

34

00:02:39,770  -->  00:02:40,360
.

35

00:02:41,100  -->  00:02:42,690
Okay.

36

00:02:43,620  -->  00:02:48,720
Now before we go any farther I would really like it if you save this directory or save this file right

37

00:02:48,720  -->  00:02:54,750
here and go back over to the browser and just refresh the page and VCO want to make sure that happens

38

00:02:54,750  -->  00:02:58,190
here is that you don't get any errors popping up here in the con..

39

00:02:58,200  -->  00:03:02,750
You know so open up your console double check it make sure that no errors are popping up.

40

00:03:03,090  -->  00:03:09,030
We just added a bunch of code in the auction creator over here with a lot of kind of like you know complicated

41

00:03:09,030  -->  00:03:09,920
syntax in here.

42

00:03:09,930  -->  00:03:14,170
And I was on make sure that you don't have any typos in there before we go any further.

43

00:03:15,110  -->  00:03:15,410
OK.

44

00:03:15,420  -->  00:03:17,540
Since that looks like it's working just fine.

45

00:03:17,550  -->  00:03:20,450
Let's get back to it.

46

00:03:20,460  -->  00:03:27,080
So our goal here is to hook up the action creator fecche weather to our search bar container.

47

00:03:27,120  -->  00:03:34,930
So remember we do that by defining a function at the bottom called Map dispatch to process

48

00:03:38,400  -->  00:03:48,570
and then inside of here we will return a call to bind action creators with fetch weather and then as

49

00:03:48,570  -->  00:03:52,240
a separate set of parentheses we'll pass in.

50

00:03:52,490  -->  00:03:59,160
Oh sorry typo here as a second argument we pass and dispatch like so.

51

00:03:59,580  -->  00:04:06,690
So remember this causes the action creator whenever it gets called and returns an action find action

52

00:04:06,690  -->  00:04:08,360
creators with dispatch.

53

00:04:08,370  -->  00:04:13,620
Make sure that that action flows down into the middleware and then the reducers inside of our redux

54

00:04:13,620  -->  00:04:15,350
application.

55

00:04:15,420  -->  00:04:18,490
So we've got our map dispatched to prop's.

56

00:04:18,930  -->  00:04:26,680
Now we'll just export default and connect.

57

00:04:26,700  -->  00:04:27,170
No.

58

00:04:27,180  -->  00:04:28,240
Bear with me a second here.

59

00:04:28,350  -->  00:04:34,050
Matt dispatch to prop's with search bar.

60

00:04:34,590  -->  00:04:36,120
And before we talk about that no.

61

00:04:36,120  -->  00:04:38,790
Just one more thing up here on the class.

62

00:04:38,790  -->  00:04:41,980
Let's make sure that we aren't exploiting that as the default anymore.

63

00:04:42,120  -->  00:04:42,890
OK.

64

00:04:43,230  -->  00:04:43,700
There we go.

65

00:04:43,770  -->  00:04:44,040
OK.

66

00:04:44,040  -->  00:04:48,610
So we're down here at Connect with NULL as the first argument.

67

00:04:48,810  -->  00:04:51,140
So I don't think we've seen this before.

68

00:04:51,270  -->  00:04:58,470
Previously we've had components or containers where we map dispatch to props and we map state to props

69

00:04:58,470  -->  00:04:59,120
as well.

70

00:04:59,280  -->  00:05:04,920
So the only reason that we're passing Nolan in here is that whenever we are passing in a function that

71

00:05:04,920  -->  00:05:10,320
is supposed to map our dispatch to the props of our container it always goes in as the second argument

72

00:05:10,350  -->  00:05:10,790
in here.

73

00:05:10,830  -->  00:05:15,870
That's all that's reasonably possible and for the first one by passing and know for the first argument

74

00:05:15,870  -->  00:05:21,900
here all we're saying is hey you know I understand that redux is maintaining some state but this container

75

00:05:21,960  -->  00:05:23,250
just doesn't care about it all.

76

00:05:23,250  -->  00:05:25,100
Thanks but we don't need any state here

77

00:05:27,810  -->  00:05:28,570
OK.

78

00:05:28,710  -->  00:05:35,310
So by finding the actual crater fetch whether to dispatch and then mapping it to prop's that gives us

79

00:05:35,370  -->  00:05:36,950
access to the function.

80

00:05:37,110  -->  00:05:41,640
This stop Propp start fecche whether inside of our component here.

81

00:05:42,150  -->  00:05:44,250
So let's go ahead and call that action create are now

82

00:05:47,130  -->  00:05:52,620
inside of our on form submit which is when we want to call that action creator because that means like

83

00:05:52,710  -->  00:06:02,070
a user trying to search for a given city we'll say this stop Propst fetch weather and then we need to

84

00:06:02,070  -->  00:06:03,700
pass in the actual city.

85

00:06:03,730  -->  00:06:10,200
You know the actual search term which is as we've said up previously this state term

86

00:06:13,470  -->  00:06:19,350
as a convenience to our users after we kick off the search here we'll also clear out that search complete

87

00:06:19,770  -->  00:06:28,170
we can clear the search and put really easily by just calling this Dotts set state and set term to empty

88

00:06:28,170  -->  00:06:31,260
string like so.

89

00:06:31,260  -->  00:06:37,410
So whenever the user clicks submit or they press ENTER you know what the foreign selected it will call

90

00:06:37,470  -->  00:06:44,250
our action creator with the search term that they entered and then we will set the state of term to

91

00:06:44,250  -->  00:06:51,480
empty string which will cause our component to Riera under the input a value of this dot state DOT term

92

00:06:51,480  -->  00:06:51,540
.

93

00:06:51,540  -->  00:06:56,760
So the inputs value will now be empty strings a little it will appear to have emptied out to the user

94

00:06:56,790  -->  00:06:57,930
.

95

00:06:58,010  -->  00:07:01,980
OK let's go ahead and give this a shot in the browser.

96

00:07:01,980  -->  00:07:09,870
Now I'm going to save this and refresh.

97

00:07:09,870  -->  00:07:18,540
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

00:07:18,540  -->  00:07:19,210
for a city.

99

00:07:19,260  -->  00:07:21,650
Let's do New York.

100

00:07:22,440  -->  00:07:26,610
Looks like we've got a small errand in here cannot read prop's of no.

101

00:07:26,970  -->  00:07:27,750
Aha.

102

00:07:27,960  -->  00:07:31,770
You might guess what's going on here.

103

00:07:31,860  -->  00:07:40,170
So we have on form submit which is a callback and we just add in a reference to this and our error message

104

00:07:40,170  -->  00:07:45,900
specifically was cannot read Property prop's of M..

105

00:07:46,050  -->  00:07:47,480
Does that sound familiar at all.

106

00:07:47,490  -->  00:07:51,040
Does it sound like we might have forgotten a step somewhere in here.

107

00:07:51,180  -->  00:07:52,050
I hope it does.

108

00:07:52,060  -->  00:07:59,400
So remember when we have a callback that we pass to a GSX Elm or to a you know Dom element here and

109

00:07:59,400  -->  00:08:03,020
it makes a reference to this we need to bind the context.

110

00:08:03,240  -->  00:08:13,400
So at the top in the constructor will add this dot on form submit equals this dot on form submit it

111

00:08:13,410  -->  00:08:15,670
binds this.

112

00:08:15,790  -->  00:08:17,490
All right.

113

00:08:17,490  -->  00:08:18,750
So let's give this another shot

114

00:08:21,560  -->  00:08:29,070
going to refresh and again I mean the search for New York and then submit.

115

00:08:29,490  -->  00:08:35,130
Now you'll notice that first off the input cleared out right which is what we expected when a user searches

116

00:08:35,130  -->  00:08:37,790
for something we wanted the input to clear out immediately.

117

00:08:37,800  -->  00:08:44,100
We don't want them to have to you know select the input again and you know highlight all the content

118

00:08:44,100  -->  00:08:45,830
and delete it and what have you.

119

00:08:45,840  -->  00:08:50,940
The second thing you'll notice over here on the right it looks like our request was successfully completed

120

00:08:50,940  -->  00:08:51,420
.

121

00:08:51,420  -->  00:08:55,580
We've got the forecast endpoint with a status of 200.

122

00:08:55,660  -->  00:08:57,840
We go ahead and dial us up a little bit.

123

00:08:57,840  -->  00:09:00,020
There we go.

124

00:09:01,080  -->  00:09:07,170
And you increase the size here and I can click on the request and make sure that I select the preview

125

00:09:07,170  -->  00:09:13,260
tab here and you'll notice that we've got our response here and it looks just like the response that

126

00:09:13,260  -->  00:09:15,540
we were looking at from the browser earlier on.

127

00:09:15,600  -->  00:09:19,640
If you recall looking out the japes on over here you flip back over.

128

00:09:19,770  -->  00:09:20,510
There you go.

129

00:09:20,850  -->  00:09:26,430
So we've got our city property which has the longitude latitude we've got the name of the city and then

130

00:09:26,430  -->  00:09:32,670
we've got our big long list of all the different weather snapshots one for every three hours for the

131

00:09:32,670  -->  00:09:33,980
next five days.

132

00:09:34,140  -->  00:09:40,700
And then each of these has their own temperature and pressure and humidity exactly what we need.

133

00:09:40,740  -->  00:09:41,900
Great.

134

00:09:42,170  -->  00:09:45,440
It is looking pretty good.

135

00:09:47,550  -->  00:09:48,220
OK.

136

00:09:48,450  -->  00:09:50,090
So we're definitely on track here.

137

00:09:50,100  -->  00:09:54,420
You know we're making a request to the correct end point but you'll notice that we're still not making

138

00:09:54,480  -->  00:09:59,030
any use of the package that we installed earlier redux promise.

139

00:09:59,040  -->  00:10:05,580
In addition while we were successfully creating the Ajax request here we're not really doing anything

140

00:10:05,580  -->  00:10:06,330
with it right.

141

00:10:06,390  -->  00:10:10,190
We assigned to the payload here but we're not actually making use of it at all.

142

00:10:10,560  -->  00:10:15,310
So let's go ahead and continue in the next section and get a better handle on what's going on here.