1
00:00:01,620 --> 00:00:03,020
Hey you're still around.

2
00:00:03,060 --> 00:00:04,880
Good to see you again.

3
00:00:04,890 --> 00:00:05,290
All right.

4
00:00:05,340 --> 00:00:11,550
So we just console logged these action types and also did that.

5
00:00:11,550 --> 00:00:12,690
Where did we do that.

6
00:00:12,690 --> 00:00:16,260
We also did that the action part as well.

7
00:00:16,420 --> 00:00:23,660
But I mean this is nice to see but we don't want to console log everywhere in our redux app for all

8
00:00:23,660 --> 00:00:24,580
of our actions.

9
00:00:24,800 --> 00:00:29,300
So let's remove this and go back to the way we had things.

10
00:00:29,390 --> 00:00:35,010
Let me say that and also in the reducer remove our console log.

11
00:00:35,340 --> 00:00:44,010
Now wouldn't it be cool if there was a way for us to come back to our app and still monitor our actions

12
00:00:44,910 --> 00:00:52,760
and debug our applications by just seeing which action got triggered which reducer got triggered.

13
00:00:53,220 --> 00:00:56,500
Luckily for us there's a way to do that.

14
00:00:57,320 --> 00:00:58,790
Now I'm going to show you how it is.

15
00:00:58,790 --> 00:01:03,250
But first I have to admit something: I may have lied a little bit to you.

16
00:01:03,530 --> 00:01:13,180
You see there's actually another part to this diagram that showed you and that's something called middleware.

17
00:01:13,490 --> 00:01:14,360
And don't get scared.

18
00:01:14,360 --> 00:01:20,690
It's quite simple and works similarly to how middleware an express.js works.

19
00:01:21,210 --> 00:01:31,680
It simply listens for actions and it's a tunnel that actions go through and depending on what the middleware

20
00:01:31,680 --> 00:01:36,660
is, it can modify the action or trigger another action.

21
00:01:36,660 --> 00:01:44,790
So they're like triggers that actions go through and something happens within this blue box, before it

22
00:01:44,790 --> 00:01:46,860
hits the reducer.

23
00:01:46,890 --> 00:01:50,020
So why might that be useful for us.

24
00:01:50,970 --> 00:01:57,820
I'm going to show you one thing that it's really really great for. If we go back to index.js file,

25
00:01:59,250 --> 00:02:05,580
we can install something that is a middleware and it's called redux logger.

26
00:02:05,580 --> 00:02:13,140
So let's do that: npm install redux-logger.

27
00:02:13,140 --> 00:02:13,840
All right perfect.

28
00:02:13,950 --> 00:02:20,850
And the way we use this logger, which helps with logging in the console so that we can debug our app really

29
00:02:20,850 --> 00:02:32,010
easily, we can just in here import something called createLogger that comes from the package we just

30
00:02:32,010 --> 00:02:40,020
installed which is the redux-logger package and it's very very simple to use.

31
00:02:40,290 --> 00:02:49,780
All we need to do is say const logger eqals to createLogger.

32
00:02:50,000 --> 00:03:01,270
And now that we have this logger function, which is a middleware, we can apply that to our redux app.

33
00:03:01,660 --> 00:03:10,450
And the way we do that is through the redux package that comes with something called applyMiddleware

34
00:03:13,990 --> 00:03:19,380
and we apply middleware says hey we want to apply some middleware to this flow that we have going on

35
00:03:21,010 --> 00:03:28,870
so we can simply in the create store function have a second parameter that says applyMiddleware and

36
00:03:28,870 --> 00:03:31,160
give it whatever middleware we're interested in.

37
00:03:31,240 --> 00:03:39,050
In our case the logger. So let's say that. I'm going to NPM start here.

38
00:03:47,660 --> 00:03:55,330
And the way we create the logger because this is a function, we need to run the function.

39
00:03:55,400 --> 00:03:59,900
Let's save, go back, we have no console log errors.

40
00:04:00,360 --> 00:04:11,900
But now if I type something into the box you see that I just typed L and the logger the middleware caught

41
00:04:12,050 --> 00:04:19,670
my action and said On top of this action that is going to go into the reducer I want to also console

42
00:04:19,670 --> 00:04:23,000
log this and that's the action.

43
00:04:23,030 --> 00:04:29,600
So I get previous state searchField was blank and then the action that we took was CHANGE_SEARCH_FIELD

44
00:04:29,960 --> 00:04:31,820
with the payload of "l".

