1

00:00:01,990  -->  00:00:07,440
In the last section we successfully issued an Ajax request for a weather forecast.

2

00:00:07,440  -->  00:00:14,010
We did that by hooking up our search bar here to the fair weather action creator and remember we got

3

00:00:14,010  -->  00:00:20,910
access to that action career by connecting our component through map dispatched to prop's with the search

4

00:00:20,910  -->  00:00:22,790
bar.

5

00:00:22,800  -->  00:00:23,450
All right.

6

00:00:23,610  -->  00:00:28,600
So in this section we're going to work a little bit more on figuring out exactly what's going on with

7

00:00:28,600  -->  00:00:32,150
the package that we installed earlier redux promise.

8

00:00:32,160  -->  00:00:35,850
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

00:00:35,850  -->  00:00:39,270
data that's coming back.

10

00:00:39,360  -->  00:00:47,490
So to get started on this we're going to go ahead and create a new reducer for handling the Thach Weather

11

00:00:47,490  -->  00:00:52,480
Action going to create a new file called reducer.

12

00:00:52,830  -->  00:01:01,180
Whether or not a US inside of the reducers folder and inside of here are going to export default.

13

00:01:01,230  -->  00:01:04,050
Remember reducers are just functions.

14

00:01:04,320  -->  00:01:10,350
The first argument is always our state for this particular piece of state that the user is responsible

15

00:01:10,350  -->  00:01:11,380
for.

16

00:01:11,650  -->  00:01:17,390
Defaulted to null and the second argument is always our action.

17

00:01:17,490  -->  00:01:26,910
Now in here I'm just going to go ahead and console log action received action.

18

00:01:26,910  -->  00:01:28,700
So we're going to console log the action.

19

00:01:28,710  -->  00:01:36,270
We're also going to return state like so then we need to make sure that this reducer is actually being

20

00:01:36,270  -->  00:01:42,180
made use of by adding it to our combined reducer is called Inside of reducers indexed on.

21

00:01:42,230  -->  00:01:45,840
Yes it's inside of here will import the reducer

22

00:01:51,090  -->  00:02:03,560
reducer weather and this will be responsible for the weather part of our state like zone.

23

00:02:05,270  -->  00:02:06,030
OK.

24

00:02:06,900  -->  00:02:10,480
So back over inside of producer here.

25

00:02:10,710  -->  00:02:12,960
Let's take a second to review where we are.

26

00:02:12,990  -->  00:02:19,260
We've got a simpler reducer here that just takes an action at console logs it and it doesn't really

27

00:02:19,260  -->  00:02:23,030
do anything with the state so we can pretty much just ignore this you return state call.

28

00:02:23,040  -->  00:02:27,870
Right now all we really need to be concerned about is this console log.

29

00:02:27,960  -->  00:02:33,910
Next we're going to flip over to our action creator and in here I want to do something as well.

30

00:02:33,960  -->  00:02:42,190
I just want to cancel the request that goes out as well and say request is request.

31

00:02:43,320  -->  00:02:45,930
So remember what happens in our application here.

32

00:02:46,080  -->  00:02:51,680
A user enters the search term they submit the form that calls the action creator.

33

00:02:51,960  -->  00:02:56,280
That's weather and passes in the city.

34

00:02:56,280  -->  00:03:04,290
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

00:03:04,290  -->  00:03:10,040
here just as you know the documentation that we looked at very briefly said it's a it's a promise that's

36

00:03:10,050  -->  00:03:16,800
that's all it is a return is a promise now a promise is a data structure that doesn't actually yet contain

37

00:03:16,830  -->  00:03:18,590
any of our request data right.

38

00:03:18,600  -->  00:03:21,700
If you're not familiar with promises don't don't sweat it.

39

00:03:21,810  -->  00:03:23,200
Just take my word for it.

40

00:03:23,220  -->  00:03:28,190
The promise doesn't actually return or excuse me the promise doesn't actually contain any of our data

41

00:03:28,740  -->  00:03:33,060
but I want you to take note here that we are returning the request.

42

00:03:33,060  -->  00:03:37,860
The promise on the payload key here is very important right here.

43

00:03:37,860  -->  00:03:42,060
We're returning the promise as the payload.

44

00:03:42,060  -->  00:03:42,470
All right.

45

00:03:42,660  -->  00:03:45,760
So with that in mind let's do a little experiment.

46

00:03:45,840  -->  00:03:47,660
We've got two council logs in here.

47

00:03:47,910  -->  00:03:50,910
One inside of the reducer and one inside of the

48

00:03:53,670  -->  00:03:56,740
action creator inside the action creator.

49

00:03:56,820  -->  00:04:02,760
We are console logging the request and then attaching it to the payload and then inside of the reducer

50

00:04:02,820  -->  00:04:07,810
we're Konst logging the entire action which should have that same exact payload right.

51

00:04:07,830  -->  00:04:09,720
Same payload.

