1
00:00:01,050 --> 00:00:05,800
In the last section we finished up all of our different reducers So we now have three action creators

2
00:00:06,670 --> 00:00:11,380
and three reducers something that's really important to note at this point in time is that we have not

3
00:00:11,380 --> 00:00:14,620
made a single reference to the redux library whatsoever.

4
00:00:14,710 --> 00:00:19,390
So the vast amount of code that we're going to write with redox is going to be just normal code normal

5
00:00:19,390 --> 00:00:26,530
functions normal arrays and objects that you and I write only at very small very specific points in

6
00:00:26,530 --> 00:00:31,780
time are we going to even think about referencing the redux library directly now that we've put all

7
00:00:31,840 --> 00:00:33,950
of our action creators and reducers together.

8
00:00:34,060 --> 00:00:40,630
We're going to wire them all together into a single object called a store a store in redux is essentially

9
00:00:40,660 --> 00:00:45,340
the assembly of a collection of different reducers and action creators.

10
00:00:45,340 --> 00:00:52,810
So at the bottom of this file I'm going to take the redux library remember that we already added redux

11
00:00:52,870 --> 00:00:54,940
into this code penned project a little bit ago.

12
00:00:55,000 --> 00:00:59,610
So if you do a console log of redux you'll see that we've got the redux library right here.

13
00:00:59,770 --> 00:01:10,860
We're going to pull off two specific functions from the library called create store and combine reducers

14
00:01:11,520 --> 00:01:15,060
and that's going to come from redux.

15
00:01:15,060 --> 00:01:20,010
So now to wire together all of our reducers we're going to use this combined reducers function.

16
00:01:20,010 --> 00:01:22,600
I'll tell you exactly what that thing is doing in just a minute.

17
00:01:23,670 --> 00:01:30,750
So I'm going to say Konst or deps So this is essentially the combination of all of our different departments

18
00:01:30,750 --> 00:01:35,310
or all of our different reducers put together and that's going to be the result of calling combined

19
00:01:35,310 --> 00:01:41,970
reducers and passing in an object with a couple of different key value properties to this object we're

20
00:01:41,970 --> 00:01:44,400
going to pass in each of our different reducers.

21
00:01:44,610 --> 00:01:55,460
So I'm going to say accounting is accounting claims history is claims whoops is claims history and our

22
00:01:55,520 --> 00:01:58,030
policies is our policies.

23
00:02:01,440 --> 00:02:05,850
Now each of these variables right here are the names of our different reducers that we just put together.

24
00:02:05,850 --> 00:02:13,120
So there's policies accounting and claims history now that we've combined all of our producers together.

25
00:02:13,170 --> 00:02:16,750
We're going to use the other function from redux called create store.

26
00:02:16,910 --> 00:02:24,660
So underneath that I'll say Khan's story is create store and I'll pass in our department's.

27
00:02:24,790 --> 00:02:27,520
And now we have this magical store object.

28
00:02:27,610 --> 00:02:31,320
The store object represents our entire redux application.

29
00:02:31,420 --> 00:02:36,930
It contains references to all of our different reducers and to all of our state produced by those reducers

30
00:02:36,930 --> 00:02:40,000
are all the data produced by those producers as well.

31
00:02:40,000 --> 00:02:43,630
The store object has a couple of different functions on it that are going to be very useful for what

32
00:02:43,630 --> 00:02:44,950
we're trying to do.

33
00:02:44,980 --> 00:02:51,820
One of the functions on here is the dispatch function this dispatch function right here is just like

34
00:02:52,480 --> 00:02:56,040
that original form receiver that we had spoken about.

35
00:02:56,080 --> 00:03:02,110
So we want to pass the dispatch function an action when we sent send it in action which is just like

36
00:03:02,110 --> 00:03:02,920
our form.

37
00:03:02,980 --> 00:03:07,580
The Dispatch is going to make a copy of it and then send it off to each of the different producers inside

