1 00:00:01,050 --> 00:00:04,830 Now that we understand the future, we're going to add in let's take a look at a diagram or two and 2 00:00:04,830 --> 00:00:06,810 think about how we're going to do the implementation. 3 00:00:07,500 --> 00:00:07,920 All right. 4 00:00:07,920 --> 00:00:12,000 So first off, quick diagram of what is going on inside of our application right now. 5 00:00:12,540 --> 00:00:18,240 So inside of our code cell component, we take some amount of code from cell number one, two or three, 6 00:00:18,240 --> 00:00:19,920 or however many code cells we have. 7 00:00:20,430 --> 00:00:23,580 We feed them into a bundler and we get back a bundle. 8 00:00:24,060 --> 00:00:27,020 And the bundle that we get back is intended for a very particular cell. 9 00:00:27,570 --> 00:00:31,620 The majority of all this logic is implemented inside of our code cell component. 10 00:00:32,100 --> 00:00:34,680 Let's go back over to our Ed and find where that logic is. 11 00:00:35,750 --> 00:00:37,280 So here's my code subcomponent. 12 00:00:38,740 --> 00:00:44,380 Inside of our U.S. function is where we start to do our bundling and then remember the actual bundling 13 00:00:44,380 --> 00:00:48,790 itself and getting the bundle back into a component is kind of on the side of things. 14 00:00:49,270 --> 00:00:53,660 So all you and I are really doing here is passing off some code to the bundle action creator. 15 00:00:54,430 --> 00:01:00,070 We then eventually get back this bundle by taking a look at some state that is inside of our store. 16 00:01:02,210 --> 00:01:07,460 So as we start to think about somehow taking the code not only from code cell number two, but also 17 00:01:07,460 --> 00:01:12,620 one and using that to produce this output bundle, we're going to just add in a little step to this 18 00:01:12,620 --> 00:01:13,550 entire process. 19 00:01:15,290 --> 00:01:20,570 So before we hand off anything to our bundler, we're going to go through a sort of joining step in 20 00:01:20,570 --> 00:01:24,650 this joining step, we're going to say that whenever we are attempting to bundle code, sell number 21 00:01:24,650 --> 00:01:24,920 one. 22 00:01:25,340 --> 00:01:29,150 Well, in that case, there are no prior cells, no cells before cell number one. 23 00:01:29,300 --> 00:01:32,870 So we're going to take just the code from cell number one and pass it into our bundler. 24 00:01:33,710 --> 00:01:39,980 But as we go on to code cell number two, we need to somehow take the combination of code cell one and 25 00:01:39,980 --> 00:01:41,660 number two and pass it into the bundler. 26 00:01:42,350 --> 00:01:47,930 And then for three, we want to take the combination of one, two and three and pass it into our bundler. 27 00:01:48,590 --> 00:01:50,690 The bundler is going to behave as usual. 28 00:01:50,930 --> 00:01:53,120 It's going to go and try to transplant code. 29 00:01:53,120 --> 00:01:58,400 It's going to bundle all of it, grab dependencies and eventually give us back one single output bundle. 30 00:01:59,160 --> 00:02:03,830 We're still going to communicate these output bundles into our code cell components and then eventually 31 00:02:03,830 --> 00:02:08,449 pass that bundled code down into the preview component where it will be actually executed. 32 00:02:09,699 --> 00:02:15,580 So the big change here is this joining step, and the first question we have to ask ourselves is where 33 00:02:15,580 --> 00:02:17,380 should we write out this joining step? 34 00:02:18,190 --> 00:02:22,840 Well, when we really look at this joining step right here, we are talking about calculating some new 35 00:02:22,840 --> 00:02:23,320 value. 36 00:02:23,470 --> 00:02:29,500 We are joining together multiple different code cells code and essentially we're joining or calculations 37 00:02:29,500 --> 00:02:33,060 value using some existing state inside of our application. 38 00:02:33,430 --> 00:02:39,040 So the existing state is the code inside of each of our code cells because we are calculating a new 39 00:02:39,040 --> 00:02:42,130 value based upon existing data inside of application. 40 00:02:42,460 --> 00:02:47,410 We would refer to all this joint code right here as derived state. 41 00:02:49,050 --> 00:02:53,970 And remember what we have said about Drive State in the past, usually a very good place for drive state 42 00:02:53,970 --> 00:02:59,800 is inside of a selector and very frequently we will place these selectors inside of react components. 43 00:03:00,600 --> 00:03:03,060 So here's what I think we should do to get started. 44 00:03:03,420 --> 00:03:10,320 I think that inside of our code cell component, we should add in a new selector towards the very top 45 00:03:10,320 --> 00:03:12,950 of the component self inside of that selector. 46 00:03:12,990 --> 00:03:19,230 We should try to find the code from the current cell and all the previous cells and join them all together 47 00:03:19,470 --> 00:03:21,270 and essentially do this joining step. 48 00:03:22,360 --> 00:03:26,380 So that's exactly what we're going to do, we're going to add in a selecter to our code cell component. 49 00:03:26,770 --> 00:03:31,690 It's going to take the incoming code that is provided through this cell right here. 50 00:03:32,770 --> 00:03:37,150 And through that and some other state inside of our store, we're going to generate these brand new 51 00:03:37,150 --> 00:03:42,640 kind of cumulative code values, combination of the current sell, plus all the previous cells. 52 00:03:43,860 --> 00:03:46,830 OK, so we've got an idea of how to begin implementing this. 53 00:03:47,010 --> 00:03:50,330 Let's take a pause right here and then start to write out some code in just a moment.