52

00:04:09,720  -->  00:04:15,310
So he refreshed the page and you'll notice that right away we get three console logs here.

53

00:04:16,230  -->  00:04:18,420
And these are all action receives.

54

00:04:18,810  -->  00:04:20,920
And they have type of redux in it.

55

00:04:21,000  -->  00:04:22,830
Redux probe unknown action.

56

00:04:22,830  -->  00:04:28,560
These are some default actions that redux always dispatches whenever it first starts up so it's just

57

00:04:28,610  -->  00:04:33,750
you know it's in like boot up actions just to assemble some initial state for our application and make

58

00:04:33,750  -->  00:04:38,690
sure that all of our inducers makes sense and don't return undefined et cetera et cetera.

59

00:04:39,450  -->  00:04:41,360
OK so I'm going to do something here.

60

00:04:41,370  -->  00:04:45,840
Are you going to search for San Francisco.

61

00:04:46,460  -->  00:04:51,190
And I want you to watch the console log here very closely.

62

00:04:52,060  -->  00:04:57,180
It's going to search and you'll see that I get two additional console logs here.

63

00:04:57,390  -->  00:04:59,490
I get one that is the request.

64

00:04:59,490  -->  00:05:05,310
So that's you know definitely coming from the reducer excuse me from the actual creator because that's

65

00:05:05,310  -->  00:05:11,310
where we said console log request and then we've also got axen received which is definitely coming from

66

00:05:11,370  -->  00:05:15,810
the reducer we look at the request here.

67

00:05:16,020  -->  00:05:19,170
We see that we're Council logging a promise.

68

00:05:19,200  -->  00:05:23,560
You know it's definitely a promise that says promise promise promise promise all the way through your

69

00:05:23,560  -->  00:05:26,560
I promise you take my word for it is a promise.

70

00:05:27,450  -->  00:05:32,650
If I recall as we've just I just said six times in a row probably we take this promise.

71

00:05:32,820  -->  00:05:38,040
We assign it to the payload key and then that goes off to our reducers.

72

00:05:38,190  -->  00:05:40,320
So this is that same action right here.

73

00:05:40,320  -->  00:05:44,190
Here's the payload this object right here should be the promise.

74

00:05:44,200  -->  00:05:45,570
So let's check it out.

75

00:05:46,120  -->  00:05:50,960
We'll expand that and then we'll expand the payload and.

76

00:05:51,300  -->  00:05:56,330
Well wait a minute we've got a status of 200 status tests.

77

00:05:56,340  -->  00:05:57,090
OK.

78

00:05:57,410  -->  00:06:05,310
And we've got some data here and looking at the data make this a little bit bigger to be looking at

79

00:06:05,310  -->  00:06:06,370
the data.

80

00:06:06,450  -->  00:06:09,420
This is our actual request response right here.

81

00:06:09,810  -->  00:06:16,410
So what the heck just happened to make you just to make sure it's really clear why this is weird.

82

00:06:16,470  -->  00:06:18,000
We've got our action creator.

83

00:06:18,000  -->  00:06:18,930
We've got a request.

84

00:06:18,960  -->  00:06:20,550
It's a promise.

85

00:06:20,580  -->  00:06:23,160
We return it as the payload.

86

00:06:23,160  -->  00:06:26,710
The action is supposed to go straight over to the reducers.

87

00:06:26,740  -->  00:06:27,870
Here's that same action.

88

00:06:27,880  -->  00:06:33,990
We canceled it but now instead of being a promise on the payload we have the response there instead

89

00:06:34,000  -->  00:06:34,460
.

90

00:06:34,920  -->  00:06:36,070
So what's happening here.

91

00:06:36,120  -->  00:06:39,570
Well as you might imagine maybe have led up to this way too much.

92

00:06:39,620  -->  00:06:45,210
There as you might imagine this is the purpose of redux promise is exactly what re-index promise does

93

00:06:45,780  -->  00:06:52,230
remember redux promise is a middleware middleware is have the ability to stop or manipulate actions

94

00:06:52,240  -->  00:06:55,200
before they hit any reduce or whatsoever.

95

00:06:55,750  -->  00:07:02,010
So what's happening is redux promise sees this in-coming action you know as the gatekeeper sees the

96

00:07:02,010  -->  00:07:12,630
action it looks at specifically the payload property the payload property right here if the payload

97

00:07:12,720  -->  00:07:18,690
is a promise redux promise stops the action entirely.

98

00:07:18,690  -->  00:07:23,970
It says Hey here's an action it's got a payload of a promise I care about this.

99

00:07:23,970  -->  00:07:27,470
This is something that you know this is my thing it's my job and this is what I do.

100

00:07:27,610  -->  00:07:29,640
It stops the action entirely

101

00:07:32,190  -->  00:07:43,440
and then once the request finishes it dispatches a new action of the same type but with a payload of

102

00:07:43,440  -->  00:07:45,160
the resolved request.

