1 00:00:00,750 --> 00:00:04,960 In the last video we started talking about how we could replace redux with the contact system. 2 00:00:05,050 --> 00:00:10,390 Now in general I do not recommend you always try to replace redux with context. 3 00:00:10,390 --> 00:00:15,630 There are still tremendously good reasons to use redux inside of any non-trivial application. 4 00:00:15,790 --> 00:00:19,270 And I will lay out some of those reasons later on inside the series of videos. 5 00:00:19,360 --> 00:00:24,130 I'm only showing you how to make use of context in place of redux because this is kind of a really popular 6 00:00:24,130 --> 00:00:25,640 topic in the community right now. 7 00:00:25,690 --> 00:00:28,730 But again I do not personally recommend you do this. 8 00:00:28,870 --> 00:00:29,470 All right. 9 00:00:29,470 --> 00:00:34,600 So if you want to replace redux with the context system here are some of the big ticket items that we 10 00:00:34,600 --> 00:00:36,090 will need to think about. 11 00:00:36,100 --> 00:00:41,650 First off if we want to use context we'll need to have some way to deliver information to any arbitrary 12 00:00:41,650 --> 00:00:44,480 component inside of our component hierarchy. 13 00:00:44,470 --> 00:00:48,570 Now this box is in green right here because that is pretty much a solved problem. 14 00:00:48,580 --> 00:00:54,130 This is what the context system is all about the context system is about sharing information with any 15 00:00:54,160 --> 00:00:55,450 arbitrary component. 16 00:00:55,450 --> 00:00:58,580 So this is not an issue when using contex. 17 00:00:58,780 --> 00:01:03,910 One of the bigger issues is how we're going to be able to separate our view logic from business logic 18 00:01:04,120 --> 00:01:05,740 when using context. 19 00:01:05,770 --> 00:01:11,350 If you take a look at the AT-AT J.S. file right now this is a component that is very much Mitt Mixing 20 00:01:11,350 --> 00:01:14,910 business logic with the logic. 21 00:01:15,160 --> 00:01:18,720 We've got a single component that maintains the currently selected language. 22 00:01:18,820 --> 00:01:24,710 And I would kind of argue this is somewhat like business logic inside the context of our application. 23 00:01:25,060 --> 00:01:31,720 That component also has some display logic or logic in here as well it renders out a div at some given 24 00:01:31,720 --> 00:01:35,530 class name and it renders out some child components as well. 25 00:01:35,530 --> 00:01:41,860 So at present the outtalk G-S file is mixing view logic with business logic and ideally we would separate 26 00:01:42,130 --> 00:01:44,980 those two types of code into different files. 27 00:01:45,020 --> 00:01:52,120 Ideally In addition once we split out that business logic to some different file we need some way to 28 00:01:52,150 --> 00:01:55,570 break that down into separate individual files. 29 00:01:55,570 --> 00:02:01,230 This is really easy to do with redux remember with redox we create a separate file for each reducer 30 00:02:01,480 --> 00:02:05,840 and we could easily do the same thing for our action creators as well. 31 00:02:05,950 --> 00:02:06,940 So it's redux. 32 00:02:06,940 --> 00:02:10,000 Both these problems are right here not an issue whatsoever. 33 00:02:10,180 --> 00:02:15,100 So we need to think of some way to solve these issues using the context system. 34 00:02:15,130 --> 00:02:18,970 All right so in the next diagram I'm going to show you one way of solving both these problems right 35 00:02:18,970 --> 00:02:19,450 here. 36 00:02:19,570 --> 00:02:24,320 This is not necessarily the best way of doing this or even the only way of doing it. 37 00:02:24,460 --> 00:02:30,350 This is just one possible approach in which we might use the context system in place of redux. 38 00:02:30,380 --> 00:02:33,190 All right so here's one way of doing this. 39 00:02:33,250 --> 00:02:39,460 So my idea would be to extract all the business logic from the component and place it inside of a new 40 00:02:39,460 --> 00:02:44,980 component called the language store the language store would essentially contain all of our business 41 00:02:44,980 --> 00:02:47,590 logic related to the currently selected language. 42 00:02:47,590 --> 00:02:53,450 It would also implement a provider so that it can share that information with different child components. 43 00:02:53,530 --> 00:02:58,960 We would only create one language store component for our entire application so there would be essentially 44 00:02:58,960 --> 00:03:03,580 a single source of truth about what the currently selected language is. 45 00:03:03,620 --> 00:03:06,650 The language store would not only contain the currently selected language. 46 00:03:06,650 --> 00:03:11,870 It would also implement a callback and make that callback available to any of our given components so 47 00:03:11,870 --> 00:03:15,850 that any given opponent can change the currently selected language. 48 00:03:15,840 --> 00:03:21,290 Zele see in this case we've got maybe a callback called like on language change so we would put that 49 00:03:21,290 --> 00:03:27,650 function inside of our context object as well so that the language selector could access that callback 50 00:03:27,650 --> 00:03:33,840 function and change the currently selected language non-language store itself will be a component it's 51 00:03:33,840 --> 00:03:35,130 going to have a render method. 52 00:03:35,130 --> 00:03:40,530 So you could say hey wait this thing is still dealing with some view logic but the render method inside 53 00:03:40,530 --> 00:03:46,320 of here is going to be essentially just the provider by itself and no other elements are going to be 54 00:03:46,320 --> 00:03:47,510 displayed inside of it. 55 00:03:48,260 --> 00:03:52,690 If the language store is just about recording what the currently selected language is not giving us 56 00:03:52,690 --> 00:03:54,520 the ability to change it. 57 00:03:54,820 --> 00:03:55,330 All right. 58 00:03:55,420 --> 00:03:56,560 So let's take a pause right here. 59 00:03:56,590 --> 00:04:00,850 When we come back the next video will start implementing this language store component and we'll see 60 00:04:00,850 --> 00:04:04,890 how this is going to isolate and remove our business logic from the app. 61 00:04:04,900 --> 00:04:08,110 J.S. component so quick pause and I'll see you in just a moment.