38
00:03:07,600 --> 00:03:08,570
our application.

39
00:03:08,710 --> 00:03:13,810
Just as in the analogy we had said that the form must pass to a former receiver in the form receiver

40
00:03:13,990 --> 00:03:18,700
put it on a copier and then passed copies of that form to each of the different departments.

41
00:03:18,700 --> 00:03:24,870
So in order to call dispatch we first have to pass in an action that is created by an action creator.

42
00:03:24,880 --> 00:03:30,010
So let's first create an action by calling an action creator and then we can pass the action off to

43
00:03:30,070 --> 00:03:31,510
dispatch.

44
00:03:31,510 --> 00:03:39,180
All right so before stored dispatch I'm going to say Konst action is let's try to create a policy I'll

45
00:03:39,180 --> 00:03:41,110
say create policy.

46
00:03:41,370 --> 00:03:46,800
And remember any time that we called it create policy action creator right here we have to pass in a

47
00:03:46,800 --> 00:03:51,430
name and an amount to pay to the company to get a policy.

48
00:03:51,450 --> 00:03:57,790
So as the first argument I'll pass in a name of Alex and an amount of money of 20.

49
00:03:58,270 --> 00:04:03,140
So if I wanted to I could do a console log of action and I should see the action object.

50
00:04:03,150 --> 00:04:06,670
There it is right there I've got my type and my payload.

51
00:04:06,810 --> 00:04:11,070
So I'm going to take that action and pass it to store dispatch.

52
00:04:11,280 --> 00:04:13,410
And now it looks like nothing at all happened.

53
00:04:13,500 --> 00:04:18,830
But you can actually use another method on the store object to get a better idea of how we just changed

54
00:04:18,960 --> 00:04:22,110
all the data inside of our application.

55
00:04:22,110 --> 00:04:27,150
Remember when we take storm dispatch and pass that the action that action will be forwarded off to each

56
00:04:27,150 --> 00:04:27,900
producer.

57
00:04:27,900 --> 00:04:32,690
And so as soon as we called sort of dispatch each of our different reduce or functions or departments

58
00:04:32,690 --> 00:04:36,710
He essentially ran and process that action or that form.

59
00:04:36,720 --> 00:04:44,490
So now if I do a store get States get state is a function that's going to essentially get our entire

60
00:04:44,550 --> 00:04:50,010
assembled repository of data for our company just as we said we before we're going to have this kind

61
00:04:50,010 --> 00:04:51,490
of a central repository.

62
00:04:51,690 --> 00:04:57,000
So the Kogut state we get access to that big gigantic glob of information

63
00:04:59,710 --> 00:05:04,650
now I need to make sure they actually do a console log because that is just a plain object.

64
00:05:04,660 --> 00:05:06,340
That's better.

65
00:05:06,340 --> 00:05:10,630
All right so after it runs we're going to see the state of our application printout.

66
00:05:10,780 --> 00:05:13,360
So you'll see that we've got here of accounting.

67
00:05:13,390 --> 00:05:15,540
So that's how much money we have in our company.

68
00:05:15,640 --> 00:05:19,720
And then we've got policies which is the array that has the name of everyone who has signed up for a

69
00:05:19,720 --> 00:05:21,970
policy with our company.

70
00:05:22,140 --> 00:05:23,190
That's pretty much it.

71
00:05:23,370 --> 00:05:29,440
So now we can call all of her different action creators past the action that gets returned to store

72
00:05:29,640 --> 00:05:35,690
dispatch and that's going to incrementally modify exactly how the state of our company looks.

73
00:05:35,700 --> 00:05:38,430
That is all contained inside of the store.

74
00:05:38,460 --> 00:05:40,860
Let's try doing a couple of quick examples here.

75
00:05:40,890 --> 00:05:46,170
I'm going to refactor this store of dispatch and instead just pass the result of Culin create policy

