1
00:00:00,670 --> 00:00:05,340
In the last section we finished modeling our person dropping off the form and the form itself by creating

2
00:00:05,340 --> 00:00:08,120
a collection of different action creators and actions.

3
00:00:08,340 --> 00:00:11,050
We're going to skip over this dispatch step right here.

4
00:00:11,070 --> 00:00:17,280
Remember the dispatch is like our form receiver who is going to receive a form or an action as a refer

5
00:00:17,280 --> 00:00:22,230
to it make a copy of that form and then send it out to all the different departments.

6
00:00:22,230 --> 00:00:26,180
This dispatch thing right here is actually a part of the redux library itself.

7
00:00:26,340 --> 00:00:28,710
So we don't have to write that from scratch.

8
00:00:28,710 --> 00:00:33,230
So we're going to skip over dispatch and move over to implementing some reducers.

9
00:00:33,330 --> 00:00:38,760
The idea behind these reducers things are that we're going to go a couple of different functions and

10
00:00:38,790 --> 00:00:43,130
each function is going to model a different department inside of our company.

11
00:00:43,320 --> 00:00:49,480
So we're going to have a reducer that is in charge of modeling the behavior of our claims history department.

12
00:00:49,710 --> 00:00:55,120
A second rate douceur for our accounting department and a third reduce for our policies Department as

13
00:00:55,120 --> 00:00:57,160
well.

14
00:00:57,250 --> 00:01:03,280
Each one of these reducers is going to be called within action or a form that had been originally created

15
00:01:03,280 --> 00:01:05,320
by an action creator.

16
00:01:05,320 --> 00:01:10,600
The reducer is then going to inspect that form or that action and decide whether or not and needs to

17
00:01:10,690 --> 00:01:13,920
modify some data based upon that action.

18
00:01:13,930 --> 00:01:19,090
Now one quick thing Eleanor remind you about remember we had said that in order to make sure that this

19
00:01:19,150 --> 00:01:24,700
management out here was able to easily read all the data produced by our departments we were going to

20
00:01:24,790 --> 00:01:28,590
move all of our data to this outside repository of sorts.

21
00:01:28,760 --> 00:01:34,420
And only when we had a form to pass in a department would we take that department's little slice of

22
00:01:34,420 --> 00:01:39,230
data inside that repository and pass it into that department.

23
00:01:39,250 --> 00:01:43,420
So that's going to start to become relevant when we put this reducers thing together.

24
00:01:43,420 --> 00:01:43,660
All right.

25
00:01:43,660 --> 00:01:45,050
So let's get to it.

26
00:01:45,070 --> 00:01:50,500
I'm going to flip back over and then underneath our reaction creators are going to put down a new section

27
00:01:50,500 --> 00:01:58,420
for our reducers And remember these are like our departments.

28
00:01:58,570 --> 00:02:06,310
So we're going to first work on our claims history reducer every reduced or that we put together is

29
00:02:06,310 --> 00:02:07,960
always going to be a function.

30
00:02:08,170 --> 00:02:12,170
It always gets to arguments that are always passed in the exact same order.

31
00:02:12,220 --> 00:02:18,940
The first argument is going to be whatever existing little piece of data from our central repository

32
00:02:19,030 --> 00:02:21,600
that belongs to this particular department.

33
00:02:21,940 --> 00:02:29,230
So I don't see that as an argument that I would call old list of claims I'm calling an old list of claims

34
00:02:29,260 --> 00:02:33,270
because this is going to get this old set of claims right here.

35
00:02:33,430 --> 00:02:38,620
And the expectation is that the reducers going to somehow update that list of claims depending upon

36
00:02:38,620 --> 00:02:42,860
the contents of an action that is passed in as the second argument.

37
00:02:42,910 --> 00:02:45,700
And remember that action right there is like our form.

38
00:02:46,030 --> 00:02:52,960
So this is the same scenario that you just saw a little bit ago inside this diagram that claims history

39
00:02:53,230 --> 00:02:58,250
which is a function is going to be passed the old list of claims and the form.

40
00:02:58,600 --> 00:03:04,300
So now the redo cert needs to look at that form and decide whether or not it cares about that type of

