1

00:00:01,380  -->  00:00:03,880
So we've got our API key here.

2

00:00:04,050  -->  00:00:07,020
We know the request response.

3

00:00:07,020  -->  00:00:08,580
We know what it looks like.

4

00:00:08,640  -->  00:00:16,170
We know the endpoint that we want to use back over here and we've even got our search term you know

5

00:00:16,170  -->  00:00:21,230
from the input and we know exactly what city a San Antonio.

6

00:00:21,390  -->  00:00:24,240
We know exactly what city a user might want to search for it.

7

00:00:24,390  -->  00:00:28,710
So that's basically everything we need to go ahead and make our network and quest to get our forecast

8

00:00:28,720  -->  00:00:29,890
data right.

9

00:00:30,210  -->  00:00:32,210
Should be straightforward right.

10

00:00:32,910  -->  00:00:41,010
Well not quite doing Ajax requests in rebox is kind of complicated the first time you do it doing it

11

00:00:41,010  -->  00:00:42,410
the right way is complicated.

12

00:00:42,450  -->  00:00:44,280
The first time you do it.

13

00:00:44,280  -->  00:00:48,720
So as I've mentioned before about many things redox this is going to seem a little bit over the top

14

00:00:48,730  -->  00:00:48,900
.

15

00:00:48,900  -->  00:00:53,580
The first time we go through it but once you go through it once you practice on your own example on

16

00:00:53,580  -->  00:00:59,850
your own project you're going to say to yourself Wow this is actually amazingly simple really straightforward

17

00:01:00,150  -->  00:01:03,750
and very handy you know very well put together very well designed.

18

00:01:03,900  -->  00:01:07,940
But the first time you're going to save yourself this is make any sense.

19

00:01:07,950  -->  00:01:08,900
This sucks.

20

00:01:08,940  -->  00:01:09,590
I quit.

21

00:01:09,840  -->  00:01:16,480
And I encourage you to you know have some patience to try to champion through this content.

22

00:01:17,280  -->  00:01:21,670
You know get through the section learn how to make the API request once you get through it.

23

00:01:21,720  -->  00:01:24,870
Once you do your own example I think you're going to like it a lot.

24

00:01:24,870  -->  00:01:28,830
So with that I hope I didn't discourage you too much here.

25

00:01:28,920  -->  00:01:35,040
It might be that you you know lock onto it the first time which case I mean to say congratulations.

26

00:01:35,040  -->  00:01:36,520
You never know.

27

00:01:37,410  -->  00:01:40,480
So we've got a diagram here on the screen that we've seen before.

28

00:01:40,480  -->  00:01:47,010
It is the action creators cycle in a redux application if you recall we've got you know a user does

29

00:01:47,010  -->  00:01:50,720
something and calls the action creator that returns our action.

30

00:01:50,760  -->  00:01:52,170
Let's skip right here.

31

00:01:52,320  -->  00:01:54,570
The action flows into the reducer.

32

00:01:54,570  -->  00:02:00,180
The reducers assemble a new global application state and then that gets injected back into our application

33

00:02:00,180  -->  00:02:00,450
.

34

00:02:00,450  -->  00:02:02,970
Everything we renders and everyone's happy.

35

00:02:03,660  -->  00:02:11,730
So we've got one additional step on here that I didn't have labeled to for this step over here on the

36

00:02:11,730  -->  00:02:14,430
bottom right about middleware is.

37

00:02:14,760  -->  00:02:16,260
So what is a middleware.

38

00:02:16,260  -->  00:02:25,530
What's it doing for us middleware is our functions that take an action and depending on the actions

39

00:02:25,530  -->  00:02:33,240
type and the actions payload or any other number of factors the middleware can choose to let the action

40

00:02:33,240  -->  00:02:34,810
pass through.

41

00:02:34,980  -->  00:02:36,790
It can manipulate the action.

42

00:02:36,930  -->  00:02:42,690
It can you know tonsil log it or it can stop it all together we can do all these different time type

43

00:02:42,750  -->  00:02:48,200
types of little tasks on these actions before they reach any reducer.

44

00:02:48,420  -->  00:02:53,610
So you can kind of think of these middle weares as gatekeepers of sorts.

45

00:02:53,700  -->  00:02:59,250
You know someone's going to call an action creator which is going to try to toss an action over to the

46

00:02:59,250  -->  00:03:04,580
reducers right the middle weares are sitting in here kind of like you know the gatekeeper.

47

00:03:04,590  -->  00:03:08,520
They're like a doorman or you know bouncer or what have you I don't know what whatever term you want

48

00:03:08,550  -->  00:03:10,620
to you know you want to think of.

49

00:03:10,740  -->  00:03:16,980
They stop any action they inspected and they say OK like you know you're fine you can go through or

50

00:03:17,130  -->  00:03:19,900
no I'm sorry but you're not going to go to any reducers.

51

00:03:20,040  -->  00:03:25,650
Or maybe it says OK you can go but I'm going to change this particular value on you your you know any

52

00:03:25,650  -->  00:03:29,540
way that we want to manipulate these actions whatsoever.

53

00:03:29,640  -->  00:03:31,450
So you might be thing yourself.

54

00:03:31,860  -->  00:03:35,600
Why in the world would I ever want to modify an action at all.

