WEBVTT 00:00.000 --> 00:00.330 Okay. 00:00.360 --> 00:04.860 In this part of the course, it's time to start thinking about getting our data back from the API. 00:04.860 --> 00:07.080 And the question is how do we go and get it? 00:07.080 --> 00:11.340 So far we've looked at using JavaScript fetch utility to go and get our data. 00:11.370 --> 00:15.030 I've mentioned before, I do not like that approach to fetching data. 00:15.030 --> 00:20.850 It's very low level, it feels, and we have to make two promise type Len statements to get actually 00:20.850 --> 00:21.660 get the data. 00:21.660 --> 00:26.190 And there's just so many better ways to go ahead and get data from our API. 00:26.280 --> 00:31.620 And the approach we're going to take a look at for this training course is RTK query. 00:31.650 --> 00:35.280 Now this is quite a significant update to the previous version of the course. 00:35.280 --> 00:43.890 The code that I originally wrote, I wrote it literally just before RTK query became part of the Redux 00:43.890 --> 00:50.910 toolkit, but it's been around for a couple of years now, and it's time to make the improvement to 00:50.940 --> 00:58.020 this training course and incorporate it into our code, because it does give us huge benefits for data 00:58.020 --> 00:58.950 fetching. 00:59.310 --> 01:04.670 And I'm just going to briefly explain what it is, why we're going to use it, what it does give us. 01:04.670 --> 01:09.110 And I also just want to show you briefly how we did it before. 01:09.140 --> 01:13.430 RTK query with the original version of the Redux toolkit. 01:13.430 --> 01:17.090 So I just want to point out a few highlights in this documentation. 01:17.450 --> 01:18.980 And they say what is Redux? 01:19.010 --> 01:22.640 The first thing to ask is what is Redux before using the Redux toolkit? 01:22.670 --> 01:25.700 And sure, it's a single store containing global state. 01:25.700 --> 01:30.980 For our application, we've taken a look at dispatching plain object actions to the store when something 01:30.980 --> 01:32.090 happens in the app. 01:32.450 --> 01:37.880 Clicking a button in our counter, for instance, that dispatches an action and we have pure reducer 01:37.880 --> 01:42.350 functions looking at those actions and returning Immutably updated state. 01:42.380 --> 01:43.400 That's what we've got. 01:43.430 --> 01:48.410 And we've used the Redux toolkit, and we briefly mentioned things like action creators. 01:48.410 --> 01:50.000 We didn't look at middleware. 01:50.270 --> 01:55.400 We didn't look at thunk functions that contain sync or async logic with side effects. 01:55.400 --> 02:01.190 And this is the approach that originally we would need to use with a Redux store to make asynchronous 02:01.190 --> 02:08.510 requests to our API, which returns data that we effectively have to wait for coming back. 02:09.080 --> 02:14.360 And I'll just move down because there's a few other things I want to mention inside here. 02:14.360 --> 02:20.450 This is an example of kind of similar to what we've looked at, how we use old fashioned Redux with 02:20.450 --> 02:22.700 lots of the boilerplate inside here. 02:22.850 --> 02:27.980 And Redux toolkit, as I've mentioned, is designed to avoid that. 02:28.010 --> 02:30.170 Now I'm just going to scroll a bit further down. 02:30.170 --> 02:31.700 I do recommend reading this document. 02:31.700 --> 02:34.340 It's quite a lot in here, but why? 02:34.370 --> 02:37.940 They want us to use Redux Toolkit, the maintainers of Redux. 02:37.970 --> 02:45.200 They really don't want us to use Redux as it was before, because they found that a lot of developers 02:45.200 --> 02:49.430 ran into problems using Redux, and they would introduce bugs into their applications because of the 02:49.430 --> 02:51.080 architecture and how it works. 02:51.080 --> 02:54.560 And they created the Redux toolkit to avoid those common mistakes. 02:54.560 --> 02:56.030 And it's really, really good. 02:56.030 --> 03:01.730 But I'm going to keep coming down because there is a certain part where I do want to mention about because 03:01.760 --> 03:04.610 they did include something called RTK query. 03:04.610 --> 03:12.470 And when I mentioned about Thunks needing that, we would need to use to go out and make asynchronous 03:12.470 --> 03:17.450 requests to go and get data from our API to then store it in our global state. 03:17.480 --> 03:20.660 Then we would need to use these things called Thunks. 03:20.660 --> 03:27.710 And the Redux toolkit came with something called a create async thunk that we would need to use to make 03:27.740 --> 03:32.690 a asynchronous request, something where we need to wait for the data to come back. 03:32.690 --> 03:40.070 And this RTK query eliminates the need to write any of these thunks reducers, action creators, or 03:40.070 --> 03:44.510 effect hooks to manage fetching data and tracking loading states. 03:44.540 --> 03:51.830 Now, certain things when it comes to requesting data from an API can traditionally be quite complex. 03:52.400 --> 03:59.900 Things like caching things like managing the loading of what we're doing are all things that we would 03:59.900 --> 04:02.780 previously need to manage ourselves. 04:02.780 --> 04:06.890 But using a tool like Arctic Query eliminates this. 04:07.250 --> 04:13.670 So when I say the previous version of this course, let me go to the equivalent point at the end of 04:13.670 --> 04:20.450 this section that we would have got to if we were using Thunks instead of RTK query. 04:20.450 --> 04:24.170 And I just want to show you the code that we would have to write. 04:24.200 --> 04:26.210 And it's a bit boilerplate. 04:26.750 --> 04:30.890 And this is an example of the fetch products async. 04:30.920 --> 04:35.930 At this point in the course, we're not doing any sorting, filtering, pagination or anything like 04:35.930 --> 04:36.260 that. 04:36.260 --> 04:40.370 We would need this code to go out to our API and go and fetch the data. 04:40.400 --> 04:45.440 Also with this code I used Axios as the data fetching tool. 04:45.470 --> 04:49.340 So some of the code is hidden in this line as well. 04:49.340 --> 04:53.420 There's actually more code that goes and handles getting the data here. 04:53.600 --> 04:54.920 And to catch the errors. 04:54.920 --> 05:00.940 It was also a bit awkward because we would be using the thunk API and we'd have to reject the value, 05:00.940 --> 05:05.230 but not just lists as well, because this is the query that goes out and gets it. 05:05.230 --> 05:10.510 But then in the slice, in the create slice, we would have these extra reducers where we would have 05:10.510 --> 05:14.800 to add these cases for each different element. 05:14.800 --> 05:18.880 So if we were going out to fetch the products, then we would have a pending state. 05:18.880 --> 05:23.560 Whilst we're waiting for the data to come back, we would have a fulfilled state and we'd also have 05:23.560 --> 05:24.550 a rejected state. 05:24.550 --> 05:29.560 So for a single API request, we have all of this code here as well. 05:29.560 --> 05:35.680 So what I'm trying to say is that I didn't love that approach, but it was the approach that was available 05:35.680 --> 05:36.190 at the time. 05:36.190 --> 05:38.320 I originally wrote the code for this course. 05:38.350 --> 05:45.730 Now I'm going to show you a much better approach that gives us more functionality with a lot less code. 05:45.760 --> 05:52.840 And because we installed the Redux toolkit, we already have this functionality. 05:52.870 --> 05:57.760 And I'm just going to go back to the VS code and just clean things up. 05:57.970 --> 06:03.880 And just to demonstrate briefly before we actually get into the thick of creating the code, I'm going 06:03.910 --> 06:07.060 to use the catalog folder for this. 06:07.270 --> 06:09.400 I'm just going to right click and say New File. 06:09.400 --> 06:13.750 And I'm going to say catalog API dot t s. 06:13.900 --> 06:16.480 And just a normal TypeScript file here. 06:16.480 --> 06:20.410 We're not using react inside this file. 06:20.410 --> 06:22.960 This is going to be just a normal TypeScript file. 06:22.960 --> 06:30.790 And Redux and RTK query, they're able to be used with any type of UI framework is not just react that 06:30.790 --> 06:31.420 uses this. 06:31.420 --> 06:33.940 So we can use catalog API TS here. 06:33.940 --> 06:36.130 It's not strictly react related. 06:36.130 --> 06:42.940 What we're doing here and inside here I could say for example, I could say export const and say catalog 06:43.540 --> 06:44.980 API equals. 06:44.980 --> 06:52.120 And then we use the create API function from Redux toolkit query. 06:52.150 --> 06:58.720 And I did say it wasn't specific for react, but there's two versions of the create API, and the one 06:58.720 --> 07:03.460 that we want for a very specific reason that I will explain shortly. 07:03.490 --> 07:08.170 We need to use this one Redux toolkit query react. 07:08.170 --> 07:15.400 So press return and make sure you've got this import inside here that includes react at the end. 07:15.430 --> 07:16.570 Very important. 07:16.570 --> 07:23.170 I lost about half an hour of my time once when I didn't pay attention to what I was importing, and 07:23.170 --> 07:26.080 the thing that I was looking for to work didn't work. 07:26.080 --> 07:29.260 So please do make sure you have it the same as me there. 07:29.260 --> 07:33.910 And then inside here we can start creating our API functionality. 07:33.940 --> 07:39.250 Now, I've been talking for a little while, explaining the whys of what we're doing and why we're going 07:39.280 --> 07:39.670 to do it. 07:39.670 --> 07:42.610 So I'm going to actually start writing the code in the next lesson. 07:42.610 --> 07:48.430 And next we're going to take a look at how we can use this to fetch the data from our API, and use 07:48.430 --> 07:54.100 it to store the data effectively in our store and use it in our react components. 07:54.100 --> 07:56.200 And that's coming up next.