1 00:00:01,200 --> 00:00:03,900 ‫Let's now practice the Context API 2 00:00:03,900 --> 00:00:05,853 ‫in this final challenge. 3 00:00:07,200 --> 00:00:11,160 ‫And we are back here to our React Quiz. 4 00:00:11,160 --> 00:00:12,330 ‫So the challenge here 5 00:00:12,330 --> 00:00:15,390 ‫is to create an advanced state management system 6 00:00:15,390 --> 00:00:18,783 ‫with the useReducer hook and the Context API. 7 00:00:19,680 --> 00:00:21,900 ‫So, basically, I want you to imagine 8 00:00:21,900 --> 00:00:24,660 ‫that you are working on this application, 9 00:00:24,660 --> 00:00:26,580 ‫like, in some company, 10 00:00:26,580 --> 00:00:29,760 ‫and then you have been tasked by your project manager 11 00:00:29,760 --> 00:00:32,550 ‫to refactor this whole application here 12 00:00:32,550 --> 00:00:35,940 ‫using the Context API together with the reducer 13 00:00:35,940 --> 00:00:39,000 ‫that we already had in this application. 14 00:00:39,000 --> 00:00:40,320 ‫And so your tasks 15 00:00:40,320 --> 00:00:44,250 ‫are first to duplicate the src folder 16 00:00:44,250 --> 00:00:46,590 ‫that we already had before 17 00:00:46,590 --> 00:00:49,680 ‫to create this src-no-context folder, 18 00:00:49,680 --> 00:00:52,770 ‫so basically containing all our previous code 19 00:00:52,770 --> 00:00:54,573 ‫so that you don't override that. 20 00:00:55,440 --> 00:00:59,100 ‫Of course, you can also use Git for this if you prefer, 21 00:00:59,100 --> 00:01:01,173 ‫but here I just want to keep it simple. 22 00:01:02,040 --> 00:01:04,410 ‫Then next up, you should probably review 23 00:01:04,410 --> 00:01:07,650 ‫how data flows through this application right now 24 00:01:07,650 --> 00:01:11,340 ‫and what kind of props we have to pass. 25 00:01:11,340 --> 00:01:12,330 ‫So by doing that, 26 00:01:12,330 --> 00:01:16,920 ‫you can then maybe identify a small prop drilling problem, 27 00:01:16,920 --> 00:01:19,050 ‫which, again, is quite small, 28 00:01:19,050 --> 00:01:21,900 ‫but we will still try to kind of fix it 29 00:01:21,900 --> 00:01:25,920 ‫in the next step using the Context API. 30 00:01:25,920 --> 00:01:27,540 ‫So in order to do that, 31 00:01:27,540 --> 00:01:29,343 ‫create a new QuizContext, 32 00:01:30,330 --> 00:01:34,770 ‫and you can place it into a QuizContext.js file 33 00:01:34,770 --> 00:01:36,363 ‫like we have been doing before. 34 00:01:37,620 --> 00:01:40,470 ‫So, basically, here in this folder, 35 00:01:40,470 --> 00:01:42,630 ‫you can create QuizContext. 36 00:01:42,630 --> 00:01:43,463 ‫And so there, 37 00:01:43,463 --> 00:01:45,120 ‫you'll then have your context 38 00:01:45,120 --> 00:01:48,210 ‫and also the reducer that we created earlier. 39 00:01:48,210 --> 00:01:49,140 ‫And so with this, 40 00:01:49,140 --> 00:01:52,590 ‫you will create that advanced state management system 41 00:01:52,590 --> 00:01:54,450 ‫that we have also created 42 00:01:54,450 --> 00:01:57,780 ‫in our WorldWise application earlier. 43 00:01:57,780 --> 00:02:01,260 ‫And then also in the same file, just like before, 44 00:02:01,260 --> 00:02:05,220 ‫you create a custom provider component like this 45 00:02:05,220 --> 00:02:07,860 ‫in order to provide all the state that you need 46 00:02:07,860 --> 00:02:09,300 ‫to the application. 47 00:02:09,300 --> 00:02:11,250 ‫And then you can just create a custom hook 48 00:02:11,250 --> 00:02:13,770 ‫so that all the components in the application 49 00:02:13,770 --> 00:02:17,520 ‫can consume that state from the context. 50 00:02:17,520 --> 00:02:21,210 ‫So then, of course, use that hook all over the application 51 00:02:21,210 --> 00:02:24,573 ‫so that you can then delete all the unnecessary props. 52 00:02:25,440 --> 00:02:27,930 ‫Now what's very, very important to note here 53 00:02:27,930 --> 00:02:30,990 ‫is that actually you are going to need some state 54 00:02:30,990 --> 00:02:32,733 ‫right in the App component. 55 00:02:34,110 --> 00:02:37,770 ‫So this state will then no longer live here, of course, 56 00:02:37,770 --> 00:02:42,570 ‫but you'll need that state immediately in this application. 57 00:02:42,570 --> 00:02:43,770 ‫And so what that means 58 00:02:43,770 --> 00:02:46,620 ‫is that this app component itself here 59 00:02:46,620 --> 00:02:51,150 ‫will already need to be inside the context itself. 60 00:02:51,150 --> 00:02:53,490 ‫So remember how earlier I showed you 61 00:02:53,490 --> 00:02:55,710 ‫that here inside the App component, 62 00:02:55,710 --> 00:02:57,840 ‫we couldn't use the custom hook 63 00:02:57,840 --> 00:03:00,330 ‫which consumes the data from the context. 64 00:03:00,330 --> 00:03:01,320 ‫And so that was because 65 00:03:01,320 --> 00:03:05,010 ‫we only provided the context right here. 66 00:03:05,010 --> 00:03:07,950 ‫So to decode, that is in here, 67 00:03:07,950 --> 00:03:10,470 ‫but then we could not use that here 68 00:03:10,470 --> 00:03:12,303 ‫in this app component itself. 69 00:03:13,230 --> 00:03:14,520 ‫So the solution for that 70 00:03:14,520 --> 00:03:19,520 ‫will be to actually include the context inside index.js. 71 00:03:20,970 --> 00:03:23,820 ‫So that's the tricky part. 72 00:03:23,820 --> 00:03:26,130 ‫And here I actually already have the solution, 73 00:03:26,130 --> 00:03:29,010 ‫which is not what I wanted to show you yet, 74 00:03:29,010 --> 00:03:31,980 ‫but maybe it's actually a good idea. 75 00:03:31,980 --> 00:03:34,020 ‫So, again, what you will need to do 76 00:03:34,020 --> 00:03:37,950 ‫is to provide that entire context to the App itself 77 00:03:37,950 --> 00:03:41,243 ‫so that then you can use it in there, okay? 78 00:03:43,620 --> 00:03:48,120 ‫And so that's what I need you to do in this challenge. 79 00:03:48,120 --> 00:03:49,680 ‫Now, I will actually not write 80 00:03:49,680 --> 00:03:51,750 ‫all the code here in this video, 81 00:03:51,750 --> 00:03:54,180 ‫because that's just gonna take too long, 82 00:03:54,180 --> 00:03:57,870 ‫but I will quickly walk you through the changes that I made. 83 00:03:57,870 --> 00:03:59,730 ‫So this is gonna be a great challenge 84 00:03:59,730 --> 00:04:01,350 ‫for you to practice now 85 00:04:01,350 --> 00:04:03,030 ‫really working on your own 86 00:04:03,030 --> 00:04:05,340 ‫on an already existing application 87 00:04:05,340 --> 00:04:09,210 ‫and to significantly refactor the code base. 88 00:04:09,210 --> 00:04:11,580 ‫So please take all the time that you need 89 00:04:11,580 --> 00:04:14,193 ‫and then go ahead and watch my solution. 90 00:04:16,170 --> 00:04:18,540 ‫So welcome back. 91 00:04:18,540 --> 00:04:21,600 ‫Hopefully, that was not a big problem, 92 00:04:21,600 --> 00:04:23,703 ‫but let's now see how I did it. 93 00:04:25,170 --> 00:04:27,420 ‫So, again, I'm not gonna write the code here, 94 00:04:27,420 --> 00:04:28,803 ‫I will just show you. 95 00:04:31,290 --> 00:04:34,710 ‫So here we have the QuizContext.js, 96 00:04:34,710 --> 00:04:37,320 ‫which contains all the initial state, 97 00:04:37,320 --> 00:04:38,700 ‫all the reducer, 98 00:04:38,700 --> 00:04:41,670 ‫and then of course that QuizProvider component 99 00:04:41,670 --> 00:04:43,260 ‫that I mentioned earlier. 100 00:04:43,260 --> 00:04:44,940 ‫And so here is then all the logic 101 00:04:44,940 --> 00:04:47,433 ‫that was before inside App.js, 102 00:04:50,610 --> 00:04:53,850 ‫which we now placed here in this custom Provider. 103 00:04:53,850 --> 00:04:56,340 ‫And so then here is the Provider itself 104 00:04:56,340 --> 00:04:59,220 ‫where we pass all these different state values, 105 00:04:59,220 --> 00:05:01,410 ‫plus the dispatch function, 106 00:05:01,410 --> 00:05:03,120 ‫into the context, 107 00:05:03,120 --> 00:05:05,880 ‫which is quite different to what we did earlier 108 00:05:05,880 --> 00:05:08,400 ‫in the WorldWise application. 109 00:05:08,400 --> 00:05:10,020 ‫So remember how, there, 110 00:05:10,020 --> 00:05:12,330 ‫we didn't pass the dispatch function 111 00:05:12,330 --> 00:05:15,240 ‫but really just the event handler functions. 112 00:05:15,240 --> 00:05:19,320 ‫But that was because we were dealing with asynchronous code, 113 00:05:19,320 --> 00:05:21,510 ‫which here is not the case. 114 00:05:21,510 --> 00:05:22,343 ‫And so here, 115 00:05:22,343 --> 00:05:25,590 ‫we don't need any intermediary event handler functions. 116 00:05:25,590 --> 00:05:27,930 ‫We can simply dispatch this function 117 00:05:27,930 --> 00:05:31,653 ‫so that we can then dispatch events in the components. 118 00:05:32,940 --> 00:05:37,940 ‫But anyway, here we then of course also have our custom hook 119 00:05:38,040 --> 00:05:42,963 ‫and then let's come into our main App component. 120 00:05:45,750 --> 00:05:50,490 ‫So then, here, this component is really nice and clean now. 121 00:05:50,490 --> 00:05:52,440 ‫So all the prop drilling is gone 122 00:05:52,440 --> 00:05:55,800 ‫and, yeah, we don't even need to pass any more props 123 00:05:55,800 --> 00:05:58,263 ‫into any of these components anymore. 124 00:05:59,310 --> 00:06:00,270 ‫And notice, again, 125 00:06:00,270 --> 00:06:04,500 ‫how I mentioned that here we need this status state 126 00:06:04,500 --> 00:06:07,050 ‫and so therefore we need to read some data 127 00:06:07,050 --> 00:06:08,370 ‫out of the context, 128 00:06:08,370 --> 00:06:09,203 ‫which is the reason 129 00:06:09,203 --> 00:06:12,780 ‫why we needed to provide that context right here, 130 00:06:12,780 --> 00:06:17,780 ‫so to the entire application, okay? 131 00:06:18,060 --> 00:06:22,500 ‫And so then all the components are really nicely cleaned up. 132 00:06:22,500 --> 00:06:24,300 ‫So, for example, in this one, 133 00:06:24,300 --> 00:06:27,750 ‫instead of receiving all the props that we received earlier, 134 00:06:27,750 --> 00:06:30,270 ‫we just call our custom hooks 135 00:06:30,270 --> 00:06:32,883 ‫and then we get all the state from there. 136 00:06:33,990 --> 00:06:37,800 ‫Now maybe you run into one small problem here 137 00:06:37,800 --> 00:06:39,540 ‫in this question. 138 00:06:39,540 --> 00:06:41,280 ‫So earlier the question component 139 00:06:41,280 --> 00:06:43,890 ‫received the question prop, 140 00:06:43,890 --> 00:06:47,523 ‫which was computed using the questions and the index. 141 00:06:49,320 --> 00:06:50,913 ‫So if you remember that, 142 00:06:51,780 --> 00:06:54,273 ‫and you just wrote the code, so I'm sure you do. 143 00:06:55,170 --> 00:06:58,293 ‫So where is that? 144 00:07:00,720 --> 00:07:02,100 ‫Now, right here. 145 00:07:02,100 --> 00:07:04,380 ‫So we pass in this questions prop, 146 00:07:04,380 --> 00:07:06,120 ‫which was basically computed 147 00:07:06,120 --> 00:07:10,467 ‫by taking the current question out of the questions array. 148 00:07:10,467 --> 00:07:13,230 ‫Now here, since we no longer pass props, 149 00:07:13,230 --> 00:07:16,179 ‫we need both the questions and the index 150 00:07:16,179 --> 00:07:20,670 ‫so that we can then compute the question right here. 151 00:07:20,670 --> 00:07:21,780 ‫All right? 152 00:07:21,780 --> 00:07:23,670 ‫And maybe here in the options, 153 00:07:23,670 --> 00:07:26,160 ‫if you just deleted all the props, 154 00:07:26,160 --> 00:07:28,320 ‫then you might have run into a problem, 155 00:07:28,320 --> 00:07:30,750 ‫because this component here, actually, 156 00:07:30,750 --> 00:07:35,013 ‫is the only one, I believe, that still needs a prop. 157 00:07:35,910 --> 00:07:37,650 ‫So here inside the question, 158 00:07:37,650 --> 00:07:40,590 ‫we, of course, still pass the current question 159 00:07:40,590 --> 00:07:42,450 ‫into the options component. 160 00:07:42,450 --> 00:07:45,360 ‫And so then it gets the current question from the prop, 161 00:07:45,360 --> 00:07:48,983 ‫but the current answer comes from the context, okay? 162 00:07:51,270 --> 00:07:54,150 ‫So I think this was really, really nice for you 163 00:07:54,150 --> 00:07:55,800 ‫to practice this on your own. 164 00:07:55,800 --> 00:07:57,930 ‫And I'm sure you got this to work 165 00:07:57,930 --> 00:08:00,960 ‫just in the way that I just explained. 166 00:08:00,960 --> 00:08:05,670 ‫But anyway, with this, we wrap up yet another section, 167 00:08:05,670 --> 00:08:09,180 ‫and so hopefully I see you soon in the next one, 168 00:08:09,180 --> 00:08:12,270 ‫which is actually gonna be a bit complicated again, 169 00:08:12,270 --> 00:08:15,990 ‫but, well, that's what we are here for, hopefully. 170 00:08:15,990 --> 00:08:19,263 ‫So get ready, and then I meet you there very soon.