1 00:00:01,280 --> 00:00:06,020 We've taken care of everything around bundling on the side of things so we can now go back over to Kozel 2 00:00:06,020 --> 00:00:09,070 and make sure that it eventually calls this bundle cell action creator. 3 00:00:09,470 --> 00:00:14,150 We'll also make sure that the code cell component eventually pulls some information out of our bundles 4 00:00:14,150 --> 00:00:14,870 piece of state. 5 00:00:15,740 --> 00:00:22,310 I'm going to first begin by going back over to our components directory and finding our code cell component. 6 00:00:24,960 --> 00:00:29,970 So inside of here, we've got some local state right here that we really don't need anymore, remember, 7 00:00:29,970 --> 00:00:34,130 this local state was because we were previously doing bundling directly inside this component. 8 00:00:34,680 --> 00:00:40,740 We do not need this local state because now the output code and air from a bundle attempt is going to 9 00:00:40,740 --> 00:00:42,180 be stored inside of our Redock store. 10 00:00:42,750 --> 00:00:46,260 I'm going to first begin by removing both of those used state lines. 11 00:00:47,180 --> 00:00:50,030 I'm also going to clean up the set code and set er. 12 00:00:52,740 --> 00:00:56,040 Next up, we're no longer directly doing bundling inside of here. 13 00:00:57,380 --> 00:01:01,730 So we can remove the CONSED output, a weight bundle inside of that timer stuff. 14 00:01:04,220 --> 00:01:07,520 Now, you might notice that down at the very bottom of the file, we've now got some areas around our 15 00:01:07,520 --> 00:01:09,250 preview component that's totally fine. 16 00:01:09,260 --> 00:01:10,530 We'll fix those up in just a moment. 17 00:01:11,150 --> 00:01:13,850 Let's first make sure that we can restore some functionality. 18 00:01:14,180 --> 00:01:19,610 So we need to make sure that whenever this timer is actually executed after that seven hundred and fifty 19 00:01:19,610 --> 00:01:24,470 millisecond wait, we're going to call our action creator of a bundle that we had just put together 20 00:01:25,010 --> 00:01:29,160 so we can first get access to that action creator by pulling it out of this use actions hook. 21 00:01:29,720 --> 00:01:33,620 So in addition to update Zel, we'll also get create bundle. 22 00:01:35,450 --> 00:01:36,620 Then inside of our timer. 23 00:01:38,140 --> 00:01:40,930 Once the timer elapses, we can call create bundle. 24 00:01:42,120 --> 00:01:48,330 We'll provide our cell ID, which is cell ID number, the cell itself is a prop to this function. 25 00:01:48,980 --> 00:01:49,590 This component. 26 00:01:51,390 --> 00:01:56,100 And the second argument will be the actual code that we want to bundle so that be cell content. 27 00:01:58,070 --> 00:02:03,620 We are making use of cell I.D. inside this use effect function now, and so we probably should add it 28 00:02:03,620 --> 00:02:04,800 to this dependency array. 29 00:02:04,820 --> 00:02:09,259 It is not strictly required per say, but if we don't react, is probably going to complaint at us. 30 00:02:09,259 --> 00:02:14,180 When we start to run this code inside the browser, it's going to add into this dependency array cell. 31 00:02:14,450 --> 00:02:14,820 Edem. 32 00:02:17,350 --> 00:02:21,580 OK, so that should kick off our entire bundling process, but now we need to make sure that we also 33 00:02:21,580 --> 00:02:26,590 go back into our Redock store at some point in time and access the state inside there and try to pull 34 00:02:26,590 --> 00:02:31,200 out the completed bundle or maybe that loading flag or whatever else is necessary. 35 00:02:32,740 --> 00:02:35,260 So for that, I'm going to go back up to the top of my file. 36 00:02:36,510 --> 00:02:41,250 I'm going to add in another important statement right after our existing U.S. actions, one right here 37 00:02:41,640 --> 00:02:44,750 and we'll get our use tight selecter. 38 00:02:45,450 --> 00:02:48,760 Remember, use type selector is defined inside of our Hoke's directory. 39 00:02:49,530 --> 00:02:51,570 This is how we pull state out of our store. 40 00:02:53,070 --> 00:02:57,030 So we will import that from folks use type selector. 41 00:03:04,200 --> 00:03:09,810 Then back down right underneath our U.S. skull, we can call you tight selecter. 42 00:03:12,980 --> 00:03:15,470 We will receive state as the first argument. 43 00:03:16,950 --> 00:03:21,720 And then we were going to essentially dig through that state object and look up the bundle result for 44 00:03:21,720 --> 00:03:22,840 our particular cell. 45 00:03:23,430 --> 00:03:28,140 So that would be something like state dot bundles inside their member. 46 00:03:28,140 --> 00:03:31,160 That is give me that big object that has a bunch of keys inside of it. 47 00:03:31,560 --> 00:03:32,610 So we're going to look up. 48 00:03:33,640 --> 00:03:34,990 Sell ID. 49 00:03:38,210 --> 00:03:43,040 So I'm going to take this entire thing right here or whatever we get back from this, and right now 50 00:03:43,130 --> 00:03:45,860 I'm just going to assign it to a variable that I will call Bundall. 51 00:03:46,890 --> 00:03:49,500 And then I'll do a council log of Bundall for right now. 52 00:03:51,910 --> 00:03:54,970 Before we test this out, I'm going to go back down to our Jesus block. 53 00:03:55,820 --> 00:03:59,320 And for just a moment, I'm going to comment about all this previous stuff. 54 00:04:01,300 --> 00:04:03,620 Is there something I want you to see around this council? 55 00:04:03,770 --> 00:04:08,620 First, all right, before we run this, just one other very quick thing before I forget, let's also 56 00:04:08,620 --> 00:04:10,920 clean up some of the important statements we have up here at the top. 57 00:04:11,200 --> 00:04:16,670 We no longer need to import bundle into this component and we no longer need to import used state either. 58 00:04:17,290 --> 00:04:18,970 We still need a preview inside of here. 59 00:04:19,300 --> 00:04:21,850 It's only kind of faded out because we just commented that thing out. 60 00:04:22,089 --> 00:04:25,720 But we are going to uncommon in just a moment, so don't delete the import for preview. 61 00:04:26,750 --> 00:04:30,020 All right, so let's save this, we'll go back with the browser and see how we're doing. 62 00:04:32,050 --> 00:04:33,250 It's going to do a quick refresh. 63 00:04:35,880 --> 00:04:40,490 All right, there we go right away, we get a couple of warnings to find we can ignore those for now. 64 00:04:41,010 --> 00:04:44,760 More importantly, you'll notice that we have undefined, undefined. 65 00:04:45,640 --> 00:04:50,650 And then eventually we start seeing some consulates logs where there's an actual Bundall object, so 66 00:04:50,650 --> 00:04:54,970 loading true, no code, no error, and then eventually loading goes over to false with some amount 67 00:04:54,970 --> 00:04:55,950 of code and no air. 68 00:04:56,530 --> 00:04:57,580 So what's going on here? 69 00:04:58,210 --> 00:05:00,870 Well, it's not the most confusing thing in the world. 70 00:05:01,000 --> 00:05:03,290 Let's kind of think through what is happening inside your application. 71 00:05:04,090 --> 00:05:10,780 Remember, back inside of our states store index or stored dots file. 72 00:05:12,310 --> 00:05:16,990 So inside the store or where we are creating our store, when our application first boots up, we dispatch 73 00:05:16,990 --> 00:05:19,990 a couple of actions right away to create some default cells. 74 00:05:20,260 --> 00:05:24,190 So we get a default cell of type code, text code and text. 75 00:05:24,860 --> 00:05:29,470 So these cells are created immediately inside of application when everything first puts up. 76 00:05:31,130 --> 00:05:36,410 When we first add in these cells, we do not have any actions being dispatch related to attempting to 77 00:05:36,410 --> 00:05:38,260 create a bundle for them or anything like that. 78 00:05:38,630 --> 00:05:40,640 So our initial bundles reducer. 79 00:05:41,120 --> 00:05:42,130 Here's bundles reducer. 80 00:05:42,260 --> 00:05:45,250 This thing starts off with no data inside of it whatsoever. 81 00:05:45,710 --> 00:05:49,550 It is only once we eventually start to render our application. 82 00:05:50,820 --> 00:05:56,340 Show XL list, which is going to show sell item, which is going to in turn show code sell only when 83 00:05:56,340 --> 00:06:01,050 we start to show these components after that seven hundred and fifty millisecond delay, then we're 84 00:06:01,050 --> 00:06:04,050 going to go ahead and finally call the bundle cell action creator. 85 00:06:04,350 --> 00:06:09,390 And that's when we start to dispatch some actions that are going to add in some state to our bundles 86 00:06:09,390 --> 00:06:10,080 piece of state. 87 00:06:11,250 --> 00:06:15,690 So the whole point here, what I'm trying to say is that for the very first seven hundred and fifty 88 00:06:15,690 --> 00:06:21,240 milliseconds or so that our application is being rendered, we have zero data, no data whatsoever inside 89 00:06:21,240 --> 00:06:22,290 of our bundles reducer. 90 00:06:22,560 --> 00:06:27,390 So when we go inside there and try to look up some very particular bundle for a cell, we get back undefined 91 00:06:27,630 --> 00:06:32,100 as we've not received any actions of type bundle, start or bundle complete just yet. 92 00:06:32,910 --> 00:06:37,470 So that's why we are seeing those initial console logs right here of undefined is because our bundle 93 00:06:37,470 --> 00:06:38,940 reducer totally empty right now. 94 00:06:39,480 --> 00:06:44,310 It's only after that seven hundred and fifty milliseconds that we eventually start to dispatch or I 95 00:06:44,310 --> 00:06:48,270 should say call that action creator of bundle, create or create a bundle. 96 00:06:48,810 --> 00:06:54,660 That thing is going to dispatch the bundle start, which is going to give us some initial object. 97 00:06:55,600 --> 00:07:00,760 Same thing right here says for the second cell, and then eventually, after another millisecond or 98 00:07:00,760 --> 00:07:03,470 so, we finally complete our bundle and dispatch another action. 99 00:07:04,180 --> 00:07:05,290 So here's my point. 100 00:07:05,300 --> 00:07:06,400 Here's the big question. 101 00:07:06,880 --> 00:07:11,510 We're currently getting some undefined values out of our bundle reducer. 102 00:07:12,160 --> 00:07:13,540 Is that something we want to allow? 103 00:07:14,540 --> 00:07:19,760 If we want to allow the US to get some kind of undefined values out of that bundles piece of state, 104 00:07:19,940 --> 00:07:24,560 then we should probably think about updating the type definition of our bundles reducer. 105 00:07:24,560 --> 00:07:28,790 Because right now our type definition is really saying that whenever we look inside of there, we are 106 00:07:28,790 --> 00:07:31,880 always going to get back some kind of defined bundle property. 107 00:07:32,180 --> 00:07:36,320 If I mess up a bundle right now, it's saying that this is always going to be an object of type, blah, 108 00:07:36,320 --> 00:07:36,770 blah, blah. 109 00:07:38,310 --> 00:07:42,090 But it's very clear, based on this council log that that's not always the case, there are going to 110 00:07:42,090 --> 00:07:44,190 be some scenarios where Bundall might be undefined. 111 00:07:44,650 --> 00:07:48,750 So we need to decide whether or not we want to update our type definition to reflect that, or if we 112 00:07:48,750 --> 00:07:53,850 want to try to take some kind of other approach that makes sure that we always get back a defined Bundall 113 00:07:53,850 --> 00:07:54,960 object no matter what. 114 00:07:55,560 --> 00:07:58,710 So long story short, we got a little bit more thinking to do here. 115 00:07:59,190 --> 00:08:01,400 Let's take a pause and address this in just a moment.