1 00:00:00,320 --> 00:00:06,500 Okay, so now that we have our Redux store set up and the root API slice, now I want to create our 2 00:00:06,500 --> 00:00:13,820 products API slice and start adding some endpoints, including the one to fetch these products. 3 00:00:14,120 --> 00:00:14,630 All right. 4 00:00:14,720 --> 00:00:18,410 So I mean, as you can see, this, this course has been very incremental. 5 00:00:18,410 --> 00:00:25,880 We've done things bit by bit trying to to build you up into understanding what the I guess what the 6 00:00:25,880 --> 00:00:27,560 end result is. 7 00:00:28,100 --> 00:00:35,030 And I and I hope that people can appreciate that we start off with just having a products JS in the 8 00:00:35,030 --> 00:00:40,220 front end that we fetch from, then we move it to the back end and we fetch it from the back end using 9 00:00:40,220 --> 00:00:40,880 Http. 10 00:00:41,090 --> 00:00:47,300 And then we build our database, then we're getting it from the database, but just through a Useeffect 11 00:00:47,330 --> 00:00:54,890 hook, and now we're getting to Redux where we're going to fetch it through, through our slices created 12 00:00:54,890 --> 00:00:55,670 through Redux. 13 00:00:55,670 --> 00:00:57,320 So it's very incremental. 14 00:00:57,320 --> 00:01:04,410 And the reason I do that is so that I'm not just throwing like this code in here and that's that having 15 00:01:04,410 --> 00:01:06,240 you copy it we've built up. 16 00:01:06,240 --> 00:01:08,670 So you kind of know what's going on. 17 00:01:09,060 --> 00:01:16,350 Now, this API slice, like I said, this is this is basically the parent and what I'm going to do is 18 00:01:16,350 --> 00:01:26,460 create another slice in the slices folder and we're going to call this products API slice dot JS and 19 00:01:26,460 --> 00:01:36,450 we could put endpoints directly in here if we want, but we can also inject them from a separate file, 20 00:01:36,450 --> 00:01:39,480 which is what we're going to do because we have different types of endpoints. 21 00:01:39,480 --> 00:01:42,060 We have products orders, users. 22 00:01:42,060 --> 00:01:47,070 So there's actually a method called inject endpoint endpoints. 23 00:01:47,070 --> 00:01:52,380 So first thing we'll do here is import our products URL constant. 24 00:01:52,590 --> 00:01:57,210 So we're going to bring that in and then we want to bring in our API slice. 25 00:01:57,210 --> 00:01:59,670 So API slice. 26 00:02:00,390 --> 00:02:10,380 And then we're going to say const, or we want to actually export const products API slice. 27 00:02:11,220 --> 00:02:18,300 Okay, so we're setting this to API slice and then there's a method called inject endpoints. 28 00:02:18,300 --> 00:02:22,950 So we're basically going to put endpoints in here and we can use this builder. 29 00:02:22,950 --> 00:02:29,430 In fact, I'm just going to copy this right here and inside of this. 30 00:02:29,990 --> 00:02:31,370 Inject end points. 31 00:02:31,370 --> 00:02:37,850 I'm going to paste that in and then any end points that we want to hit that have to do with products 32 00:02:37,850 --> 00:02:44,990 will go in here and we can use this builder object which has methods like query, so we can make a query. 33 00:02:45,230 --> 00:02:52,100 And once you see how this is set up, you'll see how easy it is to make queries and you'll be able to 34 00:02:52,100 --> 00:02:54,710 query whatever you want from the back end. 35 00:02:54,710 --> 00:02:57,140 So I want to just get all the products. 36 00:02:57,140 --> 00:02:59,930 So I'm going to call this get products. 37 00:03:00,820 --> 00:03:05,230 And we're going to set that to use the builder dot query. 38 00:03:06,600 --> 00:03:15,810 And what this is going to take in this builder query is an object with query, and we're going to set 39 00:03:15,810 --> 00:03:18,480 that to an arrow function. 40 00:03:18,480 --> 00:03:20,670 And I want this to return an object. 41 00:03:20,670 --> 00:03:26,040 So we're actually going to put parentheses here and then our curly braces and we want to pass in the 42 00:03:26,040 --> 00:03:33,120 URL, which is going to be the products URL from the constants file, which is AIP, slash API slash 43 00:03:33,120 --> 00:03:33,630 products. 44 00:03:33,630 --> 00:03:35,370 That's the endpoint we want to hit. 45 00:03:35,370 --> 00:03:43,290 So as you can see, we're not having to do a fetch request or an Axios request to to do this. 46 00:03:43,320 --> 00:03:47,910 We do it all through Redux toolkit, which is really cool in my opinion. 47 00:03:47,910 --> 00:03:53,100 So after let's see, after this query, we're just going to put in one more thing. 48 00:03:53,100 --> 00:03:59,910 So let's put a comma and we're going to say keep unused data for which is, I believe the seconds that 49 00:03:59,910 --> 00:04:01,170 it's cached. 50 00:04:01,290 --> 00:04:03,540 Let's see, does it show us here? 51 00:04:04,290 --> 00:04:06,430 Um, let's see. 52 00:04:06,430 --> 00:04:09,610 Overrides the API definition. 53 00:04:09,790 --> 00:04:17,500 This is how long our query and by the way, that's, that's what, that's what Redux toolkit uses behind 54 00:04:17,500 --> 00:04:19,269 the scenes to make our queries. 55 00:04:19,360 --> 00:04:27,220 It's a, it's TK query and it'll keep your data cache for after the last component unsubscribes. 56 00:04:27,220 --> 00:04:35,620 For example, if you query an endpoint then unmount the component, then mount another component that 57 00:04:35,620 --> 00:04:38,410 makes the same request within the given time frame. 58 00:04:38,410 --> 00:04:42,070 The most recent value will be served from the cache. 59 00:04:42,070 --> 00:04:47,560 So yeah, the value is in seconds, so I'm just going to set that to five seconds. 60 00:04:48,310 --> 00:04:54,400 And then what we want to do is export our query and there's a certain convention that we that we need 61 00:04:54,400 --> 00:04:55,840 to use for this. 62 00:04:55,840 --> 00:05:03,670 So let's say export and we're going to say const and the convention is going to be whatever we call 63 00:05:03,670 --> 00:05:10,960 this, the actual name of the query get products, but it's going to be prefixed with use. 64 00:05:10,990 --> 00:05:15,550 And then we're also going to add query onto the end because it's a query. 65 00:05:15,550 --> 00:05:18,490 When it's a mutation, you'll add mutation. 66 00:05:18,490 --> 00:05:24,850 But since this is called get products, we're going to export use, get products query, and that's 67 00:05:24,850 --> 00:05:28,930 what we bring into our component whenever we want to use this and fetch our data. 68 00:05:28,930 --> 00:05:30,670 So let's save this. 69 00:05:30,670 --> 00:05:38,170 And now what I want to do is go into, let's see, where are we going to go into the home screen. 70 00:05:39,530 --> 00:05:45,590 So screens home screen because right now what we're doing is simply bringing in use effect and then 71 00:05:45,590 --> 00:05:48,260 we're making a fetch request to our back end. 72 00:05:48,290 --> 00:05:52,130 We no longer want to do this so we can actually delete. 73 00:05:52,710 --> 00:05:59,040 The Axios import, we can delete the use state and use effect import because no longer do we need to 74 00:05:59,040 --> 00:06:01,830 have products in our component state. 75 00:06:02,040 --> 00:06:06,690 We can delete the entire use effect so we can really clean this up. 76 00:06:06,690 --> 00:06:15,630 And then what we want to bring in instead is going to be our use this right here use get products query. 77 00:06:15,630 --> 00:06:19,080 So let's go here and say import. 78 00:06:20,270 --> 00:06:21,570 And it's going to be used. 79 00:06:21,620 --> 00:06:26,240 Get products query from our products API slice. 80 00:06:26,970 --> 00:06:31,830 And then let's see, we're going to go down here into the home screen. 81 00:06:32,370 --> 00:06:38,690 And this gives us a few things that we can get from this Use products query. 82 00:06:38,700 --> 00:06:44,040 So we get the data, which here we're renaming to products because that's what we're using down here. 83 00:06:44,040 --> 00:06:48,540 But we can also get the is loading state as well as is error. 84 00:06:48,540 --> 00:06:54,030 If there's an error, which I think is awesome because it can be kind of a pain in the -- if you have 85 00:06:54,030 --> 00:06:59,370 to handle this yourself like we did in the first version of this application when we didn't use toolkit. 86 00:06:59,370 --> 00:07:02,310 Well, I don't even think toolkit was was around then. 87 00:07:02,880 --> 00:07:04,800 So this is very, very helpful. 88 00:07:04,800 --> 00:07:10,140 So we already have the products being mapped through down here, but I also want to check for loading 89 00:07:10,140 --> 00:07:12,180 and I want to check for error. 90 00:07:12,180 --> 00:07:22,200 So what I'll do is let's go right below this fragment here and we're going to say is loading then. 91 00:07:22,730 --> 00:07:32,570 So is loading then, and I'm going to just open up some parentheses and then we'll do else if error, 92 00:07:32,690 --> 00:07:39,530 then we'll open up some parentheses else and then we'll open up some parentheses. 93 00:07:39,530 --> 00:07:44,420 So I'm just giving printing out the full structure here of what we're going to do. 94 00:07:44,420 --> 00:07:47,240 And this is going to go in the last one here. 95 00:07:47,240 --> 00:07:51,710 So let's grab H one and row and cut that. 96 00:07:51,710 --> 00:07:57,590 And of course that has to go into a single element, single wrapper element. 97 00:07:57,590 --> 00:08:02,720 So I'll just put some fragments in here or a fragment and then paste that in. 98 00:08:02,720 --> 00:08:10,700 Now if it's loading, then for now I'm just going to have an H two. 99 00:08:10,730 --> 00:08:14,300 We can create a spinner after, but for now we'll just do an H two. 100 00:08:14,330 --> 00:08:20,630 If there's an error that would be this set of parentheses, then let's do a div. 101 00:08:20,870 --> 00:08:22,890 Oops, we want to do a div. 102 00:08:24,250 --> 00:08:25,150 Don't know why. 103 00:08:25,870 --> 00:08:27,350 I don't know why that's not working. 104 00:08:27,370 --> 00:08:28,960 All right, let's just type it out. 105 00:08:28,960 --> 00:08:34,210 So div and then in here, we'll open up some curly braces. 106 00:08:34,240 --> 00:08:40,150 We'll say error, dot data, dot message or. 107 00:08:41,240 --> 00:08:43,970 Error, Dot error, whichever one. 108 00:08:44,550 --> 00:08:46,800 Is whichever one is available. 109 00:08:47,040 --> 00:08:50,580 And let's make this optional here. 110 00:08:51,060 --> 00:08:55,170 So even if this is undefined, it'll check this value here. 111 00:08:56,160 --> 00:08:58,140 And I think that should do it. 112 00:08:58,140 --> 00:09:00,420 So let's go ahead and save that. 113 00:09:00,660 --> 00:09:03,030 So we get error is not defined. 114 00:09:03,030 --> 00:09:04,890 And that's because. 115 00:09:06,330 --> 00:09:09,320 Uh, that's because up here I have is error. 116 00:09:09,330 --> 00:09:10,290 Let's change. 117 00:09:11,560 --> 00:09:14,260 Let's change that to error, actually. 118 00:09:17,660 --> 00:09:20,780 Cannot read properties of undefined message. 119 00:09:23,290 --> 00:09:24,640 See message. 120 00:09:24,670 --> 00:09:25,030 Okay. 121 00:09:25,030 --> 00:09:29,140 So let's make this we're going to put a question mark here as well. 122 00:09:30,470 --> 00:09:30,800 All right. 123 00:09:30,800 --> 00:09:32,710 So we get failed to fetch. 124 00:09:32,720 --> 00:09:38,390 So let's open up the console here and it looks like we're getting a cors error. 125 00:09:38,780 --> 00:09:44,330 So what's going on here is we're we're using localhost 3000, right? 126 00:09:44,330 --> 00:09:51,590 That's our React dev server and we're trying to fetch data from our API that's at localhost 5000. 127 00:09:51,770 --> 00:09:58,790 Now we could go into our back end to our server and we could enable cors and make it so that localhost 128 00:09:58,790 --> 00:10:01,370 3000 can fetch the data. 129 00:10:01,370 --> 00:10:05,660 However, since we have a proxy, we shouldn't have to do that. 130 00:10:05,660 --> 00:10:11,540 Remember in the front end in our package.json we added this proxy here. 131 00:10:11,540 --> 00:10:19,670 So I think that where I went wrong is with the constants and the base URL. 132 00:10:19,670 --> 00:10:28,370 So basically what I'm saying here is if we're in development mode, which we are, then prefix our, 133 00:10:28,730 --> 00:10:34,650 our endpoints with localhost 5000, which is different from what we're using here. 134 00:10:34,650 --> 00:10:36,930 So that's why we're getting a cors error. 135 00:10:36,930 --> 00:10:44,040 So I should actually be able to not even have not, I shouldn't have to prefix it with this because 136 00:10:44,040 --> 00:10:45,600 we're using a proxy. 137 00:10:45,690 --> 00:10:50,910 So I'm not exactly sure why I did that, but let's, let's comment that out. 138 00:10:51,090 --> 00:10:55,620 And actually I want to comment the entire base URL out. 139 00:10:56,390 --> 00:10:59,410 If you weren't using a proxy, then that's what you would do. 140 00:10:59,420 --> 00:11:01,220 But since we are. 141 00:11:01,370 --> 00:11:06,980 Let's go ahead and just set the base URL to nothing, because we don't need it because it's going to 142 00:11:06,980 --> 00:11:08,540 be the same domain. 143 00:11:08,810 --> 00:11:09,380 Right. 144 00:11:09,380 --> 00:11:10,670 So let's try that. 145 00:11:10,670 --> 00:11:11,600 We'll save. 146 00:11:12,350 --> 00:11:13,220 And there we go. 147 00:11:13,220 --> 00:11:14,450 So now it works. 148 00:11:15,260 --> 00:11:17,300 And you can see the loading there. 149 00:11:17,630 --> 00:11:23,990 What I do want to do is, is have a loader, a spinner, But we'll do that in a little bit. 150 00:11:23,990 --> 00:11:26,660 But at least now we're fetching our products. 151 00:11:26,840 --> 00:11:32,090 Now, if I click on a single one, it is fetching, but it's not going through through Redux. 152 00:11:32,090 --> 00:11:35,780 It's still you know, if we look at our product screen, it's still. 153 00:11:36,560 --> 00:11:40,940 Doing it this way with Axios, but we'll get to that. 154 00:11:40,940 --> 00:11:43,280 In fact, we're going to do that in the next video. 155 00:11:43,280 --> 00:11:45,230 But yeah, I think that we're good now. 156 00:11:45,230 --> 00:11:48,920 So just to kind of reiterate, we have our Redux store, right? 157 00:11:48,950 --> 00:11:56,000 That wraps our application, the provider wraps the application, and then we have our API slice, which 158 00:11:56,000 --> 00:12:03,320 you can think of as like the parent for the rest of our API slices, the product order user. 159 00:12:03,320 --> 00:12:05,090 And then we have endpoints. 160 00:12:05,090 --> 00:12:11,660 Now we're not putting any specific endpoints in this parent, but we have our API, our products API 161 00:12:11,690 --> 00:12:17,840 slice, which is injecting endpoints into the main API slice. 162 00:12:17,840 --> 00:12:23,750 That's why we don't have to actually have a reducer here that we bring into our store. 163 00:12:23,750 --> 00:12:30,380 We don't have to add in products API reducer because we're using the API slice. 164 00:12:30,380 --> 00:12:31,790 So I hope that makes sense. 165 00:12:31,790 --> 00:12:38,160 Then we have one endpoint which we called get products and that's going to hit the products URL. 166 00:12:38,160 --> 00:12:41,100 It's a query, so it's going to make a get request. 167 00:12:41,130 --> 00:12:47,850 We're then exporting that query and then in the home screen we're able to use that query to get the 168 00:12:47,850 --> 00:12:52,290 actual data, to get the loading state and to get the error. 169 00:12:52,410 --> 00:12:54,600 And then we're checking that stuff here. 170 00:12:54,600 --> 00:12:56,370 So I hope that that makes sense. 171 00:12:56,370 --> 00:13:01,950 In the next video, we're going to kind of do the same thing, but for the single product page.