1 00:00:00,890 --> 00:00:07,880 Once we have connected our components to a Redux store and we can display static data, let's switch 2 00:00:07,880 --> 00:00:12,100 gears, make things a bit more interesting and start working on the functionality. 3 00:00:12,560 --> 00:00:19,790 So I'm going to start with clear cut just because my button is in the car component anyway, so we might 4 00:00:19,790 --> 00:00:21,500 as well keep on working here. 5 00:00:21,710 --> 00:00:23,480 And I guess I said car component. 6 00:00:23,690 --> 00:00:29,450 What I mean is cart container component, just to be more clear and the same one as far as reducing 7 00:00:29,800 --> 00:00:37,140 the functionality will be very straight up where instead of having a cart, we will switch to a meteorite. 8 00:00:37,410 --> 00:00:44,120 So essentially, once the user clicks on a car instead of setting equal to cart items, we will set 9 00:00:44,120 --> 00:00:46,050 it equal to an empty. 10 00:00:46,070 --> 00:00:46,390 All right. 11 00:00:46,790 --> 00:00:52,580 Now, we'll start by getting the action, the clear court action, because that's the one we will use 12 00:00:52,580 --> 00:00:53,270 in reducer. 13 00:00:53,450 --> 00:00:57,690 And of course, once we dispatch the method, we need to use the same action. 14 00:00:58,010 --> 00:00:59,780 Let me copy and paste my variable. 15 00:01:00,110 --> 00:01:06,610 Then in the card container up on the top, I'm going to go with the import and copy and paste just so 16 00:01:06,610 --> 00:01:08,150 I don't have any stupid bugs. 17 00:01:08,450 --> 00:01:12,620 And then from now, our components is a separate folder. 18 00:01:12,830 --> 00:01:17,930 So we need to go to levels up and look for actions in the source folder. 19 00:01:18,740 --> 00:01:19,550 Let me save it. 20 00:01:19,790 --> 00:01:21,440 And now the million dollar question. 21 00:01:21,770 --> 00:01:25,340 How can we have access to our dispatch method? 22 00:01:25,640 --> 00:01:30,130 And I remember I said that there is a second argument to connect. 23 00:01:30,410 --> 00:01:36,590 So that would be one of the ways that will cover in the next video is when we start working with a single 24 00:01:36,930 --> 00:01:37,250 item. 25 00:01:37,550 --> 00:01:43,640 However, when we use my state props, we also have access to a dispatch method. 26 00:01:43,820 --> 00:01:47,150 And since it is very cool, I want to show you first. 27 00:01:47,480 --> 00:01:51,710 So let me switch to a bigger screen and let's look for the tools. 28 00:01:52,070 --> 00:01:54,320 More specifically, react dev tools. 29 00:01:54,770 --> 00:01:59,000 And you'll notice something interesting where we have the card container on the right hand side. 30 00:01:59,000 --> 00:02:01,900 I can see the props, OK, and then the props. 31 00:02:01,910 --> 00:02:04,120 I have our cart dispatch in total. 32 00:02:04,700 --> 00:02:07,250 Now, cart and total makes sense, correct? 33 00:02:07,580 --> 00:02:15,500 Because in the cart container we use maps that props and we mapped our store values to our props. 34 00:02:15,710 --> 00:02:18,730 More specifically, the props were correct and total. 35 00:02:19,070 --> 00:02:20,750 So those do make total sense. 36 00:02:21,170 --> 00:02:22,250 What about this guy, though? 37 00:02:22,490 --> 00:02:23,660 What about the dispatch? 38 00:02:24,050 --> 00:02:28,970 I can see that I have this problem, by the way, you so I didn't set them up myself. 39 00:02:29,310 --> 00:02:31,460 There is no where I wrote this page. 40 00:02:31,640 --> 00:02:36,550 So this was done by maps that props and is equal to a dispatch function. 41 00:02:37,040 --> 00:02:39,050 Now, do you want to make a wild guess? 42 00:02:39,080 --> 00:02:40,940 What is this dispatch function doing? 43 00:02:41,450 --> 00:02:46,930 And if you guessed that it is the same function stored in dispatch, you are exactly correct. 44 00:02:47,240 --> 00:02:49,430 So what's cool about my state props? 45 00:02:49,700 --> 00:02:58,610 Not only we can map our state values to our props, but also automatically we map our dispatch function 46 00:02:58,880 --> 00:03:00,940 to a dispatch prop. 47 00:03:01,190 --> 00:03:07,670 And what that simply means is that in the car container where I have the props right after the total, 48 00:03:08,090 --> 00:03:14,960 I can write dispatch and now I have access to my dispatch method and where I would want to use that. 49 00:03:14,960 --> 00:03:20,360 Well, I have my button, the clear cut button, and of course, we would want to set up on click. 50 00:03:21,500 --> 00:03:27,530 So unclick what should happen since we are going to invoke our function, the dispatch one, we need 51 00:03:27,530 --> 00:03:33,640 to make sure that we pass the arrow function because we would want to run clear cut once we click on 52 00:03:33,650 --> 00:03:35,450 a button, not right away. 53 00:03:35,640 --> 00:03:40,790 And then since we have access to our dispatch bypass dispatch and then remember, we needed to pass 54 00:03:40,790 --> 00:03:41,510 our action. 55 00:03:41,660 --> 00:03:49,190 So object with a property of type and then let's use our clear card, so clear cut variable, which 56 00:03:49,190 --> 00:03:52,450 holds the clear cut string and we are good to go. 57 00:03:52,790 --> 00:03:55,190 Now, of course we need to catch that introducer. 58 00:03:55,580 --> 00:03:58,220 So I'm going to move to register again. 59 00:03:58,220 --> 00:04:02,890 I do need to import my clear card and then I'm going to set up my IF statement. 60 00:04:03,230 --> 00:04:10,700 So if action type, if action type is equal to clear card, what we would want to do. 61 00:04:11,240 --> 00:04:15,440 Well, I guess we need to start by returning a object, correct. 62 00:04:15,440 --> 00:04:16,160 A new object. 63 00:04:16,440 --> 00:04:19,790 Then we would want to copy all the values from the old state. 64 00:04:19,940 --> 00:04:25,340 So that's why we're using and the spread operator, we're copying the properties and then we would want 65 00:04:25,340 --> 00:04:26,480 to override the court one. 66 00:04:26,810 --> 00:04:29,450 And as far as the court, I'm just going to go with court. 67 00:04:29,660 --> 00:04:35,350 And then since I'm clearing the court, the only thing we need to do is set it equal to an empty array, 68 00:04:35,570 --> 00:04:36,260 let's say it. 69 00:04:36,260 --> 00:04:43,340 And then if everything has been set up correctly, once we press on clear court, we should see is currently 70 00:04:43,340 --> 00:04:43,660 empty. 71 00:04:43,820 --> 00:04:45,770 So your back is currently empty. 72 00:04:46,070 --> 00:04:47,190 Why is that happening? 73 00:04:47,360 --> 00:04:55,220 Well, because in my car container, I'm checking if the car trailing is equal to zero, which of course 74 00:04:55,220 --> 00:04:55,880 is the case. 75 00:04:55,880 --> 00:05:01,010 Once we delete all our items, then I'm just displaying is currently empty. 76 00:05:01,340 --> 00:05:07,820 And of course we can do it multiple times where once I refresh again, I get my array with the items. 77 00:05:08,060 --> 00:05:14,270 But since I added my dispatch method, now each and every time my user will click on Clearcut, the 78 00:05:14,270 --> 00:05:16,460 user will clear all the items from the card.