41
00:03:04,390 --> 00:03:05,370
this form.

42
00:03:05,850 --> 00:03:11,950
If it is of type create claim that we want to make sure that the code inside of this function is going

43
00:03:11,950 --> 00:03:17,530
to attempt to pull off that pillar property and add it to our list of claims and then return that if

44
00:03:17,530 --> 00:03:21,820
it's not of a type that we care about that we don't care about this form at all and we're just going

45
00:03:21,820 --> 00:03:26,290
to return our existing list of claims completely unchanged.

46
00:03:27,460 --> 00:03:29,130
All right now.

47
00:03:29,200 --> 00:03:30,330
Wrong Teb.

48
00:03:30,370 --> 00:03:31,840
There we go.

49
00:03:31,840 --> 00:03:35,150
So inside of here we're going to look at the actions type.

50
00:03:35,190 --> 00:03:45,220
So I going to say action not type if that is equal to create claim then that means we care about this

51
00:03:45,310 --> 00:03:49,220
action or form.

52
00:03:49,360 --> 00:03:56,290
But if we don't get into that statement then we don't care about the form or let's call it what it really

53
00:03:56,290 --> 00:03:59,810
is an action like so.

54
00:04:00,310 --> 00:04:05,200
So now if we are inside the if statement we're going to update our list of claims with the payload of

55
00:04:05,200 --> 00:04:08,220
this action right here or otherwise we will just return.

56
00:04:08,620 --> 00:04:12,020
So inside the statement I'm going to say return again.

57
00:04:12,040 --> 00:04:15,730
This next little bit of code right here is going to look a little bit strange but just bear with me

58
00:04:15,730 --> 00:04:16,500
for a second.

59
00:04:16,570 --> 00:04:18,490
I'm going to say Dot dot dot.

60
00:04:18,610 --> 00:04:23,690
Old list of claims and then a comma and then action.

61
00:04:23,710 --> 00:04:25,810
Payload like so.

62
00:04:25,840 --> 00:04:26,050
All right.

63
00:04:26,050 --> 00:04:27,190
So what's going on here.

64
00:04:27,220 --> 00:04:30,370
This is just a little bit of yes 20:15 syntax.

65
00:04:30,610 --> 00:04:35,570
What this does is it takes a array or the list of claims that's going to be a list right there in array

66
00:04:36,210 --> 00:04:42,670
b dot dot dot means that we're going to take all the records inside there and add them to a brand new

67
00:04:42,730 --> 00:04:43,510
array.

68
00:04:44,430 --> 00:04:50,760
And then after that we're going to add in this new record right here of action not payload to help you

69
00:04:50,760 --> 00:04:51,870
understand that syntax.

70
00:04:51,960 --> 00:04:57,930
We can put together a quick example over and our consul over here I could say something like Konst numbers

71
00:04:58,260 --> 00:05:00,300
equals 1 to 3.

72
00:05:00,810 --> 00:05:07,830
And then I can create a new array by putting in a square bracket dot dot dot numbers and some new number

73
00:05:07,830 --> 00:05:13,530
to insert that's going to create a brand new array with the values from numbers.

74
00:05:13,550 --> 00:05:16,970
So when I run that I see one two three four dot dot dot dot.

75
00:05:16,980 --> 00:05:21,360
In particular it essentially means that we're not going to nest a array inside this one.

76
00:05:21,360 --> 00:05:26,370
We're just going to take all the values out of numbers and add it to the new array that we are creating.

77
00:05:26,370 --> 00:05:31,580
So this is abbreviated syntax to essentially join the contents of two arrays together.

78
00:05:31,590 --> 00:05:39,620
Now we could have written this line of code right here by putting together old list of claims Fourche

79
00:05:40,040 --> 00:05:41,260
action not payload.

80
00:05:41,600 --> 00:05:42,670
We could have done that.

81
00:05:42,800 --> 00:05:47,240
But there's a very distinct difference between this line right here that we just wrote or that I just

82
00:05:47,240 --> 00:05:47,950
thought right there.

83
00:05:48,020 --> 00:05:49,010
And the one after it.

84
00:05:49,040 --> 00:05:51,050
The return with the return statement.

