1 00:00:00,270 --> 00:00:06,630 Some with our basic functionality in place, I'm going to close the no card container, I don't think 2 00:00:06,630 --> 00:00:14,250 I'm going to need that and then I'm going to look for my car item just so each and every item that I 3 00:00:14,250 --> 00:00:15,170 have in a cart. 4 00:00:15,570 --> 00:00:22,350 And then as far as the props at the moment, we get props, of course, from the card container because 5 00:00:22,350 --> 00:00:26,730 we're passing in for each item, the image, the title price and the amount. 6 00:00:26,940 --> 00:00:28,340 But there's no functionality. 7 00:00:28,680 --> 00:00:34,920 And again, we're going to have to use the connect method or start by import than connect. 8 00:00:35,190 --> 00:00:38,070 And it is coming from react readers. 9 00:00:38,370 --> 00:00:42,150 Now, I also want to write away, import my reactions. 10 00:00:42,420 --> 00:00:45,140 So decrease, increase and remove. 11 00:00:45,510 --> 00:00:48,480 So right before or after doesn't really matter. 12 00:00:48,840 --> 00:00:49,920 Go with import. 13 00:00:50,070 --> 00:00:51,150 We have to increase. 14 00:00:52,270 --> 00:00:53,530 Then decrease. 15 00:00:54,750 --> 00:01:00,600 And then also we had a small fraction, of course, it is coming from and then again, we need to go 16 00:01:00,600 --> 00:01:03,390 to levels up and look for the actions. 17 00:01:03,750 --> 00:01:07,230 So we have to connect and we have our actions now. 18 00:01:07,710 --> 00:01:13,740 Well, remember, in the bottom, we needed to export Crinum what we needed to wrap it in the correct 19 00:01:13,740 --> 00:01:14,120 function. 20 00:01:14,430 --> 00:01:16,110 So I'm going to go with my connect function. 21 00:01:16,340 --> 00:01:18,420 I will pass in my Crinum. 22 00:01:18,600 --> 00:01:20,280 And then we have our two arguments. 23 00:01:20,640 --> 00:01:23,510 Now, in this case, do we need to have a first argument? 24 00:01:23,700 --> 00:01:26,210 Do we need a map state to perhaps function? 25 00:01:26,700 --> 00:01:31,410 Well, we already getting all the props that we need from the court container. 26 00:01:31,740 --> 00:01:32,120 Correct. 27 00:01:32,310 --> 00:01:33,190 So that's all good. 28 00:01:33,570 --> 00:01:35,820 Now, what we need, though, is the dispatch. 29 00:01:36,210 --> 00:01:41,150 So in order to avoid getting the first function, we can just bypass it by passing in the novel. 30 00:01:41,650 --> 00:01:43,560 Now, we're just going to pass in the second argument. 31 00:01:43,800 --> 00:01:51,480 And the second argument is also a function, or in this case, it maps the dispatch function to our 32 00:01:51,480 --> 00:01:51,870 prompts. 33 00:01:52,230 --> 00:01:59,880 So, again, naming is up to you, but a common practice is naming this map dispatched perhaps and similar 34 00:01:59,880 --> 00:02:02,250 way how we had mapped Theta as a function. 35 00:02:02,550 --> 00:02:05,600 We do the same thing for the dispatch in this case. 36 00:02:05,610 --> 00:02:11,070 Again, I'm going to switch to our function just because and what happens as a prop. 37 00:02:11,070 --> 00:02:12,650 We are getting our dispatch. 38 00:02:12,840 --> 00:02:14,400 So same set up again. 39 00:02:14,400 --> 00:02:21,000 We're still setting up our object that we are turning that will be map to our props or in this function, 40 00:02:21,180 --> 00:02:24,280 the parameter is our dispatch method. 41 00:02:24,510 --> 00:02:31,200 Now, the difference in this case is the fact that we're not mapping our static state values to the 42 00:02:31,200 --> 00:02:31,580 props. 43 00:02:31,890 --> 00:02:35,220 In fact, I we want to set up my props as functions. 44 00:02:35,430 --> 00:02:41,100 And I'm going to start with the first one with a remove and then one by one we will add the other ones 45 00:02:41,100 --> 00:02:41,430 layer. 46 00:02:41,790 --> 00:02:43,680 So remove is equal. 47 00:02:43,860 --> 00:02:45,370 And now let me make a mistake. 48 00:02:45,600 --> 00:02:51,000 So first, I'm going to show you how we will fail if we will not set this up as a function. 49 00:02:51,240 --> 00:02:55,680 So I'm going to pass in my dispatch and then remember, we needed to pass in the type. 50 00:02:55,950 --> 00:03:00,420 And then, of course, we still have our correct action and that is removed. 51 00:03:00,780 --> 00:03:08,250 But then once I say it and if we will open up the console, you'll see that I have three times you remove 52 00:03:08,250 --> 00:03:10,020 a map because I have three items. 53 00:03:10,440 --> 00:03:16,830 And then instead of running this, once the user clicks on a button, I invoke it right away because 54 00:03:16,830 --> 00:03:18,420 I have this patch in work. 55 00:03:18,750 --> 00:03:24,420 And that's the reason why when you're setting up your prop, you need to set it equal to a function 56 00:03:24,630 --> 00:03:27,500 that returns this dispatch like so. 57 00:03:27,750 --> 00:03:29,100 So let me set it properly. 58 00:03:29,250 --> 00:03:35,550 And now in a console, you don't see any more the console log, because now we will run it when the 59 00:03:35,550 --> 00:03:36,810 user clicks on about. 60 00:03:37,230 --> 00:03:44,370 So that is my first prop, the removed prop that is equal to a result, the arrow function that returns 61 00:03:44,370 --> 00:03:46,860 a dispatch with a type of room. 62 00:03:47,220 --> 00:03:49,200 And of course now we need to head on up. 63 00:03:49,440 --> 00:03:57,000 And then right after the amount, I will look for my remove prop, which is a function, and then after 64 00:03:57,000 --> 00:04:03,570 that we're looking for our button and the same how we had four clear cut we're going to have on click. 65 00:04:03,810 --> 00:04:06,810 But again, we do not want to invoke this right away. 66 00:04:07,170 --> 00:04:09,300 So curly braces, man. 67 00:04:09,300 --> 00:04:15,420 First, let's set up a arrow function and now let's write a remove and then in fact invoke it. 68 00:04:15,720 --> 00:04:16,530 Let's save that. 69 00:04:16,680 --> 00:04:22,890 And now each and every time I'm going to press on or move, you'll see in a console that the item is 70 00:04:22,890 --> 00:04:26,220 removed or at least a console log that says that let's click. 71 00:04:26,370 --> 00:04:31,470 We have your remove amount, then you remove amount and then you remove the amount. 72 00:04:31,800 --> 00:04:32,670 So that works. 73 00:04:32,700 --> 00:04:35,160 We're passing in our removing action. 74 00:04:35,430 --> 00:04:39,840 And I guess now we would want to start working on the actual functionality.