1
00:00:01,750 --> 00:00:02,710
Welcome back.

2
00:00:02,710 --> 00:00:09,160
I know we're all getting excited to start coding but I want to do one last video before we actually

3
00:00:09,160 --> 00:00:13,860
start working with some code which is the exciting part.

4
00:00:14,010 --> 00:00:20,820
But again I want to emphasize that before we use anything we need to understand why and why we would

5
00:00:21,000 --> 00:00:28,780
need something like redux. Right now, online, and with any company that is working with react, most of them

6
00:00:28,780 --> 00:00:31,200
have also redux.

7
00:00:31,300 --> 00:00:39,220
So you'll hear react and redux app mentioned a ton when you're watching tutorials or working with react

8
00:00:39,840 --> 00:00:43,150
and that is because they go really really well together.

9
00:00:43,180 --> 00:00:49,510
Let's just go over a few things about redux that we want to make sure we learn and a bit of warning

10
00:00:49,510 --> 00:00:49,990
here.

11
00:00:49,990 --> 00:00:55,730
Some of the stuff might go over your head or maybe a little bit confusing but I want to show you these

12
00:00:55,730 --> 00:01:01,840
slides first because after we go through the redux coding we are going to come back to them and make sure that

13
00:01:02,170 --> 00:01:06,440
these principles are applied and they make sense to you.

14
00:01:06,460 --> 00:01:07,930
So bear with me.

15
00:01:07,960 --> 00:01:10,480
Trust me it's all going to make sense by the end.

16
00:01:12,880 --> 00:01:21,820
Why do we want to use redux? As we mentioned before, redux is really really good at managing state especially

17
00:01:21,850 --> 00:01:23,470
large state.

18
00:01:23,470 --> 00:01:29,500
So redux is a library that we would want to use if our apps get bigger and bigger and bigger and they

19
00:01:29,500 --> 00:01:31,500
have larger and larger state.

20
00:01:31,570 --> 00:01:37,690
Remember we want to use tools based on the problems that they solve and redux solves the problem of what

21
00:01:37,690 --> 00:01:45,760
happens when react apps get really really big and using just "this.state" just doesn't make sense

22
00:01:45,760 --> 00:01:46,520
anymore.

23
00:01:46,540 --> 00:01:48,880
It gets more and more complicated.

24
00:01:48,880 --> 00:01:51,880
Remember react is what we call a view layer.

25
00:01:51,880 --> 00:01:55,780
It's really good at the view side but not necessarily at managing state.

26
00:01:55,900 --> 00:02:00,660
So use redux when things get really really complicated.

27
00:02:00,670 --> 00:02:08,669
The second point is useful for sharing data between containers. And this is another thing with when projects

28
00:02:08,669 --> 00:02:14,920
become large, when they need to start sharing state between containers.

29
00:02:15,970 --> 00:02:22,870
With react this is actually a little bit difficult and you have to move the state up one layer so that

30
00:02:23,080 --> 00:02:26,290
you have a parent that can share a state between the two.

31
00:02:26,710 --> 00:02:33,250
But with redux this becomes really really easy as we're going to demonstrate in our coding section.

32
00:02:33,370 --> 00:02:40,590
And finally redux has predictable state management using the three principals.

33
00:02:40,740 --> 00:02:48,200
Now what are the three principals? These three principals in redux are going to really really make sense

34
00:02:48,200 --> 00:02:52,990
at the end, but I want to still introduce them to you so that we're aware of them.

35
00:02:53,960 --> 00:02:57,370
The first one is the idea of single source of truth.

36
00:02:57,680 --> 00:03:04,490
And this is a fancy way of saying that we have one single big object that describes the entire state

37
00:03:04,550 --> 00:03:06,010
of the app.

38
00:03:06,020 --> 00:03:14,010
Remember this? We had one massive state object that describes everything within our app.

39
00:03:14,170 --> 00:03:21,940
So we have our single source of truth because react reacts based on whatever the state is.

40
00:03:21,940 --> 00:03:29,330
We can just have one big object that describes how the app should look and react will take care of it.

41
00:03:29,330 --> 00:03:37,370
The second principle is the idea that state is read only and this encourages something called immutability

42
00:03:37,610 --> 00:03:45,380
which is not modifying the object and it prevents unexpected errors this way.

43
00:03:45,470 --> 00:03:52,060
So the state object that we will create with redux will actually never get modified.