85
00:05:51,050 --> 00:05:57,020
The difference is that in the this case right here we are creating a brand new array and adding records

86
00:05:57,020 --> 00:06:02,500
to it with the push function we are modifying an existing array.

87
00:06:02,510 --> 00:06:08,480
This is something going to talk to you about in great great detail nonstop as we start working on reducers.

88
00:06:08,480 --> 00:06:14,810
Any time that we want to change a record or change something inside a producer we always always always

89
00:06:14,870 --> 00:06:21,710
100 percent of the time want to return a new array or a new object as opposed to modifying an existing

90
00:06:21,710 --> 00:06:22,620
one.

91
00:06:22,640 --> 00:06:28,970
So we always avoid as much as possible modifying existing data structures inside of a producer.

92
00:06:29,060 --> 00:06:32,970
And I'll tell you why and just a little bit as we start to get towards the end of this example.

93
00:06:33,230 --> 00:06:35,300
So I'm going to remove the push statement.

94
00:06:35,540 --> 00:06:40,820
In general you're just about never going to see push inside of a reducer.

95
00:06:42,180 --> 00:06:42,580
All right.

96
00:06:42,720 --> 00:06:45,990
So this right here handles the case in which we care about this action.

97
00:06:46,050 --> 00:06:52,170
We take our whole list of claims and we add on are the payload off the form or the action that we just

98
00:06:52,170 --> 00:06:53,180
got.

99
00:06:53,700 --> 00:06:57,270
And now down here we're going to handle the case in which we don't care about the action.

100
00:06:57,350 --> 00:07:01,170
So I'll say return old list of claims like the

101
00:07:04,590 --> 00:07:06,030
all right so looks good.

102
00:07:06,030 --> 00:07:11,200
Now there's one little additional thing that we have to add to this reducer the reducer is a function.

103
00:07:11,200 --> 00:07:17,700
So remember it doesn't really have any idea of what its data is until it gets cold for the first time.

104
00:07:18,180 --> 00:07:22,680
We need to make sure that for this all list of claims we need to make sure that we handle the case in

105
00:07:22,680 --> 00:07:27,960
which our seducer is being called for the very first time in which a we might not have some original

106
00:07:27,960 --> 00:07:28,820
list of claims.

107
00:07:28,890 --> 00:07:33,480
So what you mean by that is that the very first time that our reduced or gets called there will be no

108
00:07:33,480 --> 00:07:37,510
data no previous list of claims to be passed in here.

109
00:07:37,680 --> 00:07:44,070
Instead the first time this producer gets called we essentially received the value undefined as that

110
00:07:44,070 --> 00:07:45,430
first argument.

111
00:07:45,900 --> 00:07:50,850
So in case this reducers being called for the very first time we need to default the value of that first

112
00:07:50,880 --> 00:07:53,330
argument to do so.

113
00:07:53,700 --> 00:07:57,450
I'm going to out on a equals array like so.

114
00:07:57,930 --> 00:08:03,930
So now if someone ever calls claims history with a value of undefined for old list of claims then that

115
00:08:03,990 --> 00:08:07,960
undefined value will be placed replaced with an empty array.

116
00:08:10,360 --> 00:08:13,150
Ok so thats say completed reducer right there.

117
00:08:13,160 --> 00:08:14,870
Now lets keep writing our other two.

118
00:08:14,900 --> 00:08:17,700
We're going to get through the other two reducers much more quickly.

119
00:08:17,750 --> 00:08:23,840
So I'm now going to get myself a little bit of space and then I'll put down a How about accounting will

120
00:08:23,870 --> 00:08:29,520
take care of the accounting department next oh I just realized I got a little typo right there.

121
00:08:29,520 --> 00:08:31,950
It should be all list of claims with a lower case L.

122
00:08:31,980 --> 00:08:32,890
That's better.

123
00:08:33,300 --> 00:08:38,490
Ok so now for the accounting reducer are again going to make a function that's going to be called with

124
00:08:38,490 --> 00:08:41,180
all our current bag of money.

125
00:08:41,190 --> 00:08:43,540
Because remember that's the purpose of the accounting department.

126
00:08:45,090 --> 00:08:49,530
So we get our bag of money right here that's going to basically be a simple number as opposed to the

