1 00:00:00,210 --> 00:00:01,300 I think we're in good shape. 2 00:00:01,680 --> 00:00:07,290 We have initial structure for Douceur, we have actions, our variables. 3 00:00:07,660 --> 00:00:13,280 So I think we can continue in context, jazz, watching our stories. 4 00:00:13,890 --> 00:00:18,270 So we will dispatch that lowering when we invoke fetched stories. 5 00:00:18,660 --> 00:00:26,460 And of course, I would want to set up also my functionality where we're going to use Futch API again 6 00:00:26,670 --> 00:00:28,080 for no particular reason. 7 00:00:28,320 --> 00:00:33,110 I'm just going to use try catch because I would want to catch the error. 8 00:00:33,120 --> 00:00:39,100 Of course, I'm going to go with a log and then error and then in the try block we're going to go with 9 00:00:39,100 --> 00:00:39,750 the response. 10 00:00:39,930 --> 00:00:43,800 So Consed responds and that is equal to await. 11 00:00:44,070 --> 00:00:50,820 And of course I can use a wait since we already use async syntax and then we'll go fetch and now we 12 00:00:50,820 --> 00:00:52,000 want to pass in New York. 13 00:00:52,030 --> 00:00:55,110 So keep in mind we will construct this. 14 00:00:55,110 --> 00:01:03,270 Yoro here in the U.S. for the time being is just a parameter and I pass it and and of course I'm going 15 00:01:03,270 --> 00:01:10,710 to go for my data on the data is equal to it and then a response and dot jasa. 16 00:01:11,070 --> 00:01:18,390 So of course, we want to transform my response and I would want to cancel log the data and now where 17 00:01:18,390 --> 00:01:22,940 I have the use effect because I would want to pass in the euro. 18 00:01:23,730 --> 00:01:28,810 So what is going to be the query and also will the page. 19 00:01:29,190 --> 00:01:36,420 So again, remember, Page was optional, but since will have buttons that control which page we're 20 00:01:36,420 --> 00:01:44,520 getting, I would want to right away add the page to my query so we curl up in the emotional state. 21 00:01:44,820 --> 00:01:46,770 I'm going to add some values. 22 00:01:47,250 --> 00:01:48,990 First of all, there's going to be hit. 23 00:01:49,200 --> 00:01:52,000 Remember, hits is something that we're getting back. 24 00:01:52,000 --> 00:01:55,220 Renschler and for time being, it is just going to be empty, right? 25 00:01:55,620 --> 00:01:57,440 Then we're going to go with some kind of query. 26 00:01:57,750 --> 00:01:59,140 So there's going to be a default query. 27 00:01:59,370 --> 00:02:03,810 In my case, I'm going to go with the react and then two more values. 28 00:02:04,260 --> 00:02:06,150 What is going to be the default page? 29 00:02:06,390 --> 00:02:07,590 And that is going to be zero. 30 00:02:08,220 --> 00:02:12,480 And then also I would want to check what is the number of pages. 31 00:02:12,810 --> 00:02:18,780 And again, the default value will be and be and then pages is equal to zero. 32 00:02:19,020 --> 00:02:24,040 Remember, when we fetch for stories, we have some kind of result. 33 00:02:24,450 --> 00:02:30,510 So how many pages are there in total, which in most cases is going to be, I believe, 50? 34 00:02:31,300 --> 00:02:38,770 So then I save and then we scroll down over here and where we have stories now, I would want to construct 35 00:02:39,190 --> 00:02:40,690 the correct end point. 36 00:02:41,260 --> 00:02:44,350 I have this one that uses search. 37 00:02:44,350 --> 00:02:48,490 And, of course, we need to the query as well as the page. 38 00:02:48,910 --> 00:02:51,320 Of course, by default is going to be zero. 39 00:02:51,640 --> 00:02:59,080 So we scroll down over here, we go back to the template literal and start by accessing the API endpoint. 40 00:02:59,420 --> 00:03:03,880 By the way, this bugs me a little bit, so I'm going to go with API and then underscore endpoint. 41 00:03:03,890 --> 00:03:07,990 So scroll down and I'll change the value over here as well. 42 00:03:08,390 --> 00:03:10,400 API underscore and point. 43 00:03:10,420 --> 00:03:12,720 Now again, you don't have to do that if you don't like it. 44 00:03:13,090 --> 00:03:22,160 And then if you remember we had to have search then question mark and then query and page. 45 00:03:22,270 --> 00:03:23,510 Now if you want to double check that. 46 00:03:23,530 --> 00:03:26,890 Remember when we were constructing the URL here. 47 00:03:27,820 --> 00:03:29,330 Well, that was the pattern, correct? 48 00:03:29,650 --> 00:03:37,360 So we're good and point, then we go with query and in this case, our own axis, of course, the state 49 00:03:37,480 --> 00:03:38,680 value, correct. 50 00:03:38,950 --> 00:03:42,010 So I go state and then query by default. 51 00:03:42,010 --> 00:03:43,900 Of course, that is react. 52 00:03:44,200 --> 00:03:50,600 And then I'm going to do the same thing where I go with and and the page will be equal to that page 53 00:03:50,600 --> 00:03:51,150 is zero. 54 00:03:51,340 --> 00:03:53,530 So that's my default state. 55 00:03:53,800 --> 00:04:01,360 And then page eventually there is going to be a few dependencies here, but for the time being we don't 56 00:04:01,360 --> 00:04:02,190 need to worry about that. 57 00:04:02,620 --> 00:04:03,430 So we save. 58 00:04:03,940 --> 00:04:10,350 And of course now once I can fetch for the stories, then I would want to say, well, what is my data? 59 00:04:10,960 --> 00:04:13,120 So I'm going to navigate to the bigger brother in law. 60 00:04:13,340 --> 00:04:13,590 And. 61 00:04:14,320 --> 00:04:16,230 So this is my response. 62 00:04:16,990 --> 00:04:18,370 It is an array. 63 00:04:18,880 --> 00:04:21,940 It has a value of 20 stories. 64 00:04:22,270 --> 00:04:23,930 Then I have a number of hits. 65 00:04:24,310 --> 00:04:30,320 So what is the total page, which is zero and then number of pages. 66 00:04:30,640 --> 00:04:32,210 So how many pages total. 67 00:04:32,650 --> 00:04:36,230 So now, of course, instead of just logging, I would want to dispatch. 68 00:04:37,060 --> 00:04:39,440 So first I dispatch settlor. 69 00:04:40,000 --> 00:04:40,420 Correct. 70 00:04:40,820 --> 00:04:46,030 Now once I've got my data, I would want to dispatch another action. 71 00:04:46,450 --> 00:04:50,940 And that action, of course, will change the value here in the state. 72 00:04:51,430 --> 00:04:53,050 So initially it is empty. 73 00:04:53,800 --> 00:04:57,630 And now, of course, will set it equal to whatever we're getting back. 74 00:04:57,910 --> 00:05:04,420 But remember, we always, always need to do that through the reducer, meaning we'll have to dispatch 75 00:05:04,420 --> 00:05:09,610 action, will have to pass some data, and then in reducer will change this value. 76 00:05:10,060 --> 00:05:13,820 We're not going to go directly and change this value in this initial state. 77 00:05:14,200 --> 00:05:15,580 So here's what we need to do. 78 00:05:16,030 --> 00:05:17,410 We're going to go with dispatch. 79 00:05:17,620 --> 00:05:18,820 We need to come up with a name. 80 00:05:19,030 --> 00:05:23,850 And my case, I already came up with a name and that one is set stories. 81 00:05:24,340 --> 00:05:27,460 So if you're using variables, just look for this one. 82 00:05:27,640 --> 00:05:28,480 I'm going to scroll down. 83 00:05:29,350 --> 00:05:36,310 Remember, we need to pass in the type first and then we go set stories now the gotcha here is that 84 00:05:36,310 --> 00:05:39,700 there's two things that I would want to add to my state. 85 00:05:40,360 --> 00:05:45,880 Not only I would want to get the hits, but I also would want to see, well, what is the total amount 86 00:05:45,880 --> 00:05:46,420 of pages? 87 00:05:47,350 --> 00:05:54,550 And I want to bring in the number of pages, so here where we have types of stories, I'm going to go 88 00:05:54,550 --> 00:05:56,020 with another property. 89 00:05:56,710 --> 00:06:03,340 So when I'm dispatching, I for sure need to have type property, but I can also add more properties. 90 00:06:03,640 --> 00:06:06,460 So in this case, there's going to be a payload property. 91 00:06:06,910 --> 00:06:12,220 And in that payload property, I'm going to pass in two things that are going to be a property with 92 00:06:12,220 --> 00:06:15,400 the name of it and the value will be data. 93 00:06:15,550 --> 00:06:19,640 And then let's remember, this is what we're getting back from the API. 94 00:06:20,260 --> 00:06:25,270 I have the object that is represented with data and then property holds Mairi. 95 00:06:25,600 --> 00:06:28,440 So I go with data and then DOT hits. 96 00:06:28,840 --> 00:06:31,990 And then also I would want to set up a number of pages. 97 00:06:31,990 --> 00:06:34,630 So comma another property and be. 98 00:06:35,540 --> 00:06:36,030 Pages. 99 00:06:36,050 --> 00:06:41,300 So how many pages total and that is equal to data and then and B pages. 100 00:06:42,130 --> 00:06:48,970 So we set this up and now, of course, we just need to navigate to the producer and handle that action. 101 00:06:49,760 --> 00:06:51,210 So let's do it. 102 00:06:51,800 --> 00:06:54,190 We're going to navigate to producer the moment. 103 00:06:54,190 --> 00:06:57,830 Notice we have a big fat Kopplin said stories, action type. 104 00:06:58,130 --> 00:06:58,760 It's not matching. 105 00:06:59,240 --> 00:07:00,380 Why is it not matching? 106 00:07:00,900 --> 00:07:04,960 Because, of course, we haven't set up the functionality in our producer. 107 00:07:05,210 --> 00:07:07,640 So we have one case for set loading. 108 00:07:08,000 --> 00:07:13,190 And now let's have another one, let's say case and then set stories again. 109 00:07:13,190 --> 00:07:16,520 We just need to look for the same variable name. 110 00:07:16,940 --> 00:07:18,810 And what is going to be the functionality here? 111 00:07:19,040 --> 00:07:24,740 Well, we're going to return the whole state, so I'm going to go with DataDot and then State and I'm 112 00:07:24,740 --> 00:07:27,650 going to start by setting is lowering is false. 113 00:07:27,650 --> 00:07:28,070 Correct. 114 00:07:29,000 --> 00:07:34,010 Because remember, when we go into that loading, of course, we said it's true, but then when I get 115 00:07:34,010 --> 00:07:37,280 my data back to I want loading to be true. 116 00:07:37,560 --> 00:07:41,570 Well, no, because then I would want to display those stories. 117 00:07:41,570 --> 00:07:41,920 Correct. 118 00:07:42,170 --> 00:07:46,640 So we're going to go here with is loading and also equal to false. 119 00:07:47,180 --> 00:07:50,650 And then two things I would want to set up my head. 120 00:07:51,170 --> 00:07:54,820 So instead of this empty array, of course, I would want to have some kind of value. 121 00:07:55,190 --> 00:07:55,560 Correct. 122 00:07:55,850 --> 00:07:59,480 And the second thing is going to be, well, how many pages total? 123 00:07:59,990 --> 00:08:05,270 Because, of course, that will be important later when we have those buttons that look for different 124 00:08:05,270 --> 00:08:05,680 pages. 125 00:08:06,050 --> 00:08:12,200 So introducer, not only we have is loading, will also say that we would want to change the hits and 126 00:08:12,200 --> 00:08:15,950 that one will be equal to action and then payload. 127 00:08:16,160 --> 00:08:22,490 Because remember, in the context when I'm setting up my dispatch, I have little prop.. 128 00:08:22,670 --> 00:08:26,030 It is an object and in that object I have it. 129 00:08:26,360 --> 00:08:30,320 And the number of pages, that's why we got a long way of action. 130 00:08:30,710 --> 00:08:33,560 Payload and the property name was it. 131 00:08:33,890 --> 00:08:40,610 And also in the state, I would want to change the number of pages so and be pages and then we go with 132 00:08:40,610 --> 00:08:46,520 action and payload and of course number of pages. 133 00:08:47,000 --> 00:08:53,220 So for the time being we just change from loading to storage component. 134 00:08:53,420 --> 00:08:54,350 OK, don't worry. 135 00:08:54,560 --> 00:08:58,250 Of course we'll display those stories in the upcoming videos. 136 00:08:58,410 --> 00:09:01,760 What I would want to check right now is my state. 137 00:09:02,120 --> 00:09:09,980 So I'm going to navigate two components and then I have my AMP provider and then by default, we're 138 00:09:09,980 --> 00:09:13,330 going to have array of zero number of pages zero. 139 00:09:13,670 --> 00:09:17,630 But then when we're successful, of course, we change these values. 140 00:09:18,030 --> 00:09:25,370 Now, hit is 20, is loading becomes false and the number of pages becomes 50. 141 00:09:25,850 --> 00:09:28,450 So you can see that these numbers are changing. 142 00:09:28,700 --> 00:09:31,450 Now, of course, we can move on to the next step.