45
00:04:32,180 --> 00:04:35,220
And the next state was searchField with an "l".

46
00:04:35,450 --> 00:04:36,750
How cool is that.

47
00:04:36,770 --> 00:04:47,400
We have instant logging in our application and this logger helps us work with our code better.

48
00:04:47,410 --> 00:04:55,100
Here's the exciting part about this. Because right now it's hard to really say why this is useful other

49
00:04:55,100 --> 00:04:58,620
than just getting some logging.

50
00:04:58,780 --> 00:05:07,420
But the beauty with redux is the fact that it made it so simple for you to reason about your app, and

51
00:05:07,420 --> 00:05:09,290
monitor why your app is going through.

52
00:05:09,570 --> 00:05:15,540
You see now we have a clean system for us to monitor

53
00:05:15,670 --> 00:05:26,020
Each one of our actions so that no matter how many actions we have we can always predict what they're

54
00:05:26,020 --> 00:05:26,890
going to do.

55
00:05:26,920 --> 00:05:34,110
We can listen to what logging output each one of these actions happened, because reducer is a pure function.

56
00:05:34,210 --> 00:05:39,910
We always know it's going to return the same state and again because of the way of react works we also

57
00:05:39,910 --> 00:05:48,660
know that as soon as the state changes it's going to make the predictable changes to our view. And with

58
00:05:48,660 --> 00:05:54,090
the middleware we're able to log these actions.

59
00:05:54,090 --> 00:06:01,330
And theoretically we can even go back in time and play out different actions that our users play.

60
00:06:02,450 --> 00:06:07,840
Because we have a list, a chronological list of all these actions

61
00:06:07,840 --> 00:06:11,840
now. this is why I like teaching redux.

62
00:06:11,980 --> 00:06:15,920
It's not because the library will be around for all eternity.

63
00:06:16,000 --> 00:06:21,970
No it will most likely get replaced by something new by other tools and libraries.

64
00:06:22,900 --> 00:06:31,210
But it's a really important library that changes the way we think about building applications instead

65
00:06:31,210 --> 00:06:37,720
of just having messy actions everywhere and just thinking of code or something that we just keep tacking

66
00:06:37,720 --> 00:06:43,320
on and keep building upon and keep adding different features to, redux

67
00:06:43,330 --> 00:06:52,810
makes you think in a way of hey how can I make an app that is able to scale in a way where we have thousands

68
00:06:52,810 --> 00:06:55,590
of user interactions millions of user interactions.

69
00:06:55,660 --> 00:07:03,190
How can we make it so that the information flows from one to another into a predictable view, into a

70
00:07:03,190 --> 00:07:05,480
system that is predictable.

71
00:07:05,810 --> 00:07:12,970
And as a senior developer you really want to think about this, how are you building systems that work

72
00:07:12,970 --> 00:07:17,300
really really well together and are logical and flow nicely.

73
00:07:17,350 --> 00:07:22,660
And that's why redux got its inspiration from database design because databases are similar right.

74
00:07:22,660 --> 00:07:24,670
They are always constantly acted upon.

75
00:07:24,670 --> 00:07:32,590
There's reads, there was writes, and they need a way to make sure that they manage all these people dipping

76
00:07:32,590 --> 00:07:39,160
their hands in the database and doing things, but also avoiding bugs and errors and all these things

77
00:07:39,160 --> 00:07:41,080
at the same time.

78
00:07:41,170 --> 00:07:47,920
This is a bit of a side note but I think it's important to understand this, and this is a good way to

79
00:07:48,190 --> 00:07:53,890
think about things and flow diagrams how data flows through your app and how you should structure your

80
00:07:53,890 --> 00:07:56,450
app so data flows smoothly.

81
00:07:58,170 --> 00:08:06,270
Finally I want to show you another tool. I like the redux logger because it's simple, but Redux DevTools

82
00:08:06,290 --> 00:08:14,000
is really really good and it uses this idea of middleware to listen in on actions and log out for you a

83
00:08:14,000 --> 00:08:19,400
ton of interesting things you can even play back histories and what you did in the app.

84
00:08:19,400 --> 00:08:23,510
It's a really really good tool that you can play around with for now.

85
00:08:24,410 --> 00:08:27,130
We've learned about middleware.

86
00:08:27,280 --> 00:08:34,840
We've created our store and we have a complete picture. Or do we?

87
00:08:34,840 --> 00:08:39,230
There's another part of our app that we need to turn into redux.

88
00:08:39,260 --> 00:08:42,860
So, with that said, I'll see you in the next one. Bye-bye