76
00:05:46,170 --> 00:05:47,460
directly to it.

77
00:05:47,460 --> 00:05:53,040
So I got to put create policy in here and I'll enter in Alex and 20 and now I do not need to create

78
00:05:53,040 --> 00:05:54,460
the action ahead of time.

79
00:05:56,800 --> 00:05:57,070
OK.

80
00:05:57,090 --> 00:05:59,740
So that's going to create a new policy for Alex.

81
00:05:59,770 --> 00:06:07,050
I'll now try to create a new policy for Jim and let's say Jim has to pay $30 and maybe how about I don't

82
00:06:07,050 --> 00:06:07,820
know.

83
00:06:08,340 --> 00:06:11,750
Well say Bob has to pay $40.

84
00:06:11,850 --> 00:06:17,310
So we've now created three policies and we've paid in a total of 20 30 and 40 to our company.

85
00:06:18,060 --> 00:06:24,070
So 20 plus 30 plus 40 plus the default of 100 that our company initially had is 190.

86
00:06:24,330 --> 00:06:29,900
So we see the results over here we have a counting of 190 and then we have policies created for Alex

87
00:06:29,910 --> 00:06:32,990
Jim and Bob.

88
00:06:33,020 --> 00:06:38,480
Now if we wanted to we could have one of our different people tried to create a claim so I could say

89
00:06:38,510 --> 00:06:50,670
Stuart dispatch create claim and we'll say that Alex wants to create a claim for about $120.

90
00:06:50,770 --> 00:06:56,820
So now when we do our get States we'll see that we've now deducted $120 smart company.

91
00:06:56,860 --> 00:06:59,740
So we're now down to $70.

92
00:06:59,740 --> 00:07:05,550
Alex still has a policy as he did before and now we can see that we also have a claim history object

93
00:07:05,560 --> 00:07:10,810
here to reflect the fact that Alex just tried to withdraw a hundred dollars.

94
00:07:10,840 --> 00:07:16,950
The number is right there are $120 excuse me and the name of the person who withdrew that was Alex.

95
00:07:17,030 --> 00:07:23,230
So we can say that maybe Jim gets in a accidence well so it could do a story about dispatch create claim

96
00:07:23,590 --> 00:07:27,010
for Jim and maybe Jim Saxton it wasn't so bad.

97
00:07:27,010 --> 00:07:31,490
So he only needs about $50.

98
00:07:31,660 --> 00:07:32,750
And so now we'll know.

99
00:07:32,740 --> 00:07:37,980
So we have $50 less than we had before and we now have two different claims inside there.

100
00:07:38,110 --> 00:07:45,430
And then finally let's test out the last action we'll do our last action creator which was policy

101
00:07:48,530 --> 00:07:54,490
so I'll do a delete policy and pass in Bob because Bob realized he never made a claim and he doesn't

102
00:07:54,490 --> 00:07:56,320
really need any insurance at all.

103
00:07:56,370 --> 00:08:02,250
And so now when we see the results of our console log we see that only Alex and Jim now have a policy

104
00:08:02,490 --> 00:08:06,420
and we still have all the same claim history and accounting stuff that we had before.

105
00:08:06,770 --> 00:08:07,060
OK.

106
00:08:07,080 --> 00:08:07,680
So that's it.

107
00:08:07,680 --> 00:08:10,130
That is redux in action.

108
00:08:10,140 --> 00:08:11,280
Now let's take a pause right here.

109
00:08:11,310 --> 00:08:15,030
When we come back the next video I'm going to point out some very distinct things that I want you to

110
00:08:15,030 --> 00:08:19,710
notice about the code that we just wrote right here and this is going to help you understand why we

111
00:08:19,710 --> 00:08:24,300
use redux inside reactor application and why it's so widely used in industry.

112
00:08:24,390 --> 00:08:26,430
So quick pause and I'll see you in just a minute.