1 00:00:00,810 --> 00:00:05,310 We've got some action types, but together, let's now define a couple of different interfaces inside 2 00:00:05,310 --> 00:00:07,710 of our actions index not file. 3 00:00:08,160 --> 00:00:10,370 So Actions Index starts at the very top. 4 00:00:10,380 --> 00:00:17,100 We will immediately import that action type from up on directory action types. 5 00:00:17,100 --> 00:00:19,050 And I believe that was actually a named export. 6 00:00:19,260 --> 00:00:21,240 So we will need those curly braces on there. 7 00:00:21,970 --> 00:00:26,430 So for each of these different action types, we will create an interface that describes an action that 8 00:00:26,430 --> 00:00:31,230 will eventually be dispatched by one of our action creators and then processed by one of our reducers. 9 00:00:31,980 --> 00:00:35,800 Now, we don't really know a whole lot about what these different actions are all about. 10 00:00:36,150 --> 00:00:41,310 So in other words, what would be the payload of Mousel or delete cell or insert cell before? 11 00:00:41,370 --> 00:00:42,510 What are these payloads? 12 00:00:43,080 --> 00:00:43,960 We don't really know yet. 13 00:00:43,980 --> 00:00:47,790 We don't really have any reasonable idea, but we can probably make a reasonable assumption. 14 00:00:47,910 --> 00:00:51,750 And if nothing else, we can at least put these interfaces together and have a starting point that we 15 00:00:51,750 --> 00:00:53,430 can eventually add to over time. 16 00:00:54,320 --> 00:01:00,260 So inside of our actions file, I'll define one interface for each of these different actions. 17 00:01:01,880 --> 00:01:05,930 So first, I'll do a move, sell action. 18 00:01:07,720 --> 00:01:10,180 We'll do a delete sell action. 19 00:01:12,380 --> 00:01:14,090 And insert cell. 20 00:01:15,550 --> 00:01:19,540 Before action, and that's what we ended up with, right cell before. 21 00:01:20,580 --> 00:01:22,490 And then an update. 22 00:01:22,670 --> 00:01:24,060 So action. 23 00:01:25,260 --> 00:01:30,150 Then for each of these, we know that there are types are probably going to be the respective types 24 00:01:30,300 --> 00:01:31,530 from our action type. 25 00:01:32,160 --> 00:01:37,890 So in other words, the tight property for this interface will probably be action type dot move. 26 00:01:37,910 --> 00:01:41,010 So action type move. 27 00:01:41,010 --> 00:01:41,400 So. 28 00:01:43,720 --> 00:01:48,370 Then for delete, sell action, you guessed it, probably something like action type, dot, delete, 29 00:01:48,370 --> 00:01:48,760 sell. 30 00:01:51,370 --> 00:01:53,860 Action type dot insert cell before. 31 00:01:55,590 --> 00:01:58,250 And action type DOT update. 32 00:01:58,320 --> 00:01:58,590 So. 33 00:01:59,650 --> 00:02:03,520 OK, well, each of those are at this point, these are all kind of like give me things like you probably 34 00:02:03,520 --> 00:02:04,900 could have guessed and gotten this far. 35 00:02:05,270 --> 00:02:08,440 Now we need to start thinking about the payloads for each of these interfaces as well. 36 00:02:09,100 --> 00:02:12,700 Again, if we can't really figure out a reasonable payload just yet, that's totally fine. 37 00:02:12,730 --> 00:02:16,420 Remember, one of the points of TypeScript is to allow us to do refactor very easily. 38 00:02:16,730 --> 00:02:20,740 So I think that right now we can probably just take a guess at what the different payload properties 39 00:02:20,740 --> 00:02:21,310 here should be. 40 00:02:21,520 --> 00:02:25,040 And then if we decide to change it over time, no problem, we'll just come back and change it. 41 00:02:25,750 --> 00:02:27,780 So how about from move cell action? 42 00:02:28,150 --> 00:02:34,090 What would be the payload that would we would want to provide to describe the process of moving a cell 43 00:02:34,090 --> 00:02:34,720 around? 44 00:02:34,930 --> 00:02:37,930 I remember when we say move cell, we're talking about reordering cells here. 45 00:02:37,930 --> 00:02:39,430 So kind of moving them up and down. 46 00:02:40,280 --> 00:02:45,800 Well, maybe we would want to provide an object and describe maybe the idea of the cell that we want 47 00:02:45,800 --> 00:02:48,830 to move and the direction that we want to move it as well. 48 00:02:49,340 --> 00:02:53,780 So maybe this should have an ID and that will be a string, presumably. 49 00:02:53,810 --> 00:02:56,120 So that's going to be the idea, the cell we want to move. 50 00:02:56,340 --> 00:03:00,620 I'm just assuming here that our different cells are going to have IDs because we are going to eventually 51 00:03:00,620 --> 00:03:02,900 have to identify each cell uniquely. 52 00:03:03,860 --> 00:03:08,960 And then maybe we should also have a direction property to say we want to move this up on our list, 53 00:03:08,960 --> 00:03:13,460 so have it appear earlier on the screen or move it down the list and have it appear later? 54 00:03:14,350 --> 00:03:21,250 So for direction, we could probably just make that a string and have it either be up or down. 55 00:03:21,850 --> 00:03:27,970 So if I want to move it up, I want to move it up on my list or have it kind of appear first inside 56 00:03:27,970 --> 00:03:31,870 the browser and down would be if I wanted it to appear later on. 57 00:03:32,700 --> 00:03:35,670 I think that that's probably reasonable for our Mousel action. 58 00:03:36,650 --> 00:03:37,910 Next up is delete cell. 59 00:03:38,120 --> 00:03:41,710 Well, this one, I think we could probably make a really educated guess. 60 00:03:41,720 --> 00:03:45,770 I think that given that we're probably going to say that every cell must have an ID, that's kind of 61 00:03:45,770 --> 00:03:47,470 an assumption that we're kind of making here. 62 00:03:47,870 --> 00:03:51,980 I think that for delete selection, we're probably just going to say that, well, if you want to delete 63 00:03:51,980 --> 00:03:56,510 a cell, just tell us the ID of the cell you want to delete and we'll figure out some way to delete 64 00:03:56,510 --> 00:03:57,320 it or remove it. 65 00:03:57,740 --> 00:04:00,500 So I think that for payload, we're just going to have a string. 66 00:04:00,530 --> 00:04:00,920 That's it. 67 00:04:00,920 --> 00:04:03,530 It'll be just the idea, the cell that we want to delete. 68 00:04:05,890 --> 00:04:07,450 Insert cell before. 69 00:04:08,860 --> 00:04:16,390 Very similarly for our payload here, all we really need to know is probably which cell we want to add 70 00:04:16,390 --> 00:04:17,500 this new one before. 71 00:04:18,010 --> 00:04:20,050 So in this case, we'll probably just be an ID. 72 00:04:20,470 --> 00:04:25,000 So go and find the cell with this ID and create a new cell right before it. 73 00:04:25,360 --> 00:04:26,590 But there's little gotcha here. 74 00:04:26,770 --> 00:04:29,560 Remember, we actually have two types of cells inside of application. 75 00:04:29,560 --> 00:04:31,570 We have code cells and text cells. 76 00:04:31,870 --> 00:04:36,880 So in addition to the ID of the cell, we want to add this new one before we probably also need to know 77 00:04:36,880 --> 00:04:39,160 what type or what kind of cell this is going to be. 78 00:04:39,610 --> 00:04:43,330 So I think that this payload should probably be an object that will have an ID. 79 00:04:43,420 --> 00:04:44,170 There'll be a string. 80 00:04:45,190 --> 00:04:51,580 And there may be a type as well, and this will be either a code cell or a text, so I'm going to say 81 00:04:51,580 --> 00:04:54,400 that it must be a string of either code or text. 82 00:04:55,210 --> 00:04:59,010 Now, this right here, this is something that might get us into trouble eventually. 83 00:04:59,350 --> 00:05:03,370 We are saying very clearly that we're going to eventually have two types of cells inside of our application, 84 00:05:03,370 --> 00:05:04,900 either code or text. 85 00:05:05,350 --> 00:05:10,720 But at some point in time, we might accidentally forget exactly what types we have available to us, 86 00:05:10,720 --> 00:05:11,980 what type of cell we can create. 87 00:05:12,160 --> 00:05:18,520 We might accidentally think that a text cell is called maybe a markdown cell, so we could very easily 88 00:05:18,520 --> 00:05:20,170 kind of make a typo in these strings. 89 00:05:21,190 --> 00:05:26,260 And we would not want to have this kind of precedent of defining these types and just this one single 90 00:05:26,260 --> 00:05:27,520 location, so we might eventually. 91 00:05:27,670 --> 00:05:32,980 Long story short, decide to extract this definition of what types of cells we can have into some other 92 00:05:32,980 --> 00:05:33,520 location. 93 00:05:33,760 --> 00:05:35,590 But that will just be something we think about. 94 00:05:37,400 --> 00:05:40,010 All right, and finally, update sell action. 95 00:05:41,450 --> 00:05:48,020 So very similar to the one we just did, we probably just need the ID of the cell we want to update 96 00:05:48,560 --> 00:05:51,710 and then maybe some new content for it or maybe some new data. 97 00:05:51,740 --> 00:05:56,120 So this would be a code that we want to show in the cell or maybe the markdown that we would show inside 98 00:05:56,120 --> 00:05:56,900 of the text cell. 99 00:05:57,530 --> 00:06:02,000 In either case, it's really maybe content or data or something like that that we would call this. 100 00:06:02,540 --> 00:06:05,210 Maybe we should say that a cell has content. 101 00:06:05,240 --> 00:06:10,720 So the content is a code cells code and content is a text cell's text or essentially markdown. 102 00:06:11,150 --> 00:06:15,530 So we'll say that in addition to being given some idea, the string that we want to update, we'll also 103 00:06:15,530 --> 00:06:16,730 take in some content. 104 00:06:16,730 --> 00:06:20,630 And this will be the new code, the new text or whatever else, or the chosen cell. 105 00:06:21,920 --> 00:06:27,050 OK, so, again, I think that these might not be perfect and there might be some really big mistakes 106 00:06:27,050 --> 00:06:31,310 we have inside of here, but for right now, I think that these are reasonable actions. 107 00:06:32,270 --> 00:06:36,020 Now, the last thing we're going to do is create a new type of the very bottom and export it. 108 00:06:38,050 --> 00:06:44,890 And it will be the union of all four of these different types, so we will do move, sell action. 109 00:06:47,490 --> 00:06:50,490 Or a really union of that's what the single pipe means. 110 00:06:52,170 --> 00:06:55,710 Delete cell action, I'm going to do a copy paste here just to save a little bit of time. 111 00:06:56,870 --> 00:06:59,450 In union with insert cell before. 112 00:07:01,270 --> 00:07:02,530 And update, so. 113 00:07:05,750 --> 00:07:07,280 OK, that looks pretty reasonable. 114 00:07:07,850 --> 00:07:11,420 So, again, if we need to come back and make changes to the stuff and I think that there might definitely 115 00:07:11,420 --> 00:07:14,240 be some places where we do need to make changes, no problem. 116 00:07:14,240 --> 00:07:15,610 We can absolutely take care of that. 117 00:07:15,920 --> 00:07:20,840 But right now, I think that these are all very reasonable assumptions now that we've got our different 118 00:07:20,840 --> 00:07:25,730 action types put together and we've got our different action interfaces now we can start to think about 119 00:07:25,730 --> 00:07:30,830 creating these different reducers, the store itself and eventually our action creators as well.