WEBVTT 00:00.000 --> 00:06.090 Okay, now that we've got the API side of things settled, let's now move on to the client side. 00:06.090 --> 00:11.970 And the first thing we'll do is we'll create a type, and we need to head back to the File Explorer 00:11.970 --> 00:14.850 view inside here to deal with our client application. 00:14.850 --> 00:19.530 So inside the client the source the app and the models folder. 00:19.530 --> 00:22.440 Let's first of all create a type for our basket. 00:22.440 --> 00:26.520 So I'll say new file and say baskets. 00:26.640 --> 00:28.170 Let's go across to postman. 00:28.170 --> 00:30.570 And we'll just go to our get basket method. 00:30.570 --> 00:37.650 And let's just copy the JSON we have inside here so that we can quickly and easily create a type that 00:37.650 --> 00:38.190 we need. 00:38.190 --> 00:45.660 And we'll just head over to Chrome and use that JSON to TS site we used before, and just paste in the 00:45.660 --> 00:53.670 basket JSON that we have and copy the type that it generates for us inside here and paste it into our 00:53.670 --> 00:55.710 baskets. 00:55.950 --> 00:59.880 So once again I'm just going to swap this for types because I kind of prefer them. 00:59.880 --> 01:05.970 And I'm going to swap that for export type basket equals double check what we have for this. 01:05.970 --> 01:07.800 And we've got a basket ID that's a string. 01:07.800 --> 01:10.350 And the items which is an item array. 01:10.350 --> 01:14.220 And they'll also swap this to type and say item equals. 01:14.220 --> 01:19.020 And just double check what we've got for our different properties inside here. 01:19.020 --> 01:21.870 And these all look fine to me. 01:21.870 --> 01:27.150 So next we're going to go across and add a new feature into our client side application. 01:27.150 --> 01:30.540 So inside the features I'm going to create a new file. 01:30.960 --> 01:33.600 And inside here I'm going to say basket. 01:33.630 --> 01:34.740 This is going to be the folder. 01:34.740 --> 01:36.090 So I'll say forward slash. 01:36.090 --> 01:41.460 And we're going to create the fetch request that we need first of all to go out and get things and update 01:41.490 --> 01:42.720 things on our API. 01:42.750 --> 01:47.160 So I'm going to call this basket API dot ts and press return. 01:47.160 --> 01:52.890 And inside this file we can start creating the code that we need so that we can use RTK query to go 01:52.890 --> 01:55.440 and get and update our basket. 01:55.440 --> 02:05.950 So I'll specify export const basket API equals create Creates API that we get from the second option 02:05.950 --> 02:12.580 here, the one with Redux toolkit, query, react, and then open parentheses, open curly brackets. 02:12.580 --> 02:14.980 And the first part is the reducer path. 02:14.980 --> 02:17.740 And I'll specify basket API here. 02:17.770 --> 02:20.410 The next part is the base query we're going to use. 02:20.410 --> 02:23.890 And we're going to use our base query with error handling. 02:23.890 --> 02:25.600 Now that we've set that up. 02:25.720 --> 02:27.880 And then we'll specify the endpoints. 02:27.880 --> 02:33.100 And in here we open parentheses say builder as the arguments. 02:33.100 --> 02:36.820 Then open up parentheses and curly brackets. 02:36.940 --> 02:40.300 And we can define our different endpoints. 02:40.300 --> 02:42.640 I'm going to have one for fetch baskets. 02:42.640 --> 02:45.220 And we'll use builder dot query. 02:46.540 --> 02:49.480 And this is going to return to us a basket. 02:49.480 --> 02:51.280 And it doesn't take any arguments. 02:51.280 --> 02:54.790 So we'll specify void open parentheses curly brackets. 02:54.790 --> 02:59.680 And then we can define our query which is pretty simple for this one just empty parentheses. 02:59.680 --> 03:03.010 And we're going to go to the basket endpoint. 03:03.280 --> 03:07.080 The next one we need is the add basket item. 03:07.080 --> 03:10.440 And this one will use builder. 03:11.130 --> 03:13.290 And we're going to use the other option here. 03:13.290 --> 03:14.940 This is a mutation. 03:14.940 --> 03:17.970 We're changing the states so not a query. 03:17.970 --> 03:20.430 This time we'll use mutation. 03:20.430 --> 03:24.030 And inside here we need to specify what we're going to return from this. 03:24.060 --> 03:27.420 We're going to get a basket back from our API. 03:27.450 --> 03:29.700 So we'll use basket inside here. 03:29.700 --> 03:32.970 And then we need to provide the parameters we're going to use for this. 03:32.970 --> 03:33.960 Now there's two parameters. 03:33.960 --> 03:36.870 There's the product ID and the quantity for this method. 03:36.870 --> 03:43.140 So inside curly brackets because we need to specify this inside an object we'll specify the product 03:43.800 --> 03:47.040 id which is a type of number. 03:47.040 --> 03:51.330 And the quantity which is also a type of number. 03:51.330 --> 03:56.970 And then to the right of the angle brackets we open up parentheses curly brackets. 03:56.970 --> 03:59.340 And then we can define our query. 03:59.340 --> 04:03.120 So slightly different this one because we do need to provide the parameters. 04:03.120 --> 04:11.110 So inside parentheses and then curly brackets will specify the product ID and the quantity. 04:12.610 --> 04:15.250 And then to the right of the parentheses we'll add the arrow. 04:15.280 --> 04:17.500 Open up more parentheses more curly brackets. 04:17.500 --> 04:21.850 And on the next line we can specify the URL. 04:21.850 --> 04:25.750 So slightly different approach to this one because it's not just a simple query. 04:25.780 --> 04:27.340 We need to send up parameters. 04:27.340 --> 04:31.450 And it's not going to be a Get request which is the default when we use a query. 04:31.450 --> 04:35.290 So we also need to specify the method that we're using inside here. 04:35.290 --> 04:41.110 So we need to give it the full options for using a query here. 04:41.110 --> 04:47.110 So we'll specify the URL as one of its properties and inside Backticks here because we need to send 04:47.110 --> 04:55.240 up our product ID and quantity as query string parameters, we'll use Backticks and say baskets and 04:55.240 --> 04:56.860 then question mark. 04:56.860 --> 05:01.150 And then product id equals dollar. 05:01.150 --> 05:05.620 And then we'll pass in the product ID and then we use an ampersand. 05:06.140 --> 05:08.570 And then we'll specify quantity. 05:09.800 --> 05:11.000 Equals. 05:11.000 --> 05:15.800 And then again use dollar curly brackets and specify quantity. 05:15.830 --> 05:21.080 Now this is an easy one to get wrong because there's a huge amount of opportunity to make typos inside 05:21.080 --> 05:21.320 here. 05:21.320 --> 05:23.360 So please do double check your work. 05:23.390 --> 05:31.310 Any tiny little typo will cause this not to work as you expect it, so please double check your work 05:31.310 --> 05:32.540 when using strings. 05:32.570 --> 05:39.860 I know I've mentioned it before, but I do see many, many, many questions in the Q&A about simple 05:39.860 --> 05:45.320 typos as they are a very easy way to introduce problems into what we're doing here. 05:45.320 --> 05:51.710 And the method we're going to use is going to be a post which of course matches the endpoint on our 05:51.740 --> 05:53.210 API controller. 05:53.270 --> 06:02.390 We'll also add another method inside here to remove a basket item, and we'll specify builder and mutation 06:02.390 --> 06:03.170 again. 06:03.170 --> 06:05.390 And we don't get anything back from this method. 06:05.390 --> 06:11.400 So we'll specify void and then in curly brackets we need the products ID which is a number, and the 06:11.400 --> 06:14.100 quantity again which is a number. 06:14.130 --> 06:17.190 And to write the angle bracket parentheses curly brackets. 06:17.190 --> 06:21.270 And we'll add our query here very similar to the one we did above. 06:21.270 --> 06:28.980 We need the product ID and the quantity as the arguments inside this object we'll add the arrow open 06:28.980 --> 06:36.000 parentheses curly brackets, and then the URL we're going to specify here is going to be the same as 06:36.000 --> 06:36.240 this. 06:36.240 --> 06:43.170 So since I'm confident that I have this correct I'm also going to use that in list line to reduce the 06:43.170 --> 06:45.540 possibility of making typos. 06:46.530 --> 06:51.570 Or if I've made a typo in the one I've copied, I've doubled the opportunity to make typos. 06:51.600 --> 06:57.300 And then the method is going to be delete in this one, just like so. 06:57.300 --> 06:59.850 And then we will. 06:59.880 --> 07:08.120 Below this we will export const and we'll use our equals basket API. 07:08.180 --> 07:15.920 And just for now, we'll use the use Fetch basket query. 07:15.950 --> 07:18.710 We'll come back and add the other ones we need when we need them. 07:18.710 --> 07:24.230 But we're going to make use of this one early on and come back and talk about the mutation type of queries 07:24.230 --> 07:25.010 soon. 07:25.040 --> 07:29.840 So the next stop after our basket API we need to open up our store teams. 07:30.440 --> 07:32.900 So let's open this. 07:32.900 --> 07:39.830 And inside here just below the error API I'm going to add the basket API reducer path and to the right 07:39.860 --> 07:43.670 of the square brackets I'm going to say basket API dot reducer. 07:43.670 --> 07:50.240 And because this is an API type of Redux store thing, we need to add this to the middleware as well. 07:50.240 --> 07:54.080 So I'm just going to drop that down because I'm going to start to go off the edge of the screen. 07:54.080 --> 07:55.760 The more of these we add. 07:55.760 --> 08:01.190 And below this one I'll specify basket API dot middleware. 08:01.640 --> 08:02.240 Okay. 08:02.240 --> 08:05.240 So that's our store functionality set up. 08:05.240 --> 08:09.650 And the next thing we'll take a look at is creating our basket components.