1
00:00:01,200 --> 00:00:02,033
Instructor: In the last section,

2
00:00:02,033 --> 00:00:03,753
we wrote out our first middleware.

3
00:00:03,753 --> 00:00:06,570
We went through that long process of doing that re-factor.

4
00:00:06,570 --> 00:00:08,820
The entire goal of that was just to get you to understand

5
00:00:08,820 --> 00:00:11,040
that what we're looking at right here is a series

6
00:00:11,040 --> 00:00:14,559
of three functions that successfully return each other.

7
00:00:14,559 --> 00:00:18,450
Now again, we don't, this is like not a hard requirement.

8
00:00:18,450 --> 00:00:21,810
Like Redux did not have to be written in this way.

9
00:00:21,810 --> 00:00:24,120
The author could have definitely figured out a way

10
00:00:24,120 --> 00:00:27,123
to instead just write, have you write one single function,

11
00:00:27,960 --> 00:00:31,170
that would be called with all the appropriate arguments.

12
00:00:31,170 --> 00:00:35,160
So it could have absolutely been looking like that.

13
00:00:35,160 --> 00:00:37,170
Like a single function that gets dispatched,

14
00:00:37,170 --> 00:00:39,240
the next thing and the action thing.

15
00:00:39,240 --> 00:00:40,530
But instead, they decided to go at

16
00:00:40,530 --> 00:00:42,710
this more fancy format up here.

17
00:00:42,710 --> 00:00:45,600
Not necessarily a great reason behind it,

18
00:00:45,600 --> 00:00:46,773
but that's what we got.

19
00:00:47,730 --> 00:00:49,200
So now that we've got the middleware put together

20
00:00:49,200 --> 00:00:50,610
we need to figure out what logic

21
00:00:50,610 --> 00:00:52,350
to actually write inside of here.

22
00:00:52,350 --> 00:00:54,720
So inside this function body right here,

23
00:00:54,720 --> 00:00:56,610
we are going to have our action.

24
00:00:56,610 --> 00:00:59,790
This is where our middleware logic gets executed.

25
00:00:59,790 --> 00:01:01,260
So this right here is where we're going

26
00:01:01,260 --> 00:01:03,660
to go through this entire flow.

27
00:01:03,660 --> 00:01:06,690
So inside that function body, we need to decide

28
00:01:06,690 --> 00:01:09,120
whether or not the action contains a promise,

29
00:01:09,120 --> 00:01:11,340
and then depending upon whether or not it does,

30
00:01:11,340 --> 00:01:13,503
we'll do something slightly different.

31
00:01:14,460 --> 00:01:16,230
So let's get to it.

32
00:01:16,230 --> 00:01:17,910
We're gonna first get started by writing out

33
00:01:17,910 --> 00:01:20,460
a couple of comments to guide ourselves.

34
00:01:20,460 --> 00:01:22,740
So inside the middleware, the first thing we want to do

35
00:01:22,740 --> 00:01:27,740
is check to see if the action has a promise

36
00:01:27,930 --> 00:01:31,173
on its payload property.

37
00:01:34,650 --> 00:01:39,360
If it does, then wait for it to resolve.

38
00:01:39,360 --> 00:01:43,170
If it doesn't, then send the action

39
00:01:43,170 --> 00:01:46,770
onto the next middleware.

40
00:01:46,770 --> 00:01:48,483
So that's our overall guide here.

41
00:01:49,560 --> 00:01:51,570
For right now, the most important thing to do

42
00:01:51,570 --> 00:01:54,000
is to figure out exactly how we're gonna check to see

43
00:01:54,000 --> 00:01:56,600
if the action has a promise on the payload property.

44
00:01:57,810 --> 00:01:59,190
And then we're going to immediately also

45
00:01:59,190 --> 00:02:01,140
write out this statement right here,

46
00:02:01,140 --> 00:02:02,610
where if it doesn't have a promise,

47
00:02:02,610 --> 00:02:04,470
we're gonna send it on to the next middleware

48
00:02:04,470 --> 00:02:05,553
inside of our chain.

49
00:02:07,140 --> 00:02:09,180
So to check to see if the middleware,

