1 00:00:00,320 --> 00:00:00,770 All right, guys. 2 00:00:00,770 --> 00:00:06,590 So I don't normally do challenges in project based courses like this, but I think it's a good opportunity 3 00:00:06,620 --> 00:00:08,420 for you to try this on your own. 4 00:00:08,420 --> 00:00:16,370 So in the last video we used Redux Toolkit, we created a products API slice with an endpoint to get 5 00:00:16,370 --> 00:00:17,390 all products. 6 00:00:17,390 --> 00:00:23,570 We brought it into our home screen right here and we checked to see if it's loading, if there's any 7 00:00:23,570 --> 00:00:26,720 error, and then we just map through the products, right? 8 00:00:26,720 --> 00:00:29,510 So we're able to fetch them through Redux toolkit. 9 00:00:29,540 --> 00:00:35,270 Now I want you to do the same thing with the product screen, because right now the product screen is 10 00:00:35,270 --> 00:00:39,830 just using Axios inside of a Useeffect. 11 00:00:39,860 --> 00:00:41,180 We don't need to do that. 12 00:00:41,180 --> 00:00:42,080 You can get rid of that. 13 00:00:42,080 --> 00:00:47,660 You can get rid of the use state, all that stuff, and basically just copy what we just did. 14 00:00:47,660 --> 00:00:55,490 Except instead of using use get products query, you're going to create your own query, call it get 15 00:00:55,490 --> 00:00:57,590 product details, right? 16 00:00:57,590 --> 00:01:01,350 So you'll export, use, get product details, query. 17 00:01:01,440 --> 00:01:02,850 And that's all I'm going to tell you. 18 00:01:02,850 --> 00:01:05,190 I'm not going to give you any more information. 19 00:01:05,190 --> 00:01:06,120 Pause the video. 20 00:01:06,120 --> 00:01:07,170 Try it on your own. 21 00:01:07,170 --> 00:01:09,570 If you don't get it, that's absolutely fine. 22 00:01:10,090 --> 00:01:11,710 So let's continue on here. 23 00:01:11,710 --> 00:01:19,720 I'm going to go under this Get Products query, which ends right here and I'm going to say get product. 24 00:01:20,550 --> 00:01:21,750 Details. 25 00:01:21,750 --> 00:01:24,930 And again, we're going to use the builder query. 26 00:01:25,230 --> 00:01:30,630 And inside here we're going to have query. 27 00:01:32,430 --> 00:01:35,940 And let's set that to an arrow. 28 00:01:36,240 --> 00:01:38,400 And that's going to return an object. 29 00:01:38,400 --> 00:01:41,480 So we're going to have some parentheses, just like we did above. 30 00:01:41,490 --> 00:01:48,600 Now, this since we're getting a single product, this is going to pass get passed in a product ID, 31 00:01:49,680 --> 00:01:50,070 Okay. 32 00:01:50,070 --> 00:01:57,510 And then the URL is going to be the products URL slash and then the product ID, and then I'm also going 33 00:01:57,510 --> 00:02:00,780 to add keep unused data for five seconds. 34 00:02:01,230 --> 00:02:01,500 Okay. 35 00:02:01,500 --> 00:02:02,670 So very, very simple. 36 00:02:02,670 --> 00:02:06,420 Now to export this, remember the convention, it's going to start with use. 37 00:02:06,450 --> 00:02:08,120 It's going to end with query. 38 00:02:08,130 --> 00:02:14,430 So in this case, it would be use get product details, query. 39 00:02:15,270 --> 00:02:16,680 And that's it for this file. 40 00:02:16,680 --> 00:02:17,790 So let's save it. 41 00:02:17,820 --> 00:02:23,880 Then we want to go into our product screen and we can get rid of the Axios import. 42 00:02:23,910 --> 00:02:26,340 We can get rid of the use state use effect. 43 00:02:26,990 --> 00:02:29,540 We can get rid of the component state. 44 00:02:30,280 --> 00:02:33,430 We do want the ID which is being passed through the URL. 45 00:02:33,430 --> 00:02:35,890 So keep that we don't need the use effect. 46 00:02:35,890 --> 00:02:37,240 So get rid of that. 47 00:02:37,900 --> 00:02:38,230 All right. 48 00:02:38,260 --> 00:02:40,150 Now we want to import. 49 00:02:41,820 --> 00:02:46,230 The use get product details query. 50 00:02:46,830 --> 00:02:51,600 And we're going to use that down here. 51 00:02:52,590 --> 00:02:58,620 So we're going to get the the data which we're renaming to product is loading an error. 52 00:02:59,410 --> 00:03:02,380 And let's see, why did this. 53 00:03:03,350 --> 00:03:09,980 Yeah, we need to do that and then we can pass in here the product ID, which is coming from the URL 54 00:03:10,010 --> 00:03:13,250 because we're using the use params hook right here. 55 00:03:14,310 --> 00:03:15,630 All right now. 56 00:03:16,240 --> 00:03:23,440 Let's come down here and underneath the link, let's check for the loading and check for the error. 57 00:03:23,440 --> 00:03:28,930 So again, I'm going to just kind of build this out by saying is loading. 58 00:03:28,960 --> 00:03:36,460 So if it is, then parentheses else error. 59 00:03:36,700 --> 00:03:43,690 If there is an error, then parentheses else then parentheses and the output is going to go in the last 60 00:03:43,690 --> 00:03:44,410 parentheses. 61 00:03:44,410 --> 00:03:46,090 So let's grab all of this. 62 00:03:46,090 --> 00:03:48,670 This whole row, cut that. 63 00:03:51,460 --> 00:03:55,630 We're going to cut that and we're going to put that in the last parentheses here. 64 00:03:57,160 --> 00:03:57,730 Okay. 65 00:03:57,730 --> 00:04:01,420 And then if it's loading for now. 66 00:04:02,070 --> 00:04:05,850 We'll just put an H two and then if there's an error. 67 00:04:06,520 --> 00:04:09,610 Then let's make that a div. 68 00:04:12,100 --> 00:04:16,810 And just like we did in the last video, we're going to check for error. 69 00:04:17,649 --> 00:04:24,130 Dot data dot message or error. 70 00:04:24,860 --> 00:04:26,780 Dot error. 71 00:04:27,580 --> 00:04:27,910 All right. 72 00:04:27,910 --> 00:04:32,400 We shouldn't have any errors or any issues here. 73 00:04:32,410 --> 00:04:33,910 So I'm going to save that. 74 00:04:33,910 --> 00:04:37,870 And now we're fetching the data through Redux. 75 00:04:38,620 --> 00:04:38,920 Okay. 76 00:04:38,920 --> 00:04:41,620 Through our End Point, this right here. 77 00:04:41,620 --> 00:04:44,830 So no Axios requests or anything like that. 78 00:04:44,830 --> 00:04:48,460 You can see just how neat this is and how it flows. 79 00:04:48,460 --> 00:04:54,370 And if you if you need to fetch anything else, you know how to do it. 80 00:04:54,400 --> 00:05:00,610 We haven't done any mutations yet where we've changed or added things to the to the server, to the 81 00:05:00,610 --> 00:05:03,940 API, but you can see how easy fetching is. 82 00:05:04,990 --> 00:05:05,290 All right. 83 00:05:05,290 --> 00:05:07,330 And if you got it, congratulations. 84 00:05:07,330 --> 00:05:08,080 That's awesome. 85 00:05:08,080 --> 00:05:10,360 If you didn't, that's, that's fine. 86 00:05:10,930 --> 00:05:11,260 All right. 87 00:05:11,260 --> 00:05:18,220 So now that we're fetching through through Redux and Redux Toolkit in the next video before we move 88 00:05:18,220 --> 00:05:25,510 on, I just want to create a loader so that instead of just showing the loading text, we can show a 89 00:05:25,510 --> 00:05:26,140 spinner. 90 00:05:26,170 --> 00:05:27,640 All right, So we'll do that next.