1 00:00:00,580 --> 00:00:00,870 All right. 2 00:00:00,880 --> 00:00:05,800 My friends hopefully you had some success on this exercise if you ran into any problems don't sweat 3 00:00:05,800 --> 00:00:05,950 it. 4 00:00:05,950 --> 00:00:08,770 This really was pretty challenging little exercise. 5 00:00:08,770 --> 00:00:13,930 So let's go through a solution right now together I'll get some inside on my counter screened J.S. file 6 00:00:14,140 --> 00:00:18,940 again that's inside of my screens directory inside of here we're going to go through a identical refactor 7 00:00:18,940 --> 00:00:20,890 to what we did inside of square screen. 8 00:00:21,000 --> 00:00:26,440 So going to first go through here and remove every reference to you state that I can find inside my 9 00:00:26,440 --> 00:00:26,940 component. 10 00:00:26,980 --> 00:00:30,560 I've got the declaration of you state right here where we initially call it. 11 00:00:30,620 --> 00:00:32,170 I'm going to delete that. 12 00:00:32,380 --> 00:00:38,080 And then again to go into my first button element we had a call to set counter said counter doesn't 13 00:00:38,080 --> 00:00:38,920 exist anymore. 14 00:00:38,980 --> 00:00:41,950 So I'm gonna delete everything inside of that on press. 15 00:00:41,950 --> 00:00:44,380 Same thing with a second on press. 16 00:00:44,570 --> 00:00:49,160 And then finally down inside this text element I'm going to delete counter inside of those red brackets 17 00:00:49,160 --> 00:00:49,580 like so 18 00:00:52,930 --> 00:00:53,170 all right. 19 00:00:53,200 --> 00:00:55,360 So now we can start to add some code in. 20 00:00:55,540 --> 00:00:57,440 First off I'll go up to my import statement. 21 00:00:57,580 --> 00:01:02,530 I'll change the you state to use reducer then inside my components. 22 00:01:02,690 --> 00:01:04,550 I'm going to say const. 23 00:01:04,550 --> 00:01:08,800 Remember we're going to d structure these two values that come back when we call use reducer. 24 00:01:08,960 --> 00:01:11,030 The first one is gonna be our state object. 25 00:01:11,030 --> 00:01:13,250 The second one is going to be dispatch. 26 00:01:13,250 --> 00:01:19,190 Remember a better name for dispatch would be like call my reducer but usually by convention once again 27 00:01:19,310 --> 00:01:24,910 we call it dispatch and on the other side we will call use reducer. 28 00:01:25,020 --> 00:01:26,590 I'm going to pass in a reducer. 29 00:01:26,600 --> 00:01:30,470 I don't have one defined inside of just yet but we're gonna write that out in just a moment. 30 00:01:30,510 --> 00:01:33,460 It's going to write reducer Nonetheless even though it's not yet defined. 31 00:01:33,620 --> 00:01:38,210 And then remember as a second argument we're going to pass in some initial state object. 32 00:01:38,210 --> 00:01:43,440 So right away we have to make a decision about what kind of object we're going to have to hold our state. 33 00:01:43,490 --> 00:01:46,280 In other words what different properties will it have. 34 00:01:46,310 --> 00:01:51,140 Now one thing I would mention is that when we make use of use reducer we don't technically have to store 35 00:01:51,170 --> 00:01:53,090 our state inside of an object. 36 00:01:53,150 --> 00:01:58,400 We could instead store a state inside an array or we could just be a plain value like a number that 37 00:01:58,400 --> 00:02:01,120 starts off as zero or even a string. 38 00:02:01,310 --> 00:02:07,730 But usually if you are in a situation where you need to make use of use reducer generally you're going 39 00:02:07,730 --> 00:02:12,350 to want to use an object because remember if we're reaching for use reducer that means that there are 40 00:02:12,350 --> 00:02:15,540 multiple different properties so we want to keep track of. 41 00:02:15,560 --> 00:02:22,820 So again generally we fall back to using an object for our state object with use reducer get so I to 42 00:02:22,820 --> 00:02:26,940 put an object in here and now we need to decide what properties it's going to have. 43 00:02:26,940 --> 00:02:32,840 I think that having a property of like count or counter maybe just count would make a lot of sense. 44 00:02:32,920 --> 00:02:35,430 I'll give it an initial starting value of zero. 45 00:02:35,490 --> 00:02:40,860 Now remember this initial object right here or even our entire state object in general you and I need 46 00:02:40,860 --> 00:02:43,800 to decide what that thing is going to have or what different properties it will have. 47 00:02:44,280 --> 00:02:46,430 So if you decided to use a different property name right. 48 00:02:46,530 --> 00:02:52,350 Right here of like counter or current count or present count or whatever else. 49 00:02:52,350 --> 00:02:53,190 Totally fine. 50 00:02:53,190 --> 00:02:58,500 You do not have to use the same property names as I you just have to stay consistent inside this entire 51 00:02:58,500 --> 00:02:59,450 file. 52 00:02:59,580 --> 00:03:02,480 So going to use count because again I think that makes a little bit of sense. 53 00:03:03,420 --> 00:03:08,260 All right so now we can define our reduce function and define that right above my component so we'll 54 00:03:08,260 --> 00:03:09,880 say counts reducer. 55 00:03:09,880 --> 00:03:17,380 And remember this thing is going to be called with our current state object and our action river action 56 00:03:17,440 --> 00:03:21,370 a better name for that would be like how to change state. 57 00:03:21,370 --> 00:03:23,520 Action is pretty darn unclear in my opinion. 58 00:03:23,800 --> 00:03:26,560 So if you want to call it something else just as a reminder to you. 59 00:03:26,590 --> 00:03:32,140 Totally fine but technically by commune convention once again we call it action OK. 60 00:03:32,160 --> 00:03:37,040 So inside of your before we actually put our switch statement down let's add a couple of comments to 61 00:03:37,040 --> 00:03:40,970 just clarify exactly what we expect state in action to be. 62 00:03:40,970 --> 00:03:46,190 So first off I expect state to be an object very similar to the one we had down here that we passed 63 00:03:46,190 --> 00:03:47,750 in as our initial state. 64 00:03:47,750 --> 00:03:54,340 So it's going to have a count property and that's gonna be a number then as my second argument for action 65 00:03:56,260 --> 00:03:58,960 once again we're going to follow community convention here. 66 00:03:59,230 --> 00:04:03,880 So going to expect this thing has a type property that's a string that describes the change that we 67 00:04:03,880 --> 00:04:05,680 need to make to our state object. 68 00:04:05,680 --> 00:04:14,020 So I will assume that maybe we will have a action with a type property of increment or decrement if 69 00:04:14,020 --> 00:04:19,300 you use different type properties or if you used a different property altogether to decide how to change 70 00:04:19,300 --> 00:04:20,170 your state object. 71 00:04:20,320 --> 00:04:25,540 Totally fine as well is different type properties the different values assigned don't really make a 72 00:04:25,540 --> 00:04:26,850 difference at the end of the day. 73 00:04:26,980 --> 00:04:31,510 All that matters is that if you call your reducer you just have to return the appropriately changed 74 00:04:31,720 --> 00:04:32,620 state object. 75 00:04:32,620 --> 00:04:37,700 That's all now the second thing we might want to think about is whether or not this object needs a payload. 76 00:04:37,700 --> 00:04:44,250 Property in this case our counter is only ever adjusting our current value by one. 77 00:04:44,400 --> 00:04:47,810 So it's ever only ever gonna go up by 1 or down by 1. 78 00:04:47,880 --> 00:04:52,470 So technically we don't really need a payload this time around to describe whether or not we are increasing 79 00:04:52,470 --> 00:04:55,180 our counter by like 1 or negative 1. 80 00:04:55,200 --> 00:04:58,640 So if you left off the payload property that's fine but if you put it on. 81 00:04:58,680 --> 00:04:59,910 That's fine as well. 82 00:04:59,910 --> 00:05:04,440 Technically if you add in the payload property right here you are no longer constrained to updating 83 00:05:04,440 --> 00:05:09,420 your account by 1 every time because you could have a payload of like 15. 84 00:05:09,420 --> 00:05:13,620 And now you could increase your counter by like 15 at a time. 85 00:05:13,620 --> 00:05:16,060 So if you decided to add in that property totally fine. 86 00:05:16,140 --> 00:05:18,750 And if you left it off that's fine as well. 87 00:05:18,750 --> 00:05:23,140 I'm going to add in the payload property here because that's what I showed on our square screen example 88 00:05:23,140 --> 00:05:24,060 of back over here. 89 00:05:24,060 --> 00:05:27,080 So going to kind of assume that you probably added in a payload as well. 90 00:05:27,860 --> 00:05:28,160 Yes. 91 00:05:28,200 --> 00:05:29,710 Now we can do our switch statement. 92 00:05:29,810 --> 00:05:32,310 We're gonna switch over action dot type. 93 00:05:32,360 --> 00:05:38,270 There are two possible cases in case where it's equal to increment and a case where it's equal to decrement 94 00:05:39,080 --> 00:05:44,420 and of course the default case remember the default case is just here in case we accidentally color 95 00:05:44,420 --> 00:05:47,230 reducer with an unknown action type. 96 00:05:47,330 --> 00:05:50,600 Not really likely in this case but nonetheless we throw it in every time. 97 00:05:50,600 --> 00:05:55,000 Anyways so in the default case we'll take care of that right away. 98 00:05:55,030 --> 00:05:59,830 I don't want to make any change to my state object if we hit the default case so I'll just return state 99 00:06:01,600 --> 00:06:06,550 now we can handle case increment so inside of here we're gonna end up with some syntax very similar 100 00:06:06,550 --> 00:06:08,680 to what we saw back inside of square screen. 101 00:06:08,940 --> 00:06:15,280 So I'm going to return a new object because remember we do not modify our state object here so we're 102 00:06:15,280 --> 00:06:16,720 going to return a new object. 103 00:06:16,900 --> 00:06:21,400 We're going to take all the current values out of the state object and throw it into the new one and 104 00:06:21,400 --> 00:06:23,860 then we're going to make a change to our account property. 105 00:06:25,070 --> 00:06:35,830 So our new count is going to be state DOT count plus action dot payload like so to take one of our current 106 00:06:35,830 --> 00:06:38,060 counties and add payload to it. 107 00:06:38,560 --> 00:06:43,060 And once again if you decided to leave off the payload property then you would have probably ended up 108 00:06:43,060 --> 00:06:45,680 with something looks like state DOT count plus 1. 109 00:06:45,760 --> 00:06:46,650 If that's what you did. 110 00:06:46,660 --> 00:06:50,030 Again totally fine. 111 00:06:50,050 --> 00:06:54,530 So now we can handle a case document as well so I'll do a return. 112 00:06:54,610 --> 00:06:59,720 Dot dot dot state inside of a new object and again count it all it's going to be state DOT count. 113 00:06:59,970 --> 00:07:04,190 In this case we'll do minus action dot payload. 114 00:07:04,210 --> 00:07:08,980 Now this starts to lead us into kind of some interesting territory here because you might have followed 115 00:07:08,980 --> 00:07:12,310 a similar pattern as the last component we just worked on. 116 00:07:12,310 --> 00:07:18,220 If you put in a payload that's like negative 1 and then we have minus action not payload right here 117 00:07:18,430 --> 00:07:23,780 we would accidentally end up adding 1 to state account as opposed to decreasing by 1. 118 00:07:23,830 --> 00:07:28,960 So you essentially make need to make a decision either when you call a case decrement you're going to 119 00:07:29,020 --> 00:07:33,460 add whatever action not payload is in which case payload to be a negative number. 120 00:07:33,700 --> 00:07:39,400 Or alternatively you will leave on a minus right here and say that payload is always a positive number 121 00:07:39,640 --> 00:07:46,370 and just describes how much we want to change our current count by because in this case because we have 122 00:07:46,370 --> 00:07:52,640 the type property right here I would say technically the presence of a negative sign there is implicit 123 00:07:52,640 --> 00:07:56,990 or kind of indicated by whether or not we've got a type of increment or decrement. 124 00:07:56,990 --> 00:07:59,500 In other words you just have to go one way or another. 125 00:07:59,570 --> 00:08:04,010 Either you get a minus here and you're never gonna have a minus inside a payload or you've got a plus 126 00:08:04,010 --> 00:08:06,840 here and you're going to reflect negative values inside of payload. 127 00:08:06,860 --> 00:08:12,230 One of the other Now the other thing I want I mentioned very quickly you'll notice we've got a dot dot 128 00:08:12,260 --> 00:08:13,120 dot state here. 129 00:08:13,130 --> 00:08:17,600 And the reason for that was that we wanted to take all the different current values out of state and 130 00:08:17,600 --> 00:08:22,080 throw it into this new object and then overwrite it with this new value right here. 131 00:08:22,190 --> 00:08:26,360 But at present we only have a single value inside of our state object or single property and that's 132 00:08:26,360 --> 00:08:27,490 the count property. 133 00:08:27,530 --> 00:08:29,180 So technically we're doing some like this. 134 00:08:29,180 --> 00:08:29,630 We're throwing. 135 00:08:29,630 --> 00:08:35,540 OK throw count whatever the current value of count is inside this new object and then overwrite count 136 00:08:35,540 --> 00:08:36,760 right away. 137 00:08:36,830 --> 00:08:42,500 So right now because we have is kind of pointless unless we still follow the same pattern because at 138 00:08:42,500 --> 00:08:47,930 some point in the future we might decide to come back and add in some additional properties to our state 139 00:08:47,960 --> 00:08:52,160 object in which case we would need the dot dot dot state. 140 00:08:52,160 --> 00:08:54,630 So essentially what we're doing here is just future proofing. 141 00:08:54,650 --> 00:08:58,450 Even though it's not strictly necessary right now. 142 00:08:58,680 --> 00:08:58,980 All right. 143 00:08:59,010 --> 00:09:01,250 So I think the reducer looks good. 144 00:09:01,450 --> 00:09:06,610 Now we can actually call dispatch and make use of our state value from inside of our JSA ex. 145 00:09:06,620 --> 00:09:11,840 It's going to first find our first button right here whenever someone presses this button we're gonna 146 00:09:11,860 --> 00:09:18,480 call dispatch we're gonna pass in an action object because this is the increase button I'm gonna give 147 00:09:18,480 --> 00:09:25,960 it a type of increment remember that's gonna match the case that we have right here and I'm gonna add 148 00:09:25,960 --> 00:09:32,790 in a payload to describe how much I want to increment by I'll be a payload of 1 and now I can do the 149 00:09:32,790 --> 00:09:41,040 same thing down here inside of decrease as well so I'll do a dispatch with a type of decrement and a 150 00:09:41,040 --> 00:09:42,530 payload of one as well. 151 00:09:42,750 --> 00:09:48,210 And of course if you decided to do state DOT count plus action not payload right here in the decrement 152 00:09:48,210 --> 00:09:54,440 case then instead you would have a payload of negative 1 and then finally we have to print out our current 153 00:09:54,440 --> 00:09:59,900 count so inside of here remember we now have this state variable and inside there is a count property 154 00:10:00,200 --> 00:10:04,820 and that's going to reflect what our current state is or current count is so dense here inside of our 155 00:10:04,820 --> 00:10:10,970 text element we'll do state DOT count and if you decided to use a little bit of D structuring here then 156 00:10:10,970 --> 00:10:16,290 you might just have count instead which is totally fine as well okay so that's pretty much it's going 157 00:10:16,300 --> 00:10:24,470 to save this and we'll do a quick test so I gonna go back to my counter demo I'll increase yep and decrease 158 00:10:24,680 --> 00:10:25,980 Yep works as well. 159 00:10:26,000 --> 00:10:26,940 Perfect. 160 00:10:27,290 --> 00:10:27,550 All right. 161 00:10:27,560 --> 00:10:32,630 If you had any trouble with this exercise as usual don't sweat it the first time you look at all this 162 00:10:32,630 --> 00:10:39,110 reducer stuff it is insanely overcomplicated and again when we start to make use of this reducer stuff 163 00:10:39,440 --> 00:10:44,750 it's really overkill for a counter application we usually start to see reducer stuff come in when we 164 00:10:44,750 --> 00:10:49,250 have some really complicated state objects we're definitely to see examples of that later on INSIDE 165 00:10:49,250 --> 00:10:50,310 THIS COURSE. 166 00:10:50,430 --> 00:10:50,650 OKAY. 167 00:10:50,700 --> 00:10:52,970 So hopefully you've got this exercise but together. 168 00:10:53,060 --> 00:10:55,670 Let's take a quick pause right here and continue in the next video.