50
00:02:09,180 --> 00:02:11,880
if the action has a promise on its payload property.

51
00:02:11,880 --> 00:02:13,440
Unfortunately, we don't have really

52
00:02:13,440 --> 00:02:15,213
any fancy way of doing that.

53
00:02:16,110 --> 00:02:18,600
So to check to see if it has a promise,

54
00:02:18,600 --> 00:02:21,510
we're gonna write out if this thing

55
00:02:21,510 --> 00:02:23,280
does not have a payload at all.

56
00:02:23,280 --> 00:02:24,930
So let's first check to make sure

57
00:02:24,930 --> 00:02:27,660
that it has a payload in the first place,

58
00:02:27,660 --> 00:02:32,660
or if there is not a then function on the payload.

59
00:02:33,900 --> 00:02:36,720
So we again, don't really have a fancy way to check to see

60
00:02:36,720 --> 00:02:39,180
if something is or is not a promise.

61
00:02:39,180 --> 00:02:41,790
All we can really do is look at the payload property

62
00:02:41,790 --> 00:02:45,150
and say, does that thing have a then property?

63
00:02:45,150 --> 00:02:47,430
If it does, then we're just going to assume

64
00:02:47,430 --> 00:02:49,560
that it is in fact a promise.

65
00:02:49,560 --> 00:02:51,780
Not the best solution right here,

66
00:02:51,780 --> 00:02:53,070
but unfortunately in JavaScript,

67
00:02:53,070 --> 00:02:55,233
it's basically the best thing we have.

68
00:02:56,550 --> 00:03:00,427
So if you and I do not care about this action,

69
00:03:00,427 --> 00:03:02,910
and we will not, if it doesn't have a payload

70
00:03:02,910 --> 00:03:05,460
or it does not have a promise on the payload,

71
00:03:05,460 --> 00:03:07,050
then we're just gonna take that action

72
00:03:07,050 --> 00:03:10,410
and send it on to the next middleware in our chain.

73
00:03:10,410 --> 00:03:13,440
To do so, we're gonna use that next function.

74
00:03:13,440 --> 00:03:14,850
Remember, next is a reference

75
00:03:14,850 --> 00:03:17,220
to the next middleware in the chain.

76
00:03:17,220 --> 00:03:19,260
So to forward the action on,

77
00:03:19,260 --> 00:03:23,583
we will say return next with action, like so.

78
00:03:24,570 --> 00:03:26,730
The return keyword is here just to make sure

79
00:03:26,730 --> 00:03:29,070
that we do not execute any other code

80
00:03:29,070 --> 00:03:30,720
inside this middleware.

81
00:03:30,720 --> 00:03:33,690
So we're not necessarily returning any value here.

82
00:03:33,690 --> 00:03:34,860
We're really just trying to make sure

83
00:03:34,860 --> 00:03:37,050
that we bail out of this middleware

84
00:03:37,050 --> 00:03:39,150
and don't run any other code inside of it.

85
00:03:40,230 --> 00:03:42,210
Then again, the next function is a reference

86
00:03:42,210 --> 00:03:43,950
to the next middle middleware on the chain.

87
00:03:43,950 --> 00:03:44,910
So we're just saying, hey, you know what?

88
00:03:44,910 --> 00:03:46,260
We don't care about this thing at all.

89
00:03:46,260 --> 00:03:48,510
Just take the action, forward it on.

90
00:03:48,510 --> 00:03:51,630
Just let it do its thing. We don't care about it.

91
00:03:51,630 --> 00:03:53,850
Okay, so that's step one for our middleware.

92
00:03:53,850 --> 00:03:55,140
Let's take a quick pause right here.

93
00:03:55,140 --> 00:03:57,090
We'll come back and in the next section,

94
00:03:57,090 --> 00:03:58,560
we're gonna handle the other case.

95
00:03:58,560 --> 00:04:01,110
The case in which we do have a promise.

96
00:04:01,110 --> 00:04:04,020
In which case we want to wait for this thing to resolve.

97
00:04:04,020 --> 00:04:06,520
So, quick break and I'll see you in just a minute.