44
00:03:52,130 --> 00:04:00,870
And instead we would create a new state after each action is taken by the user. And then finally the

45
00:04:00,870 --> 00:04:08,850
third principle is the idea that changes are made only using pure functions, something that we've talked

46
00:04:08,850 --> 00:04:10,460
about in my previous course.

47
00:04:10,500 --> 00:04:19,079
The idea that a pure function is something that receives an input and always returns an output that is

48
00:04:19,110 --> 00:04:20,220
predictable.

49
00:04:20,220 --> 00:04:28,760
If we enter the same input 1000 times we expect that function to have the same output 1000 times. Using

50
00:04:28,760 --> 00:04:30,220
these principles,

51
00:04:30,470 --> 00:04:36,740
Redux has some new words that we're going to introduce in our vocabulary and we're going to be comfortable

52
00:04:36,740 --> 00:04:38,760
with them by the end of this section.

53
00:04:38,960 --> 00:04:40,360
The first one is action.

54
00:04:40,370 --> 00:04:46,890
An action is something that a user does such as clicking on a button or a dropdown menu.

55
00:04:47,100 --> 00:04:54,030
And what happens in redux is as soon as a user clicks on something a button and creates an action.

56
00:04:54,150 --> 00:05:02,010
It goes through something called a reducer and a reducer is simply a function, a pure function that receives

57
00:05:02,010 --> 00:05:10,410
an input which is the action so the user just clicked on a button and creates an output and this output

58
00:05:10,680 --> 00:05:22,600
is the state or the store as we call it in redux which is the entire state of the app.

59
00:05:22,710 --> 00:05:31,290
So as it goes through the function the store gets updated and react because it notices this state change

60
00:05:31,680 --> 00:05:33,640
makes changes to the view layer.

61
00:05:36,590 --> 00:05:40,520
Again these are wars that we're going to encounter as we start coding along.

62
00:05:40,580 --> 00:05:44,070
Now why do this.

63
00:05:44,080 --> 00:05:51,270
I mean can we just have an action and then an action happens and then we just make changes.

64
00:05:52,790 --> 00:05:56,280
I mean that's how something like JQuery used to work.

65
00:05:56,470 --> 00:05:59,200
And yeah it looks more complicated doesn't it.

66
00:05:59,200 --> 00:06:06,460
Adding all these steps beforehand but as you can see above if you have tons of actions happening which

67
00:06:06,520 --> 00:06:11,990
with modern apps that are very interactive, this happens a lot where the users scroll action and then

68
00:06:11,990 --> 00:06:16,090
the clicks a button and then highlight something and so on and so forth.

69
00:06:16,150 --> 00:06:21,640
You see that the more and more actions we have the more changes we have to make and those changes might

70
00:06:21,640 --> 00:06:26,550
trigger other actions which trigger other changes and so on and so forth.

71
00:06:26,560 --> 00:06:30,090
And it can get pretty pretty complicated as you can see in this diagram.

72
00:06:31,820 --> 00:06:39,900
Well with redux we make sure that all the actions go through one reducer.

73
00:06:40,280 --> 00:06:49,570
Everything flows through this function and through this function it always, because it's pure, returns

74
00:06:50,290 --> 00:06:58,180
the same state based on the action and updates the store and this store now which represents what our

75
00:06:58,180 --> 00:07:00,610
app should look like, makes changes.

76
00:07:01,000 --> 00:07:08,390
So kind of funnels all these actions into one reducer so that everything is predictable and nice. Again,

77
00:07:08,410 --> 00:07:13,600
one of those things that's hard to really explain without encountering the problem first, which we will

78
00:07:13,600 --> 00:07:16,360
get to. Now, redux,

79
00:07:16,570 --> 00:07:23,260
and I want to teach this just for historical purposes, uses an architectural pattern called flux pattern.

80
00:07:24,220 --> 00:07:30,790
Architecture and software is used as a way to make sure that we're able to solve problems in a logical

81
00:07:30,790 --> 00:07:33,300
sense and in an organized fashion.

82
00:07:33,490 --> 00:07:40,930
And this flux pattern which inspired the library redux, has this idea of having an action and then having

83
00:07:40,930 --> 00:07:49,520
a dispatcher that dispatches this action to the store which is our state which updates the view.

84
00:07:49,790 --> 00:07:53,590
And it's one way data flow - everything flows one way.

85
00:07:53,660 --> 00:07:59,510
If the view gets updated we go back to the action and again goes to dispatcher that dispatches the change

