WEBVTT 00:00.000 --> 00:03.420 Okay, it's time to start thinking about getting the data from our API. 00:03.420 --> 00:10.020 And to do that in a react component, we need to think about synchronizing with effects, and some components 00:10.050 --> 00:12.870 need to synchronize with external systems. 00:12.870 --> 00:18.750 For example, we might want to control a non react component, set up a server connection, etc. but 00:18.780 --> 00:24.630 effects let us run some code after rendering so that we can synchronize our component with some system 00:24.660 --> 00:30.270 outside of react, and our API server is for sure outside of react. 00:30.270 --> 00:35.400 So let's see how we can use a Useeffect to go and fetch data from our API. 00:35.430 --> 00:42.780 So inside here, then let's remove our states and let's remove the two products we have inside here. 00:42.780 --> 00:45.420 And we're going to start off with an empty array. 00:45.420 --> 00:49.950 Let's comment out or not comment out I'll leave the ad product as it is yet. 00:50.580 --> 00:53.580 I'll leave the ad product as it is. 00:53.580 --> 00:56.460 It looks nasty, but it's not going to cause us any issues. 00:56.460 --> 00:59.580 And in fact the red annoys me. 00:59.580 --> 01:06.570 So what we can also specify inside the states and we will be using TypeScript, but just to remove the 01:06.570 --> 01:10.470 annoying warning because if we hover over this warning. 01:10.470 --> 01:11.640 It looks pretty horrible. 01:11.670 --> 01:17.490 We're going to take a look at TypeScript and help you understand these nasty, nasty looking warnings 01:17.940 --> 01:19.860 because they can be pretty ugly. 01:19.860 --> 01:26.010 But if we take a look at the type of thing we're storing inside our usestate, when we do remove the 01:26.010 --> 01:29.670 initial values, then it's got a type of never array. 01:29.850 --> 01:34.650 And let's just give this a type so that the complaints go away. 01:34.650 --> 01:40.620 And to give this a type we open angle brackets and we'll open curly brackets. 01:40.830 --> 01:46.200 And then we can specify a name of type string and a price of type number. 01:46.200 --> 01:52.020 And this should have resolved that problem. 01:52.020 --> 01:55.140 And then we just need to specify that this is an array. 01:55.140 --> 02:00.600 And giving it this type then removes the nasty looking warnings that we had. 02:00.630 --> 02:05.130 Now let's make use of a useeffect and we'll say use effect. 02:05.520 --> 02:07.560 And we open parentheses. 02:07.560 --> 02:11.070 And then we open more parentheses because we supply this use effect. 02:11.070 --> 02:17.670 If we look at the documentation for this then this is an imperative function that can return a cleanup 02:17.670 --> 02:18.150 function. 02:18.180 --> 02:18.510 Okay. 02:18.540 --> 02:22.810 Well that doesn't tell us very much about this, but the way that we use this is we provide this with 02:22.810 --> 02:24.070 a callback function. 02:24.070 --> 02:29.560 So we create parentheses, then the arrow and then curly brackets. 02:30.160 --> 02:33.910 And importantly this function as well. 02:34.180 --> 02:36.820 Although we're not getting any linting help with this. 02:36.820 --> 02:40.600 We do need to specify dependencies but they're not required. 02:40.600 --> 02:46.000 It does say if present, this effect will only activate if the values in the list change. 02:46.270 --> 02:51.130 Okay, so not particularly clear there, but whenever we create a use effect we do need to give this 02:51.160 --> 02:53.350 an array of dependencies. 02:53.350 --> 03:00.850 And when these dependencies change, then the idea is that the use effect runs again to attempt to synchronize 03:00.850 --> 03:03.580 with the external state our API. 03:03.610 --> 03:08.980 Now we're not going to have any dependencies in here, and if we do not have any dependencies, then 03:08.980 --> 03:14.620 this use effect is only going to run once when this component first mounts. 03:14.620 --> 03:20.710 Inside this use effect, let's use a JavaScript fetch function to go and get some data from our API. 03:20.740 --> 03:21.610 So we use fetch. 03:21.610 --> 03:26.890 And then for the time being, I'm just going to hard code the address of our API server. 03:26.890 --> 03:33.040 So that's going to be https localhost colon 5001. 03:33.070 --> 03:36.340 Forward slash API forward slash products. 03:36.910 --> 03:45.310 And then, because the fetch returns a JavaScript promise, we can specify dot. 03:45.340 --> 03:50.200 Then as to what do we want to do when this promise is returned to us. 03:50.650 --> 03:52.690 And we can get hold of the response. 03:52.690 --> 03:59.290 And because this fetch is a JavaScript fetch, then in order to get the data out of this, we need to 03:59.290 --> 04:03.550 use response dot JSON and execute this. 04:03.970 --> 04:07.300 And then this will give us a list of products. 04:07.300 --> 04:12.430 But in order to use that list of products, we need to use Len again. 04:12.430 --> 04:16.270 And then at this point we'll have our products. 04:16.510 --> 04:18.160 In fact, I'll just call it data. 04:18.730 --> 04:26.590 And then we can use our set products method to set the products to what we get back from the API. 04:27.190 --> 04:33.430 Now, just to set your expectations accordingly, this is not going to work, but we can take a look 04:33.460 --> 04:35.140 at why it's not going to work. 04:35.140 --> 04:40.960 If we go back to our browser, Then we're going to get some nasty looking warnings inside here. 04:40.960 --> 04:45.040 But let's just refresh the page and see what has happened. 04:45.100 --> 04:53.710 Now it tells us that access to fetch at https, localhost, etc. from origin has been blocked by a Cors 04:53.710 --> 04:54.340 policy. 04:54.370 --> 04:59.530 No access control allow origin header is present on the requested resource. 04:59.830 --> 05:00.310 Now. 05:00.340 --> 05:08.410 Cors Cross-origin Resource Sharing is a browser security feature that will prevent us from accessing 05:08.410 --> 05:16.600 data if it doesn't have a specific header in the response that allows us to access that data, and this 05:16.600 --> 05:18.340 is controlled by our server side. 05:18.340 --> 05:21.100 So it's something that we need to configure in the API. 05:21.280 --> 05:25.990 Now in the next lesson we're going to do two things really we're going to set up cause which is just 05:25.990 --> 05:28.540 a tiny little tweak on our API. 05:28.570 --> 05:35.230 And we also do not want our API to be running on Https and our client to be running on HTTP. 05:35.260 --> 05:37.300 We want Https for everything. 05:37.300 --> 05:42.790 So we're going to set up both of those things in the next lesson, so that our request to go and get 05:42.790 --> 05:45.010 this data works. 05:45.010 --> 05:47.410 And we'll take a look at that next.