127
00:08:49,530 --> 00:08:51,630
array that we had for our claims history.

128
00:08:51,840 --> 00:08:55,880
And then the accounting department is going to have a little bit more complex logic inside of it.

129
00:08:57,370 --> 00:08:59,770
So the first argument will be our bag of money.

130
00:08:59,800 --> 00:09:01,910
The second argument will be our action.

131
00:09:02,190 --> 00:09:07,000
Now the first thing we want to do is see if the action that's come in has something to do with a claim

132
00:09:07,660 --> 00:09:14,800
if it does then we want to somehow pull off the money from the profit the payload of that and make sure

133
00:09:14,800 --> 00:09:19,340
that we subtract some amount of money from our bag of money.

134
00:09:20,970 --> 00:09:29,680
So inside of hearing what to say if action that type equals creates claim if that's the case then I'm

135
00:09:29,680 --> 00:09:34,500
going to return a bag of money minus.

136
00:09:34,600 --> 00:09:36,380
And remember this action right here.

137
00:09:36,550 --> 00:09:41,530
The actual amount of money that we want to deduct the amount of money that our customer wants to collect

138
00:09:41,920 --> 00:09:44,610
can be accessed from this object right here.

139
00:09:44,610 --> 00:09:46,110
So it will be action.

140
00:09:46,120 --> 00:09:49,150
Payload dot amount of money to collect.

141
00:09:49,150 --> 00:09:53,890
And I just realized I got a little typo there as well as should be amount of money to collect not collection.

142
00:09:53,890 --> 00:09:54,500
That's better.

143
00:09:55,860 --> 00:09:56,150
OK.

144
00:09:56,170 --> 00:09:57,140
Now I'll go back down.

145
00:09:57,240 --> 00:10:06,860
So it's going to be action that payload that amount of money to collect cool.

146
00:10:07,320 --> 00:10:07,750
All right.

147
00:10:07,800 --> 00:10:12,170
Now let's take care of the other case the case in which this is not trying to create a claim.

148
00:10:12,240 --> 00:10:16,740
So the next year we're going to do is check to see if the action is trying to create a policy if they

149
00:10:16,740 --> 00:10:21,470
are trying to create a policy then we're going to take whatever money was included in that action's

150
00:10:21,480 --> 00:10:26,460
payload and add it into our bag of original bag of money and return it.

151
00:10:27,060 --> 00:10:41,590
So if else or somebody else if else if action type is equal to create policy then we're going to return

152
00:10:41,590 --> 00:10:48,160
a bag of money plus action payload amount.

153
00:10:48,360 --> 00:10:52,740
And then finally the only other case is that someone is not trying to create a new claim or create a

154
00:10:52,740 --> 00:10:54,090
new policy.

155
00:10:54,090 --> 00:10:56,220
And so in that case we don't care about this form at all.

156
00:10:56,220 --> 00:10:59,170
So it's going to return the current value of our bag of money.

157
00:10:59,580 --> 00:11:07,380
And so I'm going to return a bag of money just as before the first time this producer gets called.

158
00:11:07,380 --> 00:11:09,080
We don't have any value for bag of money.

159
00:11:09,090 --> 00:11:13,980
It's going to be of value undefined and so we're going to default the value of this thing to some reasonable

160
00:11:14,130 --> 00:11:15,340
default value.

161
00:11:15,600 --> 00:11:22,410
We'll start off saying that our company initially has a $100 like so and so if someone tries to create

162
00:11:22,410 --> 00:11:27,600
a claim and take money from our company we'll subtract 100 minus how much money they're trying to collect

163
00:11:28,230 --> 00:11:30,580
if they're trying to create a policy and pay us money.

164
00:11:30,660 --> 00:11:33,480
We'll take our bag of money and add in that amount and return it.

165
00:11:33,480 --> 00:11:36,030
Otherwise we'll just return our bag of money.

166
00:11:36,030 --> 00:11:37,340
All right let's take another pause right here.

167
00:11:37,350 --> 00:11:42,930
When we come back the next section we're going to work on our last reduced our policies department so

168
00:11:42,930 --> 00:11:44,930
quick pause and I'll see you in just a minute.