1
00:00:00,720 --> 00:00:04,740
In the last section we finally finished writing code to model our insurance company.

2
00:00:04,960 --> 00:00:09,070
So in this video I want to do a wrap up on some of the big things that we learned to YOUR about redux

3
00:00:09,340 --> 00:00:09,870
at this point.

4
00:00:09,880 --> 00:00:13,080
I don't really expect you to memorize a lot of the intricate details here.

5
00:00:13,120 --> 00:00:17,330
I just wanted to have an overall idea of how the redux library worked.

6
00:00:17,440 --> 00:00:18,730
So let's get to it.

7
00:00:19,000 --> 00:00:24,220
All right so first things first we're going to start to really learn this redux cycle this redux cycle

8
00:00:24,220 --> 00:00:28,780
that you see right here has all the same boxes inside of it as the diagram that we're looking at just

9
00:00:28,780 --> 00:00:29,700
a second ago.

10
00:00:29,980 --> 00:00:34,660
So you can now remember from our analogy the purpose of the action creator that's like a person dropping

11
00:00:34,660 --> 00:00:38,470
off for the purpose of our action purpose of dispatch and so on.

12
00:00:38,800 --> 00:00:42,890
So with the redux cycle we essentially start off at the very top up here.

13
00:00:43,040 --> 00:00:48,760
Any time we want to change the state or the data of our application we're going to call an action creator

14
00:00:49,420 --> 00:00:55,150
calling an action creator is going to produce an action object this action object describes exactly

15
00:00:55,150 --> 00:01:01,240
how we want to change data inside of application that action object gets fed to the dispatch function

16
00:01:01,660 --> 00:01:03,480
which in turn is going to make copies.

17
00:01:03,490 --> 00:01:10,130
We can imagine of the action object and feed those copies to each of our different reducers in turn.

18
00:01:10,150 --> 00:01:11,450
The producers are going to run.

19
00:01:11,470 --> 00:01:17,050
They're going to process those actions are the forms that came in modify their data and then eventually

20
00:01:17,050 --> 00:01:24,040
return some new data that data that gets returned gets forint into some new state object.

21
00:01:24,250 --> 00:01:29,360
So then we wait until we need to somehow updates our state again at some point in the future.

22
00:01:30,330 --> 00:01:36,420
So now we have a somewhat reasonable idea of the purpose of each of these steps inside this diagram.

23
00:01:36,510 --> 00:01:40,090
I want to give you some more insight about what's going on inside of redux now.

24
00:01:40,140 --> 00:01:43,090
So you can flip back over to my code over here.

25
00:01:43,110 --> 00:01:47,310
All right so the first thing I want tell you about was the purpose of this combine it reducers call.

26
00:01:47,400 --> 00:01:51,290
Remember the different readers we put together were simple functions.

27
00:01:51,540 --> 00:01:55,090
All these different functions need to be somehow wired up together.

28
00:01:55,230 --> 00:02:01,030
We wire up all the different reducers together by making use of the combine reducers function.

29
00:02:01,060 --> 00:02:06,340
You'll notice that we have different keys on here of accounting claims history and policies because

30
00:02:06,340 --> 00:02:08,910
we used these very specific key names.

31
00:02:08,980 --> 00:02:11,290
We ended up with a state object.

32
00:02:11,290 --> 00:02:13,720
Remember that's what's being called a logged right here.

33
00:02:13,720 --> 00:02:16,630
That's the result of the con. log of stored get state.

34
00:02:16,630 --> 00:02:23,980
We ended up with properties on our state object equal to those key names so we can absolutely feed keys

35
00:02:24,040 --> 00:02:27,530
into this object right here with names different from our reducer.

36
00:02:27,640 --> 00:02:34,530
For example if I wanted to I can change this key of accounting to money we have and now in this example

37
00:02:34,540 --> 00:02:39,970
reruns you'll see that my state object now has a different key for the accounting reducer and now says

38
00:02:40,210 --> 00:02:42,270
money we have is 20.

39
00:02:42,280 --> 00:02:48,160
We do not always have to name these reducers exactly after the Keys but usually by convention we're

40
00:02:48,160 --> 00:02:50,160
going to have them be very similar.

41
00:02:50,220 --> 00:02:55,210
So you know you can change the keys right there if you ever want to end up with different state property

42
00:02:55,270 --> 00:02:59,210
names are going to change that back to accounting like I had before.

43
00:03:00,620 --> 00:03:05,330
Now the next thing I want you to understand is that each dispatch that we're doing here is essentially

44
00:03:05,330 --> 00:03:07,750
running one of these entire cycles.

45
00:03:07,940 --> 00:03:13,070
So recalling an action creator getting an action fit into dispatch that runs or reducers and we get

46
00:03:13,070 --> 00:03:18,920
out some each state so each the lines of code that you see here for each of these dispatches is a second

47
00:03:19,010 --> 00:03:22,820
separate execution of that entire cycle.

48
00:03:22,820 --> 00:03:27,930
We can printout our state object in total in between each of those dispatches.

49
00:03:27,950 --> 00:03:33,350
We don't have to run all the dispatches and then only after that get access to our state object.

50
00:03:33,350 --> 00:03:38,810
Likewise even after we do get state code like you see right here we can still continue to modify our

51
00:03:38,810 --> 00:03:40,710
state object after that.

52
00:03:40,820 --> 00:03:47,030
So if I wanted to I can move that log of store Dockett state to right here after where we created the