103

00:07:45,390  -->  00:07:50,240
So in other words it unwraps the problem is for us it says OK this is a promise.

104

00:07:50,430  -->  00:07:54,460
The reducers don't really care about just getting a promise they really care about the data.

105

00:07:54,750  -->  00:07:57,570
So it stops the action.

106

00:07:57,720  -->  00:08:02,220
It waits until the promise resolves and then it says OK I've got the resolved data.

107

00:08:02,240  -->  00:08:04,510
Here's the request from the from the server.

108

00:08:04,560  -->  00:08:08,140
I'm going to now send that to the redos sir as the payload.

109

00:08:08,580  -->  00:08:09,280
OK.

110

00:08:09,490  -->  00:08:16,430
So this is really where middleware starts to get really really fantastic by doing this kind of you know

111

00:08:16,440  -->  00:08:20,270
interstitial handling of actions for us.

112

00:08:20,500  -->  00:08:26,340
If you imagine for a second you know what would we do if we ended up inside of our seducer with a promise

113

00:08:26,500  -->  00:08:28,180
that may be kind of hard to work with.

114

00:08:28,170  -->  00:08:32,730
You know we would have to say like OK well here's our switch statement but don't run the switch statement

115

00:08:32,790  -->  00:08:34,420
until this action gets resolved.

116

00:08:34,410  -->  00:08:36,230
That would be kind of a pain in the rear.

117

00:08:36,510  -->  00:08:41,850
So what we do is we use this middleware that stops the promise and it stops the action in its tracks

118

00:08:41,940  -->  00:08:49,480
until the promise is resolved and then it goes off and does its thing to help nail the point home.

119

00:08:49,500  -->  00:08:50,720
Just one more time here.

120

00:08:50,830  -->  00:08:51,910
Let's run through it one more time.

121

00:08:51,940  -->  00:08:53,300
Got a diagram here.

122

00:08:53,520  -->  00:08:54,690
Probably should have opened it sooner.

123

00:08:54,690  -->  00:08:58,540
But such is the way.

124

00:08:58,530  -->  00:09:03,600
So here is essentially the flow through our application of this promise of this action.

125

00:09:03,620  -->  00:09:09,740
See me first we've got our action that returns from the action creator.

126

00:09:09,880  -->  00:09:16,650
It enters our middle where it enters you know specifically the redux promised middleware redux promises

127

00:09:16,660  -->  00:09:16,830
.

128

00:09:17,010  -->  00:09:22,740
Does the action have a promise as a payload if it doesn't then.

129

00:09:22,810  -->  00:09:24,450
Okay this isn't you know it's not my job.

130

00:09:24,450  -->  00:09:28,730
I don't care for it just let it go through let it go and hit the reducers.

131

00:09:29,220  -->  00:09:36,360
If the action does have a promise as a payload though it does yes stop the action just stop it entirely

132

00:09:37,210  -->  00:09:39,130
and only after the promise resolves.

133

00:09:39,120  -->  00:09:45,990
After the Ajax request is finished create a new action and then send it through to the reducers where

134

00:09:46,000  -->  00:09:49,550
the reducers can say like oh sweet just you know normal data.

135

00:09:49,570  -->  00:09:50,210
Not a problem.

136

00:09:50,220  -->  00:09:50,790
Normal data.

137

00:09:50,790  -->  00:09:52,710
I know how to handle this.

138

00:09:53,560  -->  00:09:54,000
OK.

139

00:09:54,000  -->  00:09:59,640
So this is why you know again middleware is so fantastic it allows us to make this really fantastic

140

00:09:59,640  -->  00:10:06,180
step in here that dramatically simplifies our application the code that we've written.

141

00:10:06,270  -->  00:10:09,560
You know this Ajax request is asynchronous in nature.

142

00:10:09,720  -->  00:10:12,280
It it really it doesn't happen instantly.

143

00:10:12,270  -->  00:10:16,860
Normally we have to like pass a callback to it or we have to do with a promise or something like that

144

00:10:16,880  -->  00:10:16,990
.

145

00:10:17,130  -->  00:10:21,930
But the code that we've written in here it really doesn't appear that we've got any asynchronous coding

146

00:10:21,930  -->  00:10:24,690
here it all looks like it's 100 percent synchronous.

147

00:10:24,690  -->  00:10:31,680
And what that allows us to do is to have some really nice looking code that is not overly complex.

148

00:10:31,750  -->  00:10:35,240
That's the point of redux promise to clean up our code.

149

00:10:35,880  -->  00:10:36,300
All right.

150

00:10:36,390  -->  00:10:42,640
So with this very thorough explanation through I'm going to remove our two console logs in here.

151

00:10:43,170  -->  00:10:52,110
So out of the action creator and out of our reducer and let's go ahead and continue inside the next

152

00:10:52,120  -->  00:10:55,470
section where we're going to finish up our weather reducer.