1
00:00:00,700 --> 00:00:05,050
You've now finished up our reducer and this video I want to mention one quick thing that you need to

2
00:00:05,050 --> 00:00:07,420
be aware of as we went through our reducer.

3
00:00:07,420 --> 00:00:13,510
Remember we referred to this action object right here essentially as how to change state.

4
00:00:13,510 --> 00:00:18,340
It's an object that you and I are going to essentially define when we pass an argument into our dispatch

5
00:00:18,340 --> 00:00:19,720
function down here.

6
00:00:19,720 --> 00:00:24,090
So you and I have total control over what that action object looks like.

7
00:00:24,250 --> 00:00:26,680
We can put any properties into it that we want.

8
00:00:26,830 --> 00:00:30,510
However usually there are some community conventions that we follow.

9
00:00:30,570 --> 00:00:34,700
And let me be clear you do not have to follow these community conventions.

10
00:00:34,720 --> 00:00:36,610
You don't have to follow them at all.

11
00:00:36,610 --> 00:00:41,080
Totally optional but if you want some other engineer to look at your code and instantly understand what's

12
00:00:41,080 --> 00:00:43,960
going on you might decide to follow these conventions.

13
00:00:43,960 --> 00:00:46,300
So let me show you what they are.

14
00:00:46,340 --> 00:00:52,270
So our action object had properties of color to change of like red and then an amount.

15
00:00:52,280 --> 00:00:56,930
But usually by convention our action objects are going to have two different properties.

16
00:00:56,930 --> 00:00:58,620
The first one will be type.

17
00:00:58,790 --> 00:01:04,220
That's gonna be a history a string that describes the exact change operation and we want to run inside

18
00:01:04,220 --> 00:01:05,780
of our reducer.

19
00:01:05,780 --> 00:01:08,330
And then secondly we'll have a payload property.

20
00:01:08,330 --> 00:01:14,930
There'll be some data that's absolutely critical to initiating or actually executing that change operation.

21
00:01:14,930 --> 00:01:20,210
So if we wanted to follow community convention for our action object we would use a type of something

22
00:01:20,210 --> 00:01:24,460
like change red because we're describing the type of operation we want to run.

23
00:01:24,470 --> 00:01:30,680
We want to make a change to the property red and then payload in our case would be 15.

24
00:01:30,680 --> 00:01:35,910
That's how much we want to change red by now if we start to use community convention right here.

25
00:01:35,990 --> 00:01:39,320
Are reducer technically is gonna get a little bit more complicated.

26
00:01:39,440 --> 00:01:44,690
So I want to refactor our action object to follow community convention when we do you're going to notice

27
00:01:44,690 --> 00:01:49,850
that yes the reducer gets a little bit more complicated and so I will leave it up to you to decide whether

28
00:01:49,850 --> 00:01:52,820
or not you want to make use of action objects.

29
00:01:52,910 --> 00:01:55,440
That just makes sense to you and are convenient to you.

30
00:01:55,610 --> 00:02:02,030
Or if you want to follow community convention again it's 100 percent in your court you can decide what

31
00:02:02,030 --> 00:02:04,070
you want to do.

32
00:02:04,160 --> 00:02:05,750
OK so let's give this a shot.

33
00:02:05,900 --> 00:02:08,510
I'm going to flip back over to a square screen.

34
00:02:08,510 --> 00:02:12,170
I'm going to change my action comment right here.

35
00:02:12,220 --> 00:02:16,850
I'm gonna say that action rather than saying simply color to change color to change instead is going

36
00:02:16,850 --> 00:02:18,080
to be a type property.

37
00:02:18,590 --> 00:02:23,080
So the type is going to describe the exact change that we want to make to our state.

38
00:02:23,120 --> 00:02:25,370
Now there's not necessarily any meaning to this string.

39
00:02:25,370 --> 00:02:31,310
It's only meaningful to you and I as developers so I'm going to decide to use a type of change underscore

40
00:02:31,310 --> 00:02:39,200
read change underscore green and change underscore blue like so and then rather than having an amount

41
00:02:39,770 --> 00:02:44,790
we want that to be payload instead at this point I just change the comment that doesn't actually change

42
00:02:44,790 --> 00:02:45,290
anything.

43
00:02:45,300 --> 00:02:49,890
We don't have to actually go round our reducer and our component and actually initiate these changes

44
00:02:49,890 --> 00:02:51,030
or make me effective.

45
00:02:51,600 --> 00:02:56,270
So let's first start inside of our component I'll go down to square screen.

46
00:02:56,550 --> 00:03:00,540
We're going to have to go around to all of our different dispatch functions that we call inside of here

47
00:03:00,900 --> 00:03:06,490
and change these two type and payload it's going to first take care of amounts because that one's a

48
00:03:06,480 --> 00:03:11,860
bit easier it's going to change amount six times because we call dispatch six times inside of our ASX

49
00:03:11,910 --> 00:03:12,900
block here.

