1 00:00:01,340 --> 00:00:05,840 Let's get started on this bundle cell action creator, so we're going to make an action creator that 2 00:00:05,840 --> 00:00:11,200 is going to take in some amount of code and presumably maybe also a cell ID or something like that. 3 00:00:11,600 --> 00:00:15,890 We're then going to start up our bundling process and then we're going to dispatch two separate actions. 4 00:00:16,219 --> 00:00:21,080 One will be bundle start and the other will be bundled complete because we are dispatching two actions 5 00:00:21,080 --> 00:00:22,250 from one action creator. 6 00:00:22,370 --> 00:00:26,560 And we're also going to have some asynchronous code because, of course, bundling is asynchronous. 7 00:00:26,840 --> 00:00:29,750 We're definitely going to have to make use of redux thunk in this case. 8 00:00:30,640 --> 00:00:34,690 So that means let's go back over to our action crater's index file. 9 00:00:35,900 --> 00:00:39,890 Inside of here, we've already got several different action creatures, so this fire is getting pretty 10 00:00:39,890 --> 00:00:40,550 large right now. 11 00:00:40,970 --> 00:00:45,920 If you wanted to, we could definitely split up all these different action creatures into some separate 12 00:00:45,920 --> 00:00:52,190 files in the action creators directory and then re-export them from this index status file that is totally 13 00:00:52,190 --> 00:00:52,610 optional. 14 00:00:52,610 --> 00:00:53,630 You can do it if you want it. 15 00:00:53,630 --> 00:00:57,920 You only have to do that if this file is getting a little bit too large for you just to keep things 16 00:00:57,920 --> 00:00:59,180 really straightforward for you and I. 17 00:00:59,180 --> 00:01:02,180 In this course, I'm going to keep all my different action creators in this one file. 18 00:01:02,360 --> 00:01:06,530 But personally, just between you and me, I really would recommend that you eventually split this file 19 00:01:06,530 --> 00:01:10,070 out into several different files inside the Action Creators directory. 20 00:01:10,250 --> 00:01:11,750 But again, I'm going to leave that up to you. 21 00:01:12,750 --> 00:01:18,420 OK, so once again, we need to make an action crater that is going to use Redux Thunk, we covered 22 00:01:18,420 --> 00:01:22,470 Redux Thunk a little bit ago towards the very start this course when we were first talking about typescript 23 00:01:22,470 --> 00:01:23,340 and redux together. 24 00:01:23,640 --> 00:01:27,960 So just as a very quick reminder, the only real big thing we have to do here is import. 25 00:01:29,410 --> 00:01:36,520 Dispatch from Redux, this right here is a type it describes the type of the dispatch function that 26 00:01:36,520 --> 00:01:39,130 will be provided to our redox think function. 27 00:01:40,350 --> 00:01:45,690 Besides importing dispatch, we're also going to import those two actions we just created that's going 28 00:01:45,690 --> 00:01:46,470 to be our. 29 00:01:48,120 --> 00:01:51,840 When will start action and complete action? 30 00:01:54,480 --> 00:01:59,630 Finally, I'm also going to import our bundle function, which we had to find inside of our bundle directory, 31 00:02:00,300 --> 00:02:06,720 so remember inside there, bundler indexed items, we are eventually exporting that bundle function 32 00:02:07,020 --> 00:02:09,030 as the default expert from this file. 33 00:02:10,280 --> 00:02:15,170 So I'm going to import Bundall from up one, directory up another. 34 00:02:16,100 --> 00:02:18,190 One taller and that's it. 35 00:02:19,710 --> 00:02:21,450 OK, so I think that's all the imports we need. 36 00:02:21,690 --> 00:02:23,220 Let's now go down to the bottom, the file. 37 00:02:24,350 --> 00:02:27,670 Down here at the very bottom, I'm going to export Arnst. 38 00:02:29,140 --> 00:02:30,160 Eight bundle. 39 00:02:31,430 --> 00:02:32,870 So this is our action creator. 40 00:02:35,670 --> 00:02:40,080 I'm going to just assume right now that we're going to call this action creature with two separate arguments, 41 00:02:40,390 --> 00:02:43,800 the first one will be the idea of the cell that we are creating this bundle for. 42 00:02:44,160 --> 00:02:45,360 And that, of course, will be a string. 43 00:02:46,020 --> 00:02:50,090 And then the second argument is going to be our input or whatever user wrote into that code. 44 00:02:50,100 --> 00:02:55,200 Ed, I kind of want to call this code, but we might eventually want to call the result of our bundling 45 00:02:55,200 --> 00:02:55,950 process code. 46 00:02:56,140 --> 00:02:58,560 So I'll just give this a name of input instead. 47 00:02:59,220 --> 00:03:03,130 So input is going to be the actual raw code that a user typed into that code. 48 00:03:03,150 --> 00:03:06,090 Ed, this is what we want to feed into our bundle function. 49 00:03:07,410 --> 00:03:09,600 Then from our function, we'll return. 50 00:03:11,050 --> 00:03:12,010 Another function. 51 00:03:13,270 --> 00:03:15,190 That will be called with dispatch. 52 00:03:16,390 --> 00:03:21,580 We're going to annotate that things type as dispatch and then remember putting those in brackets and 53 00:03:21,580 --> 00:03:22,660 put in action. 54 00:03:23,600 --> 00:03:29,180 Like so and we need to make sure that we actually imported that type, so let's go back to the very 55 00:03:29,180 --> 00:03:30,050 top very quickly. 56 00:03:30,410 --> 00:03:35,960 It looks like we imported separately all these actions, but we never imported the overall action itself. 57 00:03:36,380 --> 00:03:37,190 So I'm going to add in. 58 00:03:38,220 --> 00:03:39,270 Action as well. 59 00:03:39,750 --> 00:03:42,900 Remember, this thing is kind of a combination of all possible actions. 60 00:03:44,930 --> 00:03:47,010 Let's go back down and now that air should be gone. 61 00:03:47,420 --> 00:03:52,280 Yep, very good to remember the entire point of this right here is to just make sure that we can only 62 00:03:52,280 --> 00:03:55,130 call dispatch with an actual real action. 63 00:03:55,130 --> 00:03:59,510 So it must have a valid type that actually exists inside of our app and it must have a valid payload 64 00:03:59,510 --> 00:04:01,070 property to go along with that as well. 65 00:04:01,330 --> 00:04:03,560 That's what this type annotation right here is all about. 66 00:04:04,650 --> 00:04:09,810 OK, so now that we've got the start of our redox thung stuff, let's think about what needs to go on 67 00:04:09,810 --> 00:04:10,400 inside of here. 68 00:04:10,920 --> 00:04:15,450 Well, first off, once again, we probably want to immediately dispatch an action that says, hey, 69 00:04:15,450 --> 00:04:19,470 we're about to bundle this cell so we can update that loading property inside of our reducer. 70 00:04:21,070 --> 00:04:24,340 So the instant we get inside of here, I'm going to dispatch. 71 00:04:25,840 --> 00:04:32,650 An action of type action type Bundall start and then remember, we just put together all the different 72 00:04:32,650 --> 00:04:33,940 payloads and whatnot for this. 73 00:04:34,160 --> 00:04:39,610 So our payload in this case is going to be an object that describes exactly which cell we are about 74 00:04:39,610 --> 00:04:40,150 to bundle. 75 00:04:41,020 --> 00:04:43,090 So we have to provide a cell ID. 76 00:04:44,440 --> 00:04:48,840 So I'd like so and of course, we can just reduce that down to simply sell it. 77 00:04:51,090 --> 00:04:52,380 All right, it's that simple enough. 78 00:04:54,560 --> 00:05:01,730 Then after that, we can kick off our bundling process, so we'll do a contest result equals a weight 79 00:05:02,300 --> 00:05:07,130 bundle and we're going to provide the raw code as an argument. 80 00:05:07,280 --> 00:05:09,290 So that's going to be for us that input right there. 81 00:05:11,820 --> 00:05:16,140 We are making use of the keyword inside this function, so let's make sure that we mark the inclosing 82 00:05:16,140 --> 00:05:17,730 function as async. 83 00:05:20,390 --> 00:05:25,610 Then once we get that result, we can dispatch a second action and this will be our bundle, create 84 00:05:25,640 --> 00:05:27,740 first bundle of complete action. 85 00:05:28,250 --> 00:05:29,750 So we'll do a second dispatch. 86 00:05:31,790 --> 00:05:35,210 With a type of action type, Bundall complete. 87 00:05:37,160 --> 00:05:41,210 And then our payload will describe exactly which cell this is for. 88 00:05:41,450 --> 00:05:42,820 So we'll put in our slide. 89 00:05:44,790 --> 00:05:50,820 Again, we can condense that down to just slide and then remember, an action of type Bundall complete 90 00:05:50,820 --> 00:05:53,070 is also going to have a bundle of property. 91 00:05:53,980 --> 00:05:58,540 If that doesn't sound familiar, remember, we just wrote all this stuff out a moment ago inside of 92 00:05:58,540 --> 00:06:00,820 our actions file, so here's our actions file. 93 00:06:00,970 --> 00:06:06,550 And we had said that a action of type bundle, create or bundle complete would have supplied. 94 00:06:07,430 --> 00:06:09,920 Cold air under that bundle property. 95 00:06:11,120 --> 00:06:12,380 Or bundle property right here. 96 00:06:13,710 --> 00:06:17,010 Is going to be an object that has a code. 97 00:06:18,550 --> 00:06:23,410 And that is going to be coming from results, code and air, which will come from results air. 98 00:06:25,430 --> 00:06:30,050 Naturally, we could do some deal structuring of that result object, or we can really just provide 99 00:06:30,620 --> 00:06:32,840 result directly like so. 100 00:06:35,870 --> 00:06:36,920 OK, so this looks good. 101 00:06:37,650 --> 00:06:40,570 Well, I think that's just about it for this action creator. 102 00:06:40,940 --> 00:06:43,360 So we've just about got everything we need here put together. 103 00:06:43,970 --> 00:06:45,320 So let's take a pause right here. 104 00:06:45,320 --> 00:06:49,940 When we come back, the next video, we can now go back over to our code cell components and make sure 105 00:06:50,000 --> 00:06:55,580 that whenever we've gone past that seven hundred and fifty millisecond or so threshold, we call a section 106 00:06:55,580 --> 00:06:57,680 creator and start up our bundling process.