1 00:00:00,830 --> 00:00:04,070 At this point we've got a good idea of how the contest system works. 2 00:00:04,130 --> 00:00:07,710 But you might be a little bit disappointed with my description of context. 3 00:00:07,800 --> 00:00:08,890 And why is that. 4 00:00:09,110 --> 00:00:14,610 Well when context was first released a lot of people said hey we don't have to use redux anymore. 5 00:00:14,720 --> 00:00:20,210 A lot of people saw the contest system as an alternative way of maintaining state and delivering information 6 00:00:20,210 --> 00:00:23,750 to various components inside of a typical re-act application. 7 00:00:23,750 --> 00:00:28,910 Now I don't know about you but as I look at the contest system as we have described it so far I don't 8 00:00:28,910 --> 00:00:31,750 really see a replacement to redux. 9 00:00:31,850 --> 00:00:32,890 Well why is that. 10 00:00:33,050 --> 00:00:39,410 Well keep in mind what redux really does for us redux through the redux library and re-act redux together 11 00:00:39,830 --> 00:00:44,510 provides a way to distribute data to various components throughout our Complan hierarchy. 12 00:00:44,510 --> 00:00:48,250 It gives us a way to centralize all of our data inside of a common store. 13 00:00:48,410 --> 00:00:54,230 And it also provides some means of changing data inside that store by dispatching action creators and 14 00:00:54,230 --> 00:00:56,930 producers and all that kind of good stuff. 15 00:00:56,930 --> 00:01:02,330 When I look at the context system as we've described it so far I don't really see a lot of that functionality 16 00:01:02,690 --> 00:01:05,090 with the context system by itself. 17 00:01:05,090 --> 00:01:10,160 All we really have is a way to distribute data to various components inside of our application. 18 00:01:10,160 --> 00:01:13,600 A way to communicate from a parent component down to each child. 19 00:01:14,000 --> 00:01:20,090 So in this video we're going to start to explore how we can somehow replace redux with the context system 20 00:01:20,390 --> 00:01:25,710 even though it appears that the contex system is far more limited than redux is. 21 00:01:25,910 --> 00:01:30,710 Now I want you to understand that in these coming videos as we start to discuss how to use context as 22 00:01:30,710 --> 00:01:37,470 replays to as a replacement to redux I am not at all advocating dropping redux from any application. 23 00:01:37,610 --> 00:01:42,740 I'm going to tell you how we can use context to replace redux solely that you can understand for your 24 00:01:42,740 --> 00:01:44,240 own personal benefit. 25 00:01:44,240 --> 00:01:49,880 Personally I think that using redux is a tremendous boon to just about every application every non-trivial 26 00:01:49,880 --> 00:01:54,380 application are going to put together and will have a kind of longer discussion on why I feel that and 27 00:01:54,440 --> 00:01:55,330 a little bit. 28 00:01:55,490 --> 00:02:02,420 But right now I just want to give you some ideas on how we can use context in place of redux now as 29 00:02:02,420 --> 00:02:03,310 a first step here. 30 00:02:03,340 --> 00:02:07,730 We're going to do a little refactor to our application that is going to lead us come in more naturally 31 00:02:07,730 --> 00:02:12,700 to understanding how to use context to maintain state inside of a re-act application. 32 00:02:12,710 --> 00:02:18,080 So the first little refactor we're going to do here is to build a separate component called the language 33 00:02:18,140 --> 00:02:19,620 selector component. 34 00:02:19,880 --> 00:02:25,010 This language selector is going to essentially just be the language selector that you see at the top 35 00:02:25,010 --> 00:02:26,220 of the screen right here. 36 00:02:26,600 --> 00:02:31,100 It's going to have a div that says select a language and then the two flags. 37 00:02:31,610 --> 00:02:36,950 Whenever a user clicks on one of those flags we're going to invoke a callback passed from the app component 38 00:02:36,950 --> 00:02:39,500 called on language change. 39 00:02:39,500 --> 00:02:43,760 So we're going to call that callback from the language selector component that's still going to update 40 00:02:43,760 --> 00:02:48,920 some state inside of our app dot J J.S. component where the app component which is still going to communicate 41 00:02:48,920 --> 00:02:51,020 that information down to our field and our button. 42 00:02:51,080 --> 00:02:52,800 Just the same as before. 43 00:02:52,820 --> 00:02:57,790 So right now we're just doing a refactor to extract that selector into a separate component. 44 00:02:57,890 --> 00:03:02,420 And once we do that we'll then have a deeper discussion in how we're going to get context to replace 45 00:03:02,480 --> 00:03:03,560 redux. 46 00:03:03,560 --> 00:03:08,230 All right let's get to it inside of my code editor. 47 00:03:08,250 --> 00:03:13,050 I can't find my complaints directory and I'll make a new file called language selector. 48 00:03:13,110 --> 00:03:13,980 Yes. 49 00:03:14,090 --> 00:03:19,220 And then inside if you're going to create a class based component so I will import re-act from react 50 00:03:19,640 --> 00:03:25,150 or make a class of language selector that extends re-act component. 51 00:03:25,520 --> 00:03:32,070 I'll place my render method and then my export default language selector at the bottom. 52 00:03:32,270 --> 00:03:36,800 Now for the actual markup or GSX that we're going to return from the render method we're just going 53 00:03:36,800 --> 00:03:39,580 to go back over to the uptalk J.S. file. 54 00:03:39,680 --> 00:03:44,840 I'm going to find the div that says select a language and has the two flags inside of it. 55 00:03:44,840 --> 00:03:47,000 I'm going to cut that entire div out. 56 00:03:48,050 --> 00:03:54,050 And then I'll go back over to my render method put down my return and paste the div inside there like 57 00:03:54,050 --> 00:03:57,490 so. 58 00:03:57,540 --> 00:04:02,880 OK so now whenever a user clicks on one of these flags as rendered by the language selector we're going 59 00:04:02,880 --> 00:04:06,340 to try to call this start on language change. 60 00:04:06,390 --> 00:04:09,300 This method does not exist inside the language selector. 61 00:04:09,330 --> 00:04:14,430 Like I said we're going to pass down a prop called on language change that allows language selector 62 00:04:14,430 --> 00:04:18,820 to tell the app component any time that the user clicks on a flag. 63 00:04:18,870 --> 00:04:25,860 So inside of my language selector I'm going to change this not only was changed to be this props on 64 00:04:25,860 --> 00:04:33,750 language when language change for both instances right here and right here then save this file I'll 65 00:04:33,750 --> 00:04:41,220 go back over to the apt G-S file and I'm going to import language selector at the top 66 00:04:46,340 --> 00:04:48,860 once I've got that imported I'll then render it 67 00:04:51,870 --> 00:04:58,450 and I'm going to make sure that I pass a prop into it called on language change and to that prop I'm 68 00:04:58,450 --> 00:05:02,080 going to pass the on language change function that we put together right there. 69 00:05:02,110 --> 00:05:08,740 So this dot on language change. 70 00:05:08,810 --> 00:05:09,250 All right. 71 00:05:09,250 --> 00:05:12,130 So everything we've done so far nothing crazy. 72 00:05:12,130 --> 00:05:15,610 We just extracted a little bit of logic to a separate component. 73 00:05:15,610 --> 00:05:20,020 Any time a user selects the language now it's going to invoke this callback which is still going to 74 00:05:20,020 --> 00:05:23,330 update our language just the same as before. 75 00:05:23,380 --> 00:05:28,260 That's going to give us a new piece of state of language that's going to re render our entire component. 76 00:05:28,450 --> 00:05:32,080 And that's going to get a new value into our language context provider. 77 00:05:32,080 --> 00:05:37,180 So now going to save both these files and then flip back over to my application and just test it out 78 00:05:37,180 --> 00:05:38,120 really quickly. 79 00:05:38,170 --> 00:05:41,970 And as you can see I still have the same functionality as I had before. 80 00:05:42,380 --> 00:05:42,660 OK. 81 00:05:42,670 --> 00:05:44,710 So we've now done this will refactor here. 82 00:05:44,710 --> 00:05:46,110 So let's take another quick pause. 83 00:05:46,210 --> 00:05:51,130 When we come back the next section we're going to continue investigating this idea of replacing redux 84 00:05:51,280 --> 00:05:52,760 with the context system.