50
00:03:13,020 --> 00:03:27,530
So there's one two three four five and six.

51
00:03:27,590 --> 00:03:32,390
Next up we're going to go around to all of our different colored to change statements in our properties

52
00:03:32,420 --> 00:03:34,580
inside of our JSA X block once again.

53
00:03:34,580 --> 00:03:35,720
There are six of them.

54
00:03:35,900 --> 00:03:39,290
We're going to change color to change to be simply type instead.

55
00:03:39,890 --> 00:03:41,930
So there's one two

56
00:03:45,860 --> 00:03:52,350
three four five and six.

57
00:03:52,400 --> 00:03:52,860
There we go.

58
00:03:53,240 --> 00:03:56,180
And then finally we need to change the actual type property values.

59
00:03:56,300 --> 00:03:58,000
We don't have red blue or green anymore.

60
00:03:58,010 --> 00:04:03,470
If we're following communing convention who would instead be change red or change blue.

61
00:04:03,470 --> 00:04:11,000
So I will change that type of red to change underscore red change underscore red change underscore blue

62
00:04:11,870 --> 00:04:18,150
change underscore blue and then down here on the last one change underscore green and change underscore

63
00:04:18,170 --> 00:04:21,280
green.

64
00:04:21,490 --> 00:04:21,720
OK.

65
00:04:21,750 --> 00:04:26,670
So there's all of our different dispatch statements changed it's now to go and update our reducer as

66
00:04:26,670 --> 00:04:27,780
well.

67
00:04:27,810 --> 00:04:30,350
Here's my reducer.

68
00:04:30,430 --> 00:04:32,140
I'm gonna find my switch statement.

69
00:04:32,140 --> 00:04:36,550
The first thing we have to do is say rather than doing a switch on color to change we're going to decide

70
00:04:36,610 --> 00:04:41,350
what state update we want to run based upon the type property.

71
00:04:41,360 --> 00:04:45,910
So rather than switching over action not color change we're going to instead switch over action type

72
00:04:46,830 --> 00:04:50,520
and we can update the text inside of our three case statements.

73
00:04:50,580 --> 00:04:52,090
So all do change.

74
00:04:52,090 --> 00:05:00,030
Red change green and change blue and here's where life gets really painful.

75
00:05:00,050 --> 00:05:03,720
We no longer have that like nice variable to refer to inside of here.

76
00:05:03,740 --> 00:05:08,810
So while we've got state DOT red that's going to work but we have to go all around and we have to update

77
00:05:08,930 --> 00:05:11,510
action dot amount all over the place.

78
00:05:11,510 --> 00:05:16,940
So now we've got to update that in like nine places inside of here between the entire switch statement.

79
00:05:16,970 --> 00:05:21,800
I've got one two three inside of each case statement.

80
00:05:21,890 --> 00:05:39,250
It's all do action not payload to three or five six seven eight and nine

81
00:05:42,060 --> 00:05:51,400
so let's say this once again flip back over and yet still turning red still going blue and still going

82
00:05:51,400 --> 00:05:56,270
green so as usual if you now see an error message or if the application is not working.

83
00:05:56,300 --> 00:05:58,960
Guarantee you you just made a typo so inside of here.

84
00:05:59,000 --> 00:06:01,490
So do a little hunting you're going want to find where you made that typo.

85
00:06:02,150 --> 00:06:05,750
So now I got a question for you is our code any better at this point.

86
00:06:07,370 --> 00:06:08,490
Maybe not.

87
00:06:08,490 --> 00:06:10,730
Yeah I would say no probably not.

88
00:06:10,730 --> 00:06:13,160
I don't think it's necessarily any better.

89
00:06:13,670 --> 00:06:15,320
I wouldn't say it's better easier to read.

90
00:06:16,100 --> 00:06:17,030
I don't know.

91
00:06:17,030 --> 00:06:22,280
So like I said if you want to use your own action objects and just throw in the properties you want

92
00:06:22,280 --> 00:06:23,910
yourself just go for it.

93
00:06:23,930 --> 00:06:25,630
Absolutely just go for it.

94
00:06:25,760 --> 00:06:31,000
Otherwise by convention we're going to use the type property with payload inside this course.

95
00:06:31,020 --> 00:06:35,480
We are going to follow convention because that is convention and in general I want to always teach you

96
00:06:35,640 --> 00:06:39,680
commune a convention site of a course but just between you and me if you decide not to follow that convention

97
00:06:40,310 --> 00:06:41,930
none the world is not going to end.

98
00:06:42,060 --> 00:06:43,660
Let's put it that way.

99
00:06:43,670 --> 00:06:43,940
All right.

100
00:06:44,090 --> 00:06:45,390
So this looks pretty good.

101
00:06:45,410 --> 00:06:48,220
I think that we've got to reduce or put together so quick pause right here.

102
00:06:48,230 --> 00:06:49,220
Continue next video.