53
00:03:47,030 --> 00:03:48,490
policy for Alex.

54
00:03:48,710 --> 00:03:55,250
And now we'll see that our current state at that point in time has just policy for Alex and we only

55
00:03:55,250 --> 00:04:03,760
have $120 in the bank we could then move that again to after we create all three policies.

56
00:04:04,840 --> 00:04:09,400
And now we'll see that we're back to the $190 and we've got policies for Alex Jim and Bob.

57
00:04:09,580 --> 00:04:13,520
And then just as we did before we could remove the consulate down pat down here as well.

58
00:04:13,540 --> 00:04:18,720
And we'll see our final state where we only have $20 and we've only got policies for two people.

59
00:04:19,150 --> 00:04:25,090
So at any point in time along our application we can take this store object and pull our state out of

60
00:04:25,090 --> 00:04:29,740
it and read the current state where the current data for our application.

61
00:04:29,740 --> 00:04:36,100
Now one thing about redux that is very interesting is that we can only modify this state object for

62
00:04:36,100 --> 00:04:41,500
this kind of assembly of all the data through the use of that dispatch function and the action creators

63
00:04:41,560 --> 00:04:43,380
and actions that you've now seen.

64
00:04:43,480 --> 00:04:50,260
There is no way that we can somehow manually reach into this store and modify the state in there manually.

65
00:04:50,260 --> 00:04:55,990
In other words you are not going to ever write some code that looks like stort state DOT accounting

66
00:04:57,190 --> 00:05:00,440
minus 100 or something like that.

67
00:05:00,580 --> 00:05:05,920
We cannot get direct access to our state property and modify it in some meaningful way.

68
00:05:06,490 --> 00:05:12,690
We're only ever going to modify our state by dispatching an action that has been created by an action

69
00:05:12,780 --> 00:05:15,110
creator All right.

70
00:05:15,110 --> 00:05:21,190
So I think those point in time we've got a pretty reasonable idea of some of the basics around redux.

71
00:05:21,230 --> 00:05:26,240
Now you might be thinking at this point you know like I had said much earlier in this section I had

72
00:05:26,240 --> 00:05:28,310
said you know here's our difficulty curve.

73
00:05:28,310 --> 00:05:32,960
So right now we're still kind of up here where we might be thinking Wow this seems way more complicated

74
00:05:32,960 --> 00:05:33,800
than it needs to be.

75
00:05:33,800 --> 00:05:36,650
So let me tell you why everything is set up this way.

76
00:05:37,050 --> 00:05:43,310
You see in a traditional application without redux as an app gets bigger and bigger like more complexity

77
00:05:43,310 --> 00:05:48,860
more lines of code usually ends up that the code that we write ends up being more and more complex and

78
00:05:48,860 --> 00:05:50,170
harder to understand.

79
00:05:50,480 --> 00:05:53,030
And this grows nonlinearly over time.

80
00:05:53,030 --> 00:05:59,540
So as our app gets larger it usually ends up that as we grow in size the app gets dramatically more

81
00:05:59,540 --> 00:06:01,280
and more complicated.

82
00:06:01,490 --> 00:06:05,460
3Dfx we get into a little bit flatter a curve like this right here.

83
00:06:05,570 --> 00:06:10,460
The initial complexity of our application certainly starts higher than if we did not use Regex.

84
00:06:10,460 --> 00:06:14,330
Notice how on this diagram I started the initial complexity way down here.

85
00:06:14,630 --> 00:06:19,910
So it's Reducto you've got some higher initial complexity but because we can only change our data through

86
00:06:19,910 --> 00:06:24,600
the use of action creators our application is kind of self-documenting.

87
00:06:24,890 --> 00:06:29,270
It makes it really clear to other engineers who start work in your project that different ways in which

88
00:06:29,270 --> 00:06:31,770
they can modify the data of your application.

89
00:06:31,790 --> 00:06:37,130
People can only modify data inside of your app by calling these different action creators.

90
00:06:37,370 --> 00:06:42,470
And so if someone walks onto your application and starts working on it on day one they will look at

91
00:06:42,470 --> 00:06:48,320
these action crater's and understand OK I can create a policy I can delete a policy and I can create

92
00:06:48,320 --> 00:06:52,690
a claim that's the only ways I can modify data inside of this application.

93
00:06:52,700 --> 00:06:58,460
And so one of the ideas behind redox is to get a much more stable or steady curve here of complexity

94
00:06:58,460 --> 00:07:00,000
as your app starts to grow.

95
00:07:00,140 --> 00:07:04,790
Even though it initially starts out a lot more complex as your app starts to grow you're going to get

96
00:07:04,790 --> 00:07:09,800
this much more stable much smaller and much more linear growth in complexity.

97
00:07:09,800 --> 00:07:15,260
In theory at least that's how we make use of redux as opposed to just trying to handle things with react

98
00:07:15,290 --> 00:07:16,150
by itself.

99
00:07:16,190 --> 00:07:21,230
We want to only have a very small set number of ways of modifying our data.

100
00:07:22,150 --> 00:07:22,480
All right.

101
00:07:22,480 --> 00:07:23,990
So let's take a pause right here.

102
00:07:24,010 --> 00:07:27,670
When we come back the next section we're going to start working on a re-act application and then we'll

103
00:07:27,670 --> 00:07:29,890
learn how to integrate redux into it.

104
00:07:29,890 --> 00:07:31,990
So quick break and I'll see you in just a minute.