1 00:00:01,110 --> 00:00:04,980 ‫Okay, so let's now set up a fake API 2 00:00:04,980 --> 00:00:06,780 ‫on a fake web server 3 00:00:06,780 --> 00:00:10,140 ‫and then use that to load the questions data 4 00:00:10,140 --> 00:00:11,883 ‫into our application. 5 00:00:13,530 --> 00:00:17,430 ‫So this time, we're not going to use a real API, 6 00:00:17,430 --> 00:00:20,640 ‫because I created these questions myself, 7 00:00:20,640 --> 00:00:23,730 ‫and so then there's no API with that. 8 00:00:23,730 --> 00:00:27,000 ‫But I still want to basically pretend 9 00:00:27,000 --> 00:00:30,150 ‫that we are loading these questions from somewhere. 10 00:00:30,150 --> 00:00:33,540 ‫And so therefore, we can create a fake API 11 00:00:33,540 --> 00:00:37,650 ‫using an npm package called json-server. 12 00:00:37,650 --> 00:00:40,650 ‫So let's come here to our terminal. 13 00:00:40,650 --> 00:00:43,353 ‫Create a new tab, basically, here. 14 00:00:44,520 --> 00:00:48,120 ‫So with this, we keep this process here running, 15 00:00:48,120 --> 00:00:50,070 ‫so the one that is running our app. 16 00:00:50,070 --> 00:00:52,410 ‫And then here, we have another terminal. 17 00:00:52,410 --> 00:00:55,590 ‫Just make sure that we are in the correct folder. 18 00:00:55,590 --> 00:01:00,437 ‫And then let's do npm install json-server. 19 00:01:04,620 --> 00:01:08,670 ‫And in the meantime, I'm going to get some data here 20 00:01:08,670 --> 00:01:12,030 ‫from the starter data that I forgot to include 21 00:01:12,030 --> 00:01:13,680 ‫at the beginning of this section. 22 00:01:15,180 --> 00:01:16,950 ‫So when you copied the files, 23 00:01:16,950 --> 00:01:20,940 ‫you probably already got this questions.json. 24 00:01:20,940 --> 00:01:23,820 ‫But again, I did forget, actually, 25 00:01:23,820 --> 00:01:25,503 ‫to place this file here earlier. 26 00:01:26,730 --> 00:01:31,730 ‫So let's come here into react-quiz and paste this file here. 27 00:01:33,750 --> 00:01:35,340 ‫Or actually, what I want to do 28 00:01:35,340 --> 00:01:38,013 ‫is to create a new folder out here. 29 00:01:38,880 --> 00:01:41,490 ‫So let's call this folder data. 30 00:01:41,490 --> 00:01:45,570 ‫And please, make the same thing here in your file structure. 31 00:01:45,570 --> 00:01:47,280 ‫So creating a new file there, 32 00:01:47,280 --> 00:01:52,280 ‫and then let's move this questions.json file in there. 33 00:01:54,690 --> 00:01:58,323 ‫Okay, so make sure you have that file in that folder. 34 00:01:59,370 --> 00:02:04,080 ‫And in the meantime, this finished running the installation. 35 00:02:04,080 --> 00:02:05,610 ‫And now what we need to do next 36 00:02:05,610 --> 00:02:09,000 ‫in order to be able to call that package, 37 00:02:09,000 --> 00:02:11,760 ‫so to run the json-server command, 38 00:02:11,760 --> 00:02:16,203 ‫we need to add a new npm script here to this file. 39 00:02:18,600 --> 00:02:21,450 ‫So these npm scripts that we have right here 40 00:02:21,450 --> 00:02:24,330 ‫are basically the commands that we write here. 41 00:02:24,330 --> 00:02:29,190 ‫So each time that we write npm start, we are able to do that 42 00:02:29,190 --> 00:02:32,133 ‫because, here, this start command exists. 43 00:02:33,450 --> 00:02:38,130 ‫All right, and so let's now create our own npm script here 44 00:02:38,130 --> 00:02:40,473 ‫with the name of server. 45 00:02:42,090 --> 00:02:43,890 ‫And so what should happen here, then, 46 00:02:43,890 --> 00:02:45,960 ‫is that we want to call, 47 00:02:45,960 --> 00:02:50,103 ‫so we want to basically run the json-server package, 48 00:02:51,330 --> 00:02:53,823 ‫and we want to watch a certain file. 49 00:02:55,151 --> 00:02:59,340 ‫And so that file is going to be our questions data. 50 00:02:59,340 --> 00:03:02,583 ‫And actually, let's take a look at that data here. 51 00:03:04,470 --> 00:03:08,190 ‫So basically, it is just one object 52 00:03:08,190 --> 00:03:10,440 ‫with the questions property. 53 00:03:10,440 --> 00:03:13,290 ‫And then that property has one array. 54 00:03:13,290 --> 00:03:17,610 ‫And so then the array is our usual array of objects. 55 00:03:17,610 --> 00:03:20,640 ‫So each object, then, has a question, the options, 56 00:03:20,640 --> 00:03:22,983 ‫the correct one, and the number of points. 57 00:03:24,840 --> 00:03:27,840 ‫And so this is the file that we now want to watch, 58 00:03:27,840 --> 00:03:30,750 ‫so basically, to create an API from. 59 00:03:30,750 --> 00:03:34,590 ‫And so we just do data, which is the folder, 60 00:03:34,590 --> 00:03:36,443 ‫and then questions.json. 61 00:03:39,570 --> 00:03:42,570 ‫And finally, we also need to specify the port. 62 00:03:42,570 --> 00:03:44,733 ‫Let's say 8000. 63 00:03:45,870 --> 00:03:49,320 ‫And that should be enough to get us going. 64 00:03:49,320 --> 00:03:53,550 ‫So let's do npm run server. 65 00:03:53,550 --> 00:03:55,650 ‫So here, we need to run keywords. 66 00:03:55,650 --> 00:03:59,463 ‫It's not just npm server, but npm run server. 67 00:04:00,600 --> 00:04:03,753 ‫Okay, and so now we should have our API running. 68 00:04:04,650 --> 00:04:07,713 ‫But somehow, I see that, here, it's port 3000. 69 00:04:08,670 --> 00:04:11,520 ‫So here, it's probably all lowercase. 70 00:04:11,520 --> 00:04:12,843 ‫So give that a save. 71 00:04:14,010 --> 00:04:15,303 ‫Close that here. 72 00:04:17,010 --> 00:04:20,490 ‫So it was running, basically, before at the same URL, 73 00:04:20,490 --> 00:04:24,120 ‫so in the same port as our React application. 74 00:04:24,120 --> 00:04:25,593 ‫So let's reload that. 75 00:04:26,430 --> 00:04:27,843 ‫Let's retry this. 76 00:04:29,460 --> 00:04:33,360 ‫And yeah, now it is running on port 8000. 77 00:04:33,360 --> 00:04:38,360 ‫And so we can just copy this URL, change this to 8000, 78 00:04:39,990 --> 00:04:44,310 ‫and, well, then we should see our data here. 79 00:04:44,310 --> 00:04:46,260 ‫But apparently, there was some problem. 80 00:04:47,520 --> 00:04:48,353 ‫So let's see. 81 00:04:48,353 --> 00:04:53,283 ‫Well, now it thinks that it is already in use. 82 00:04:56,250 --> 00:04:59,670 ‫So let's maybe quit our other npm process here as well 83 00:04:59,670 --> 00:05:04,173 ‫and then run npm start again. 84 00:05:05,700 --> 00:05:10,700 ‫And then here, let's run npm run server. 85 00:05:12,150 --> 00:05:14,460 ‫Okay, that's still not working, 86 00:05:14,460 --> 00:05:17,010 ‫so we can just change to any other port. 87 00:05:17,010 --> 00:05:18,600 ‫So this doesn't really matter. 88 00:05:18,600 --> 00:05:21,480 ‫So if, for you, it worked like this, 89 00:05:21,480 --> 00:05:26,480 ‫then just go with that one and change the 8000 to 9000. 90 00:05:28,590 --> 00:05:32,880 ‫And actually, we also need to then add questions, 91 00:05:32,880 --> 00:05:36,030 ‫which is basically the endpoint we are creating here. 92 00:05:36,030 --> 00:05:37,680 ‫And it is called questions 93 00:05:37,680 --> 00:05:41,133 ‫because that is the name here of this field. 94 00:05:42,420 --> 00:05:44,520 ‫So if it was called like this, 95 00:05:44,520 --> 00:05:48,333 ‫then here, we would have to add these two as well. 96 00:05:49,830 --> 00:05:51,420 ‫So now this no longer works, 97 00:05:51,420 --> 00:05:54,453 ‫and our data would be here in this URL. 98 00:05:55,470 --> 00:05:57,870 ‫But of course, that doesn't make a lot of sense, 99 00:05:59,400 --> 00:06:01,080 ‫so let's just use this. 100 00:06:01,080 --> 00:06:02,520 ‫And also, you'll notice 101 00:06:02,520 --> 00:06:05,370 ‫that this is actually just the array. 102 00:06:05,370 --> 00:06:08,283 ‫So here, we see the array is exactly this one. 103 00:06:09,660 --> 00:06:12,120 ‫So let's now grab this URL 104 00:06:12,120 --> 00:06:16,650 ‫and then fetch it into our application. 105 00:06:16,650 --> 00:06:19,770 ‫So we want to load that data on mount. 106 00:06:19,770 --> 00:06:24,513 ‫And so for that, let's use our friend the useEffect hook. 107 00:06:29,250 --> 00:06:32,913 ‫And as I mentioned, let's just run it on mount. 108 00:06:34,500 --> 00:06:37,950 ‫So here, we want to fetch now from this URL. 109 00:06:37,950 --> 00:06:40,050 ‫And here, let's actually not even bother 110 00:06:40,050 --> 00:06:41,580 ‫with an async function. 111 00:06:41,580 --> 00:06:45,693 ‫But let's just use the then method to handle this promise. 112 00:06:46,710 --> 00:06:48,450 ‫So this will give us a response 113 00:06:48,450 --> 00:06:50,913 ‫that we need to convert to JSON, 114 00:06:53,940 --> 00:06:57,360 ‫which will then, in turn, return another promise. 115 00:06:57,360 --> 00:06:59,850 ‫So we chain another then handler there. 116 00:06:59,850 --> 00:07:03,060 ‫And so this should then give us our data. 117 00:07:03,060 --> 00:07:05,853 ‫For now, let's just log that to the console, then. 118 00:07:06,870 --> 00:07:11,560 ‫And also, let's catch a possible error here 119 00:07:12,540 --> 00:07:14,523 ‫by also logging it to the console. 120 00:07:15,960 --> 00:07:18,003 ‫Let's do console.error here. 121 00:07:19,920 --> 00:07:21,333 ‫And just like this. 122 00:07:22,650 --> 00:07:25,713 ‫Okay, so let's actually try that. 123 00:07:27,570 --> 00:07:31,230 ‫So let's reload, come to our console, 124 00:07:31,230 --> 00:07:32,910 ‫and beautiful. 125 00:07:32,910 --> 00:07:34,593 ‫Here is our data. 126 00:07:35,550 --> 00:07:39,030 ‫But now, of course, we will at one point 127 00:07:39,030 --> 00:07:42,030 ‫need to display that data here in the UI. 128 00:07:42,030 --> 00:07:45,720 ‫And so for that, we are going to need state. 129 00:07:45,720 --> 00:07:49,620 ‫And as you can imagine, we will now use the useReducer hook 130 00:07:49,620 --> 00:07:51,543 ‫to create that state. 131 00:07:53,040 --> 00:07:54,393 ‫So let's do that. 132 00:07:55,290 --> 00:07:58,980 ‫So here, we will get the state object 133 00:07:58,980 --> 00:08:02,958 ‫and the dispatch function, remember? 134 00:08:02,958 --> 00:08:07,958 ‫And then we use our useReducer hook, 135 00:08:08,190 --> 00:08:11,163 ‫which was an edit here to the imports. 136 00:08:12,030 --> 00:08:14,700 ‫And here, we passed the initial state, 137 00:08:14,700 --> 00:08:16,170 ‫which we don't have yet, 138 00:08:16,170 --> 00:08:18,930 ‫but we will create this object in a second. 139 00:08:18,930 --> 00:08:21,993 ‫And actually, first, we pass in the reducer function, 140 00:08:23,190 --> 00:08:25,200 ‫which we also don't have yet. 141 00:08:25,200 --> 00:08:27,000 ‫And so let's create both of them 142 00:08:27,000 --> 00:08:29,313 ‫outside, here, of this component. 143 00:08:30,300 --> 00:08:35,143 ‫So initialState and the reducer, 144 00:08:37,830 --> 00:08:41,680 ‫which will take in, remember, the current state 145 00:08:42,960 --> 00:08:45,963 ‫and the action that was dispatched. 146 00:08:47,400 --> 00:08:48,930 ‫Okay. 147 00:08:48,930 --> 00:08:52,470 ‫And now let's start by creating our initialState. 148 00:08:52,470 --> 00:08:56,160 ‫And here, let's create questions, 149 00:08:56,160 --> 00:08:59,580 ‫which, by default, will just be an empty array. 150 00:08:59,580 --> 00:09:03,720 ‫Now, besides this, what we also want is the loading state, 151 00:09:03,720 --> 00:09:07,590 ‫so to tell the user that questions are being fetched. 152 00:09:07,590 --> 00:09:11,280 ‫However, this time around, we will do it in a different way. 153 00:09:11,280 --> 00:09:15,600 ‫So we will not create the isLoading state as always. 154 00:09:15,600 --> 00:09:20,163 ‫But instead, we will this time have a status state. 155 00:09:21,630 --> 00:09:24,360 ‫And so this status will basically be a string 156 00:09:24,360 --> 00:09:26,910 ‫of the current status of the application 157 00:09:26,910 --> 00:09:29,520 ‫that will change throughout time. 158 00:09:29,520 --> 00:09:30,450 ‫So in the beginning, 159 00:09:30,450 --> 00:09:33,660 ‫our application will be in the loading state. 160 00:09:33,660 --> 00:09:34,860 ‫But throughout time, 161 00:09:34,860 --> 00:09:38,010 ‫we will be able to be in different states. 162 00:09:38,010 --> 00:09:41,610 ‫So let me write them right here immediately. 163 00:09:41,610 --> 00:09:44,100 ‫So we can be in loading state. 164 00:09:44,100 --> 00:09:46,560 ‫We can be in an error state. 165 00:09:46,560 --> 00:09:48,960 ‫We can be in a ready state 166 00:09:48,960 --> 00:09:53,960 ‫once the data has arrived and we are ready to start a quiz. 167 00:09:54,090 --> 00:09:56,280 ‫We can be in an active state 168 00:09:56,280 --> 00:09:58,950 ‫once the quiz is actually running. 169 00:09:58,950 --> 00:10:02,913 ‫And we can be in a finished state once the quiz is finished. 170 00:10:04,110 --> 00:10:05,400 ‫Okay. 171 00:10:05,400 --> 00:10:07,770 ‫And so this is a bit of a nicer way 172 00:10:07,770 --> 00:10:10,470 ‫of handling all these different statuses 173 00:10:10,470 --> 00:10:12,450 ‫that the application can be in. 174 00:10:12,450 --> 00:10:16,350 ‫So instead of having isLoading or isError 175 00:10:16,350 --> 00:10:21,350 ‫or isReady or isActive states, we just have the status. 176 00:10:21,390 --> 00:10:23,340 ‫And then inside the status, 177 00:10:23,340 --> 00:10:26,730 ‫we then tell the application what is currently going on. 178 00:10:26,730 --> 00:10:29,550 ‫So this has nothing to do with useReducer. 179 00:10:29,550 --> 00:10:31,980 ‫It's just another technique. 180 00:10:31,980 --> 00:10:35,850 ‫But anyway, let's now come here to our reducer function. 181 00:10:35,850 --> 00:10:39,090 ‫And then let's again set up that switch statement 182 00:10:39,090 --> 00:10:40,653 ‫that we already saw earlier. 183 00:10:41,850 --> 00:10:44,070 ‫So this is now basically a recipe 184 00:10:44,070 --> 00:10:47,580 ‫that you will always follow, which is always the same, 185 00:10:47,580 --> 00:10:49,980 ‫so at least the setup here. 186 00:10:49,980 --> 00:10:54,513 ‫So we switch the action.type. 187 00:10:55,380 --> 00:10:58,563 ‫So we basically want to test for different types. 188 00:10:59,790 --> 00:11:04,087 ‫And let's start with the case of dataReceived. 189 00:11:06,720 --> 00:11:10,080 ‫So this will be the action that we're going to dispatch 190 00:11:10,080 --> 00:11:13,890 ‫right here as soon as we actually have the data, 191 00:11:13,890 --> 00:11:14,793 ‫so right here. 192 00:11:15,780 --> 00:11:17,643 ‫And actually, let's do that first. 193 00:11:18,810 --> 00:11:23,460 ‫So here, we will now no longer log the data to the console. 194 00:11:23,460 --> 00:11:27,333 ‫But instead, we will dispatch an action to the reducer. 195 00:11:29,220 --> 00:11:33,750 ‫And let's create our common usual event here, 196 00:11:33,750 --> 00:11:36,753 ‫so that's simply with the type. 197 00:11:37,830 --> 00:11:42,830 ‫And so that's the dataReceived type, 198 00:11:42,930 --> 00:11:46,140 ‫which we can also think of, of an event. 199 00:11:46,140 --> 00:11:47,850 ‫So basically, it's like, here, 200 00:11:47,850 --> 00:11:51,270 ‫we are now creating this dataReceived event, 201 00:11:51,270 --> 00:11:53,943 ‫which our reducer will then, basically, respond to. 202 00:11:55,620 --> 00:11:57,300 ‫So that's the first part. 203 00:11:57,300 --> 00:11:59,730 ‫And now here we also need a payload 204 00:11:59,730 --> 00:12:03,120 ‫because we want to actually send some data, 205 00:12:03,120 --> 00:12:06,420 ‫so send some information to the reducer 206 00:12:06,420 --> 00:12:08,640 ‫so that the reducer can then use this 207 00:12:08,640 --> 00:12:10,563 ‫to compute the next state. 208 00:12:11,501 --> 00:12:14,550 ‫And so here, that payload will be the data 209 00:12:14,550 --> 00:12:15,783 ‫that we just received. 210 00:12:17,910 --> 00:12:19,410 ‫Okay. 211 00:12:19,410 --> 00:12:21,240 ‫And so here, then, remember, 212 00:12:21,240 --> 00:12:24,960 ‫we need to return a new state object. 213 00:12:24,960 --> 00:12:28,023 ‫And so we will grab all the current state. 214 00:12:29,760 --> 00:12:31,920 ‫And then we will set questions 215 00:12:31,920 --> 00:12:34,680 ‫to the data that we just received. 216 00:12:34,680 --> 00:12:38,310 ‫So that's action.payload. 217 00:12:38,310 --> 00:12:40,530 ‫But what is really great about this 218 00:12:40,530 --> 00:12:43,620 ‫is that we can now set this other piece of state 219 00:12:43,620 --> 00:12:47,730 ‫that is related to the question or to questions, 220 00:12:47,730 --> 00:12:50,310 ‫and that is the status. 221 00:12:50,310 --> 00:12:53,130 ‫So the status and the questions, many times, 222 00:12:53,130 --> 00:12:55,290 ‫will change at the same time. 223 00:12:55,290 --> 00:12:58,890 ‫And so that's why having a reducer is so useful 224 00:12:58,890 --> 00:13:02,430 ‫because now we can, here, in the same place, 225 00:13:02,430 --> 00:13:07,083 ‫also set the status to ready. 226 00:13:07,950 --> 00:13:11,580 ‫So basically, we updated these two state variables, 227 00:13:11,580 --> 00:13:13,380 ‫so these two pieces of state, 228 00:13:13,380 --> 00:13:17,160 ‫all in one go, in this one dispatch. 229 00:13:17,160 --> 00:13:20,730 ‫So just by dispatching this one event right here, 230 00:13:20,730 --> 00:13:24,030 ‫we updated both the questions and the status. 231 00:13:24,030 --> 00:13:27,180 ‫And so we say that we transitioned to a new state 232 00:13:27,180 --> 00:13:30,843 ‫by simply dispatching this simple event here. 233 00:13:33,210 --> 00:13:37,533 ‫Okay, but anyway, let's also create, then, our default case. 234 00:13:39,990 --> 00:13:42,330 ‫And so here, we will, just like before, 235 00:13:42,330 --> 00:13:47,330 ‫throw a new error saying that the action is unknown. 236 00:13:51,330 --> 00:13:56,330 ‫So give this a save, and let's see what happens. 237 00:13:57,720 --> 00:14:00,000 ‫So we are no longer logging to the console, 238 00:14:00,000 --> 00:14:04,710 ‫but we should now have those questions in our state already. 239 00:14:04,710 --> 00:14:06,870 ‫So we can't see it on the UI yet, 240 00:14:06,870 --> 00:14:09,843 ‫but let's take a look at our dev tools. 241 00:14:10,890 --> 00:14:13,470 ‫And yeah. 242 00:14:13,470 --> 00:14:15,720 ‫We have our questions in the state, 243 00:14:15,720 --> 00:14:20,280 ‫and the status has also successfully been changed to ready. 244 00:14:20,280 --> 00:14:23,040 ‫So we transitioned to this new state 245 00:14:23,040 --> 00:14:27,603 ‫where we changed these two properties of our state object. 246 00:14:28,950 --> 00:14:31,050 ‫So that's working great. 247 00:14:31,050 --> 00:14:35,013 ‫And now let's just create another event here, basically, 248 00:14:36,600 --> 00:14:38,613 ‫for the case there is an error. 249 00:14:40,410 --> 00:14:43,193 ‫So case dataFailed, for example, 250 00:14:46,650 --> 00:14:48,303 ‫that's just one possible name. 251 00:14:50,370 --> 00:14:53,853 ‫And so here, let's again return the entire state, 252 00:14:54,690 --> 00:14:59,690 ‫and then we simply set the status here to error. 253 00:15:01,470 --> 00:15:03,630 ‫And so then, later on, we will use, 254 00:15:03,630 --> 00:15:06,750 ‫of course, the status to display different things 255 00:15:06,750 --> 00:15:10,410 ‫here in our UI, in the JSX. 256 00:15:10,410 --> 00:15:13,650 ‫So when there is an error, we will display that error. 257 00:15:13,650 --> 00:15:17,190 ‫And if we are ready, so if the status is ready, 258 00:15:17,190 --> 00:15:19,113 ‫then we will display the questions. 259 00:15:19,950 --> 00:15:24,693 ‫All right, but now let's actually dispatch that action. 260 00:15:28,770 --> 00:15:33,450 ‫So the type is, this time, dataFailed. 261 00:15:33,450 --> 00:15:36,930 ‫And here, actually, let's not pass in any payload 262 00:15:36,930 --> 00:15:39,750 ‫because we're not really interested in the error 263 00:15:39,750 --> 00:15:41,220 ‫that we're going to receive. 264 00:15:41,220 --> 00:15:44,730 ‫So all we will do is tell our state 265 00:15:44,730 --> 00:15:46,923 ‫that now the status is an error. 266 00:15:48,450 --> 00:15:49,920 ‫So just to test this, 267 00:15:49,920 --> 00:15:53,973 ‫let's quit the process here, where we load the data. 268 00:15:55,020 --> 00:15:58,170 ‫So with Control+C, we can finish this. 269 00:15:58,170 --> 00:16:00,720 ‫And so now, we can no longer fetch data 270 00:16:00,720 --> 00:16:03,150 ‫from that endpoint, of course. 271 00:16:03,150 --> 00:16:06,870 ‫And so we see that we get some error already. 272 00:16:06,870 --> 00:16:11,870 ‫And also, here, we see that the status has been set 273 00:16:11,910 --> 00:16:12,743 ‫to error. 274 00:16:14,040 --> 00:16:16,260 ‫So that's also working, but of course, 275 00:16:16,260 --> 00:16:19,743 ‫let's go back to having our API work. 276 00:16:21,090 --> 00:16:23,730 ‫And so if we load now again, 277 00:16:23,730 --> 00:16:27,033 ‫then we have our questions here in the state. 278 00:16:28,050 --> 00:16:31,680 ‫Now, okay, so we did a lot of things, 279 00:16:31,680 --> 00:16:35,490 ‫so let's just quickly recap all that we did. 280 00:16:35,490 --> 00:16:38,490 ‫So we installed the json-server package 281 00:16:38,490 --> 00:16:41,700 ‫to create, basically, this fake API. 282 00:16:41,700 --> 00:16:44,490 ‫And then we created our npm script, 283 00:16:44,490 --> 00:16:48,390 ‫in this case, called server, to then run that package 284 00:16:48,390 --> 00:16:49,470 ‫and then watch the file 285 00:16:49,470 --> 00:16:52,983 ‫where we actually have this questions data as an array, 286 00:16:54,180 --> 00:16:55,920 ‫so this array right here. 287 00:16:55,920 --> 00:16:58,440 ‫And so then here, inside our application, 288 00:16:58,440 --> 00:17:01,860 ‫we use the useEffect hook to fetch that data 289 00:17:01,860 --> 00:17:03,510 ‫on the initial render. 290 00:17:03,510 --> 00:17:06,240 ‫Then, to store that data in state, 291 00:17:06,240 --> 00:17:09,750 ‫this time, we used the useReducer hook. 292 00:17:09,750 --> 00:17:12,600 ‫And so then we created the initial state object 293 00:17:12,600 --> 00:17:14,130 ‫and the reducer. 294 00:17:14,130 --> 00:17:16,830 ‫So that's pretty standard stuff. 295 00:17:16,830 --> 00:17:20,160 ‫So we have the questions array, and we have a status. 296 00:17:20,160 --> 00:17:23,130 ‫And of course, as we keep building the application, 297 00:17:23,130 --> 00:17:26,010 ‫we will add a lot more information here. 298 00:17:26,010 --> 00:17:29,580 ‫So we will add, like, three or four more pieces of state, 299 00:17:29,580 --> 00:17:32,250 ‫but for now, we are just working with these two. 300 00:17:32,250 --> 00:17:37,250 ‫And so then, as soon as our data is successfully fetched, 301 00:17:37,260 --> 00:17:40,710 ‫we dispatch the action here, where we tell our reducer 302 00:17:40,710 --> 00:17:43,920 ‫that the type of the action is dataReceived. 303 00:17:43,920 --> 00:17:47,910 ‫And then as the payload, we pass in the actual data. 304 00:17:47,910 --> 00:17:51,000 ‫And so then our reducer receives that action 305 00:17:51,000 --> 00:17:53,850 ‫and handles it right here, in this case, 306 00:17:53,850 --> 00:17:56,220 ‫where we then assign the payload, 307 00:17:56,220 --> 00:17:59,250 ‫so the data that we received from the API 308 00:17:59,250 --> 00:18:01,497 ‫onto the questions array. 309 00:18:01,497 --> 00:18:04,650 ‫But that's not all, because at the same time, 310 00:18:04,650 --> 00:18:08,580 ‫we now were able to set our status to ready here, 311 00:18:08,580 --> 00:18:10,020 ‫all in one go, 312 00:18:10,020 --> 00:18:14,160 ‫so just with the call of one dispatch function. 313 00:18:14,160 --> 00:18:16,440 ‫Now, the advantage of this reducer is, 314 00:18:16,440 --> 00:18:18,870 ‫of course, not really clear yet 315 00:18:18,870 --> 00:18:21,870 ‫because we only have these two cases yet 316 00:18:21,870 --> 00:18:24,090 ‫and only these two state variables. 317 00:18:24,090 --> 00:18:27,030 ‫But it will become really clear and really helpful 318 00:18:27,030 --> 00:18:28,923 ‫as we go through this section.