1
00:00:00,780 --> 00:00:01,613
Instructor: We just finished up

2
00:00:01,613 --> 00:00:02,940
talking about higher order components.

3
00:00:02,940 --> 00:00:04,770
We're now gonna move on to our next big feature,

4
00:00:04,770 --> 00:00:06,390
which is middlewares.

5
00:00:06,390 --> 00:00:09,510
So middlewares inside of a Redux application.

6
00:00:09,510 --> 00:00:11,310
If we open up our current project

7
00:00:11,310 --> 00:00:14,430
and find the SRC route.js file,

8
00:00:14,430 --> 00:00:16,770
we can find the create store call right here.

9
00:00:16,770 --> 00:00:18,570
And inside that, as a third argument,

10
00:00:18,570 --> 00:00:21,810
we have passed the Apply middleware call in.

11
00:00:21,810 --> 00:00:23,310
And so in the project that we've been working on

12
00:00:23,310 --> 00:00:26,190
we've already been making use of middlewares.

13
00:00:26,190 --> 00:00:27,510
In this section, we're gonna talk about

14
00:00:27,510 --> 00:00:30,300
what a middleware is, and then we'll very quickly pivot

15
00:00:30,300 --> 00:00:31,410
to talking about a middleware that

16
00:00:31,410 --> 00:00:33,450
you and I are going to build together.

17
00:00:33,450 --> 00:00:35,160
So let's get to it.

18
00:00:35,160 --> 00:00:36,960
I'm gonna first start off by showing you a diagram

19
00:00:36,960 --> 00:00:39,540
that will hopefully look at least somewhat familiar.

20
00:00:39,540 --> 00:00:41,940
So this is a diagram of how React and Redux

21
00:00:41,940 --> 00:00:43,080
communicate with each other

22
00:00:43,080 --> 00:00:46,500
to make changes to the state inside of your application.

23
00:00:46,500 --> 00:00:48,540
Everything starts up here, on the top left hand side

24
00:00:48,540 --> 00:00:49,680
with React.

25
00:00:49,680 --> 00:00:53,250
So as you very well know, we make React components that,

26
00:00:53,250 --> 00:00:56,730
at some point in time, will call an action creator.

27
00:00:56,730 --> 00:00:58,920
Those action creators are functions.

28
00:00:58,920 --> 00:01:02,760
When we call them, they return an action object.

29
00:01:02,760 --> 00:01:04,110
And everything up to that point right there,

30
00:01:04,110 --> 00:01:05,160
up to action right here,

31
00:01:05,160 --> 00:01:06,030
hopefully that's clear

32
00:01:06,030 --> 00:01:08,670
and hopefully that's part of Redux that you understand.

33
00:01:08,670 --> 00:01:11,820
Now, what happens to that action when it gets returned,

34
00:01:11,820 --> 00:01:14,523
is where these middleware things come into play.

35
00:01:15,420 --> 00:01:19,140
So when the Action Creator returns an action, that object,

36
00:01:19,140 --> 00:01:22,260
that object with the type and the payload property

37
00:01:22,260 --> 00:01:26,760
get forwarded to a series of middleware functions.

38
00:01:26,760 --> 00:01:30,270
Middleware functions, right here, give us the ability

39
00:01:30,270 --> 00:01:31,860
to log,

40
00:01:31,860 --> 00:01:32,693
modify,

41
00:01:32,693 --> 00:01:34,200
or even stop actions

42
00:01:34,200 --> 00:01:37,410
that have been returned from our action creators.

43
00:01:37,410 --> 00:01:38,520
So you can kind of consider them

44
00:01:38,520 --> 00:01:40,350
as sort of a stop off station,

45
00:01:40,350 --> 00:01:42,000
some point that we can kind of check in

46
00:01:42,000 --> 00:01:44,220
and look at the actions that are about to be sent

47
00:01:44,220 --> 00:01:45,603
to our different reducers.

48
00:01:46,890 --> 00:01:51,270
Past that stage, the action then moves on to our reducers,

49
00:01:51,270 --> 00:01:53,640
which produce some amount of new state,

50
00:01:53,640 --> 00:01:56,340
which eventually ends going back to our React application

51
00:01:56,340 --> 00:01:59,460
and our React components re-render it with that new state.

52
00:01:59,460 --> 00:02:02,790
And then we wait for this entire cycle to repeat again.

53
00:02:02,790 --> 00:02:05,190
So in this course, we've spoken at great length

54
00:02:05,190 --> 00:02:07,470
about action creators, actions, reducers, state,

55
00:02:07,470 --> 00:02:08,460
all this stuff.

56
00:02:08,460 --> 00:02:09,600
All we're really doing right here,

57
00:02:09,600 --> 00:02:12,960
is introducing this one, new, little piece.

58
00:02:12,960 --> 00:02:14,610
And this one, new piece is the middleware.

59
00:02:14,610 --> 00:02:17,370
And again, they are functions that allow us to inspect

60
00:02:17,370 --> 00:02:20,343
these actions that are being returned from action creators.

61
00:02:21,300 --> 00:02:22,680
So let's take a quick pause right here.

62
00:02:22,680 --> 00:02:23,940
We're gonna come back the next section

63
00:02:23,940 --> 00:02:25,080
and talk about the middleware

64
00:02:25,080 --> 00:02:26,550
that you and I are gonna write together,

65
00:02:26,550 --> 00:02:29,100
to get a better sense of how they're going to work.