86
00:07:59,510 --> 00:08:03,250
to the store and then to the view.

87
00:08:03,340 --> 00:08:06,380
And this was a pretty revolutionary idea.

88
00:08:07,800 --> 00:08:14,470
Because before that we had something called MVC or model view controller.

89
00:08:14,710 --> 00:08:21,780
And you may have heard of it. It was quite quite popular. The idea with the MVC pattern is we have an

90
00:08:21,780 --> 00:08:26,780
action and that action is read by a controller.

91
00:08:27,120 --> 00:08:34,710
So again another javascript file that looks for actions, a user clicks on a button and based on whatever

92
00:08:34,710 --> 00:08:38,750
the controller says, we update the model or the data

93
00:08:38,789 --> 00:08:39,820
in this case.

94
00:08:40,020 --> 00:08:47,490
So we can think of it as state. We change something in the model and then it updates the view.

95
00:08:47,500 --> 00:08:54,280
Now the problem with the MVC pattern is, well this diagram over here. Wwe have the controller that changes

96
00:08:54,280 --> 00:08:56,890
different pieces of the model.

97
00:08:57,100 --> 00:09:03,020
And this model can change the view that can trigger another change.

98
00:09:03,070 --> 00:09:07,270
And that model can change another part of the view and so on and so forth.

99
00:09:07,270 --> 00:09:14,470
And we have this thing that we saw before. We have the craziness of actions and making changes. All these

100
00:09:14,470 --> 00:09:17,860
arrows just criss-crossing and not looking very nice.

101
00:09:18,720 --> 00:09:24,480
And although it might not be bad when your apps are smaller as your apps get bigger you want to do something

102
00:09:24,480 --> 00:09:28,190
like this so it's logical and makes sense.

103
00:09:28,260 --> 00:09:29,970
And that's what we want to do with architecture.

104
00:09:29,970 --> 00:09:37,170
We want to architect our apps in ways that as they grow although we may add a few things in the end

105
00:09:37,730 --> 00:09:43,200
everything is easier to reason about and understand.

106
00:09:43,260 --> 00:09:48,500
So we have the flux pattern which enforces a unique directional data flow.

107
00:09:49,500 --> 00:09:57,770
We have the MVC pattern which could definitely be improved. If you get anything out of this video,

108
00:09:57,780 --> 00:10:06,090
the one thing I want you to understand is the idea that redux, at the end of the day, is pretty much the

109
00:10:06,090 --> 00:10:14,970
same as "this.state" in react. With redux we can replace "this.state" and theoretically remove

110
00:10:15,120 --> 00:10:25,050
all of "this.state" from react and have it all happen inside of this redux library, which again we're going

111
00:10:25,050 --> 00:10:25,740
to do.

112
00:10:25,920 --> 00:10:29,280
But one caveat.

113
00:10:29,500 --> 00:10:39,220
You could technically have redux with the state but also still keep a little bit of react state in a

114
00:10:39,220 --> 00:10:39,950
component.

115
00:10:40,060 --> 00:10:47,080
Redux doesn't replace completely the "this.state" or "this.setState" in react.

116
00:10:47,110 --> 00:10:53,710
You can still use them together and I'll show you when you might want to do that when it's a good decision.

117
00:10:54,130 --> 00:11:00,700
But like I said before without having gone into any of the code of redux this might look a little bit

118
00:11:00,760 --> 00:11:02,710
overwhelming and confusing.

119
00:11:02,710 --> 00:11:04,710
I promise you that we're going to come back to

120
00:11:04,720 --> 00:11:07,590
these diagrams and things are going to make sense by the end.

121
00:11:07,690 --> 00:11:14,110
Before I throw code onto the screen I want to make sure that you have some principles and concepts that

122
00:11:14,110 --> 00:11:15,420
we're working from.

123
00:11:15,420 --> 00:11:16,060
All right.

124
00:11:16,270 --> 00:11:21,250
I know where you're thinking. Andre' I am sick and tired of the slides even though they have this cool

125
00:11:21,250 --> 00:11:25,600
grading color I need to see some code because I'm getting bored here.

126
00:11:25,640 --> 00:11:30,440
Well you know what, your prayers have been answered in the next video.

127
00:11:30,490 --> 00:11:35,330
We're finally going to start writing some code and get into some fun things.

128
00:11:36,110 --> 00:11:36,880
I'll see in that one. Bye bye.