55

00:03:35,790  -->  00:03:38,960
You know I just called the action creator of course I want to go the reducer.

56

00:03:38,970  -->  00:03:40,710
That's the point of calling the auction creator.

57

00:03:40,710  -->  00:03:42,490
I want to change the state.

58

00:03:43,080  -->  00:03:48,990
Well the answer is that middleware is allow us to do some really interesting things by kind of intercepting

59

00:03:48,990  -->  00:03:52,820
these actions which we're going to see here very shortly.

60

00:03:53,310  -->  00:03:58,920
At this stage I just want you to know that all the actions that we create flow through this middleware

61

00:03:58,920  -->  00:04:03,160
step and that the middle weares can modify actions.

62

00:04:03,360  -->  00:04:04,940
We're not seeing that here.

63

00:04:05,370  -->  00:04:11,130
We can have many different steps of middleware is our application so we can have like you know one piece

64

00:04:11,130  -->  00:04:15,190
of middleware we can have zero middle whereas we can have 100 different middleware if you want.

65

00:04:15,210  -->  00:04:21,780
They're all just functions where actions pass through them before hitting the reducer.

66

00:04:21,820  -->  00:04:26,650
OK so that is a short spiel on middleware.

67

00:04:26,790  -->  00:04:33,510
We're going to make use of a middle here very shortly in the form of a package that we're gonna install

68

00:04:33,510  -->  00:04:34,680
here.

69

00:04:34,680  -->  00:04:41,160
So I'm going to open up my browser and I'm going to do a search for redux promise

70

00:04:44,250  -->  00:04:49,920
and you'll see a hopefully one of your first results here is Ford NPM package Schir hosted on NPM us

71

00:04:49,980  -->  00:04:52,720
or NPM JS dot com.

72

00:04:52,830  -->  00:04:55,590
So I'm going to go here.

73

00:04:57,660  -->  00:05:03,210
So this is a very popular middleware package for redux.

74

00:05:03,210  -->  00:05:09,700
We're going to install this package to help us handle Ajax requests inside of our application.

75

00:05:10,050  -->  00:05:13,510
So we're going solve this as an NPM package from the command line.

76

00:05:13,530  -->  00:05:15,720
Let's do that now.

77

00:05:16,820  -->  00:05:26,130
And my terminal inside of my project directory I'm going to run NPM install dash dash save redux price

78

00:05:26,200  -->  00:05:29,920
.

79

00:05:29,980  -->  00:05:36,140
So this is going to go out to the NPM registry grab our package install it for us.

80

00:05:36,150  -->  00:05:39,260
In the meantime OK we're going.

81

00:05:39,900  -->  00:05:40,480
OK.

82

00:05:40,590  -->  00:05:46,320
So we're going to kind of dive in here a little bit and then talk about exactly what this thing is doing

83

00:05:46,320  -->  00:05:47,610
for us.

84

00:05:47,610  -->  00:05:52,170
So before we can actually make use this middleware package we still have to kind of hook it into our

85

00:05:52,170  -->  00:05:57,780
application you know just because we installed it as a package doesn't mean that it magically gets inserted

86

00:05:57,870  -->  00:05:59,620
into our redux application.

87

00:05:59,760  -->  00:06:01,220
We need to first hook it up.

88

00:06:01,680  -->  00:06:06,780
So we're going to do that inside of index G-S inside of our root project or something inside of our

89

00:06:06,780  -->  00:06:08,640
source directory.

90

00:06:09,690  -->  00:06:14,670
So you'll see and here you know we've got some stuff like react on that render some other stuff in here

91

00:06:14,700  -->  00:06:16,070
blah blah blah.

92

00:06:16,110  -->  00:06:22,010
Now very set up this package or our boiler plate excuse me to handle middleware.

93

00:06:22,230  -->  00:06:25,380
All we got to do is add it right in here in a future section.

94

00:06:25,380  -->  00:06:28,420
We'll talk a lot more about how to apply middleware.

95

00:06:28,590  -->  00:06:31,180
And you know go through all that kind of steps.

96

00:06:31,180  -->  00:06:37,860
For right now I want to keep it just a little bit simple and just have it as dropping as possible.

97

00:06:38,460  -->  00:06:47,700
So at the top we'll make a new line and we're going to import redux promise which is the package that

98

00:06:47,700  -->  00:06:48,960
we just installed.

99

00:06:49,290  -->  00:06:59,220
So we'll import that from redux promise and then we're going to apply that middleware by just adding

100

00:06:59,220  -->  00:07:02,420
it inside of this first set of parentheses right here.

101

00:07:02,570  -->  00:07:07,160
Again you know we'll talk about in the future exactly what's going on here for analysis.

102

00:07:07,170  -->  00:07:08,800
Drop it in here.

103

00:07:09,480  -->  00:07:11,710
So we'll say redux promise.

104

00:07:12,540  -->  00:07:13,440
Okay.

105

00:07:13,440  -->  00:07:16,550
So that's all it takes to basically hook it into our application.

106

00:07:16,560  -->  00:07:20,900
We just hooked a matt middleware into our redux process here.

107

00:07:21,390  -->  00:07:26,080
Let's go ahead and continue in the next section where we will make use of this middleware