1 00:00:00,560 --> 00:00:04,340 In the coming series of videos, we're going to start to do some risk factors to some of the components 2 00:00:04,340 --> 00:00:09,240 we have spent a lot of time on, such as our code cell component and the text editor component. 3 00:00:09,590 --> 00:00:13,430 I first want to make it sure it's really clear exactly what factors we have to do. 4 00:00:13,910 --> 00:00:15,200 So quick diagram or two. 5 00:00:15,950 --> 00:00:18,520 OK, so this is a diagram of our cell list component. 6 00:00:18,800 --> 00:00:24,290 Remember, our cell list is being given an array of cells and then iterates over that list of cells 7 00:00:24,440 --> 00:00:29,270 and creates a separate cell list item and it passes a cell object down to each of them. 8 00:00:29,870 --> 00:00:33,870 The cell list items then in turn create either a code cell or a text editor. 9 00:00:34,280 --> 00:00:35,900 There's just one big problem right now. 10 00:00:36,620 --> 00:00:42,010 These code cell and text ed components are currently functioning by making use of some local state. 11 00:00:42,590 --> 00:00:47,800 So the code cell has a local input piece of state that is whatever user types into the code. 12 00:00:47,810 --> 00:00:50,980 Ed, we don't want to store this local state anymore. 13 00:00:51,260 --> 00:00:54,860 We only had this local state so we could develop these components in isolation. 14 00:00:55,980 --> 00:01:01,200 But now that we've got Redox in play, we're going to start to extract these local pieces of state and 15 00:01:01,200 --> 00:01:06,600 we're going to instead have the code that needs to be shown inside of a code cell and the text that 16 00:01:06,600 --> 00:01:11,620 needs to be shown inside of a text editor, a component come from a cell Propp instead. 17 00:01:12,030 --> 00:01:15,890 So remember, these cell objects have a content property assigned to them. 18 00:01:16,380 --> 00:01:21,540 So we want that content property to be used as the code that we're going to show inside of Code Cell. 19 00:01:21,780 --> 00:01:24,440 And as the text we want to show inside the text editor. 20 00:01:25,290 --> 00:01:27,630 So we need to go into both these components. 21 00:01:28,170 --> 00:01:31,410 We need to make sure that we start to extract these local pieces of state. 22 00:01:31,930 --> 00:01:37,520 We need to make sure that we pass down these cell props and use the values inside them as well. 23 00:01:38,100 --> 00:01:43,800 And then whenever a user starts to change some content inside a code cell or text editor, we, of course, 24 00:01:43,800 --> 00:01:49,560 need to dispatch an action that tells our Reduc store that some piece of data has changed and update 25 00:01:49,560 --> 00:01:51,800 the content property of the appropriate cells. 26 00:01:52,560 --> 00:01:58,380 So long story short, putting this in more simple terms, we really just need to update these components 27 00:01:58,380 --> 00:02:00,930 and bring them into a redux style world. 28 00:02:01,110 --> 00:02:02,100 So let's get to it. 29 00:02:03,670 --> 00:02:08,660 To get started, I'm going to first go over to my cell list item component inside of here. 30 00:02:08,860 --> 00:02:11,830 This is where we show our code cell and the text editor. 31 00:02:12,460 --> 00:02:14,950 Let's first focus just on code cell by itself. 32 00:02:15,590 --> 00:02:22,240 So I'm going to make sure that I provide as a prop the cell object that this code cell is supposed to 33 00:02:22,240 --> 00:02:22,870 be displaying. 34 00:02:24,730 --> 00:02:28,930 We're going to get an error message right away just because Kozel is not set up to receive that PROPP 35 00:02:29,260 --> 00:02:31,870 So of course, let's go back over to our code cell component. 36 00:02:32,440 --> 00:02:33,190 Here it is right here. 37 00:02:34,640 --> 00:02:36,680 And set up a props interface. 38 00:02:37,870 --> 00:02:42,070 So right above the component, I will put together an interface of code cell. 39 00:02:42,950 --> 00:02:43,550 Props. 40 00:02:44,460 --> 00:02:49,950 I'm going to say that this thing should be given a cell object that should be of type cell and remember, 41 00:02:49,950 --> 00:02:54,240 the cell interface is defined inside of our redox subprojects. 42 00:02:55,140 --> 00:03:01,590 So we're going to import the cell interface from up one directory state. 43 00:03:03,950 --> 00:03:09,350 We can then use this interface to put on a type annotation to our components or put in a colon right 44 00:03:09,350 --> 00:03:14,210 there, react FC code cell across. 45 00:03:15,300 --> 00:03:19,800 As soon as we add that in the air message that we just had a moment ago inside of cell list item should 46 00:03:19,800 --> 00:03:20,200 go away. 47 00:03:20,930 --> 00:03:21,600 That looks good. 48 00:03:21,720 --> 00:03:22,830 We can now close this file. 49 00:03:25,730 --> 00:03:30,920 Inside of Kozel, let's first begin by receiving that cell from. 50 00:03:32,760 --> 00:03:38,550 OK, so now we've got the cell coming in, we've also got these three pieces of local state that we 51 00:03:38,550 --> 00:03:39,870 eventually want to remove. 52 00:03:40,380 --> 00:03:43,070 We're going to start to do a little bit of an incremental refactor here. 53 00:03:43,410 --> 00:03:49,920 We're going to start to have our component make use of the cell as a source of input and possibly areas, 54 00:03:49,920 --> 00:03:53,530 possibly code, rather than maintaining these local pieces of state. 55 00:03:53,790 --> 00:03:57,930 So we're going to eventually delete those and replace them with a lot of redox related things. 56 00:03:58,970 --> 00:04:03,740 To get started, we're going to first focus on just making sure that we pull the input number, this 57 00:04:03,740 --> 00:04:06,650 piece of state right here is whatever a user has typed into the code editor. 58 00:04:07,070 --> 00:04:10,580 We're going to pull that value from the cell content property. 59 00:04:10,940 --> 00:04:15,260 And whenever a user makes a change that input and normally we would call that input, we're going to 60 00:04:15,260 --> 00:04:20,540 instead call in action krater that will update our cell definition inside of our store. 61 00:04:22,029 --> 00:04:28,130 That means that we need to both make use of a value out of our cell and we also need to call an action 62 00:04:28,130 --> 00:04:32,140 creator whenever a user changes that input inside the actual code editor. 63 00:04:32,690 --> 00:04:37,130 So because we need to definitely dispatch an action or an action creator, let's make sure that we import 64 00:04:37,130 --> 00:04:41,900 that helper that we just put together that use actions at the very top. 65 00:04:42,790 --> 00:04:45,700 So we'll get that from our Hooke's use actions file. 66 00:04:49,490 --> 00:04:56,930 Well, then get our update cell action creator by calling use actions, and then if you don't quite 67 00:04:56,930 --> 00:05:02,510 remember our update, cell action creator makes arguments of the idea of the cell we want to update 68 00:05:02,690 --> 00:05:03,920 and the new content for it. 69 00:05:04,710 --> 00:05:09,170 So we'll go and find wherever we are currently updating the input piece of states and instead we will 70 00:05:09,170 --> 00:05:10,310 call updates cell. 71 00:05:11,750 --> 00:05:13,010 So I'm going to scroll down a little bit. 72 00:05:14,110 --> 00:05:15,200 Here's our code editor. 73 00:05:15,220 --> 00:05:17,410 This is where we were updating that input piece of St.. 74 00:05:19,300 --> 00:05:20,470 So we're going to instead. 75 00:05:21,550 --> 00:05:29,920 Replace that and call update cell with cell ID and the new value that we want to use for the cell. 76 00:05:34,180 --> 00:05:34,750 That looks good. 77 00:05:35,110 --> 00:05:39,460 Next thing we need to do, we need to make sure that we do not use the input piece of state anymore 78 00:05:39,820 --> 00:05:42,220 input piece of state is used in two locations. 79 00:05:42,520 --> 00:05:48,790 It's used inside this use effect function, both as a input to our bundler and as a dependency down 80 00:05:48,790 --> 00:05:49,330 here as well. 81 00:05:50,140 --> 00:05:55,030 We're also making use of input or we should anyway's where the initial value of our code editor. 82 00:05:56,080 --> 00:05:59,980 So in all three locations, rather than taking a look at the input piece of states, we're going to 83 00:05:59,980 --> 00:06:04,870 use these cells content property, which remember is the actual code that a user is typing into the 84 00:06:04,870 --> 00:06:05,590 code editor. 85 00:06:06,410 --> 00:06:11,860 So as an input to bundle right here will instead do sell, not content. 86 00:06:13,920 --> 00:06:17,970 We'll update our dependency right here from input to sell content. 87 00:06:20,060 --> 00:06:24,530 And then finally, as our initial value to our code editor, rather than doing that hard coded string, 88 00:06:24,530 --> 00:06:26,740 I'm going to replace it with cell content. 89 00:06:27,020 --> 00:06:30,950 Right now, the initial value of all of our different code cells is just empty string. 90 00:06:31,140 --> 00:06:35,540 But eventually we're going to load up some existing cells into our application that will make sure that 91 00:06:35,540 --> 00:06:41,600 if we ever fetch a list of cells from some outside API, the code editor will boot up and show the starting 92 00:06:41,600 --> 00:06:43,340 code that we just fetch. 93 00:06:45,070 --> 00:06:49,690 All right, so now we are not making use of this input piece of state anymore so we can remove that 94 00:06:49,690 --> 00:06:51,100 local piece of state entirely. 95 00:06:51,700 --> 00:06:52,540 It's going to delete that. 96 00:06:52,780 --> 00:06:53,680 I will save the file. 97 00:06:54,650 --> 00:06:57,290 Let's then go back over to the browser and do a quick test. 98 00:07:00,040 --> 00:07:03,680 OK, so we now still have two code cells that are being created. 99 00:07:03,940 --> 00:07:08,860 They both start off with no content whatsoever, which is why the code editors are appearing empty. 100 00:07:09,500 --> 00:07:11,650 I should be able to type some stuff inside of here. 101 00:07:11,890 --> 00:07:17,290 And then once again, in theory, we are updating some state inside of our reduc store. 102 00:07:18,730 --> 00:07:23,890 Who knows if we actually are, we are, of course, it is working correctly, probably, but of course 103 00:07:23,890 --> 00:07:26,160 we probably won't make sure that's actually the case at some point in time. 104 00:07:26,170 --> 00:07:27,340 So let's just remember that. 105 00:07:28,630 --> 00:07:34,510 OK, let's say that this is a good improvement, so we have refactored out a piece of states from code 106 00:07:34,510 --> 00:07:36,010 cell input is now gone. 107 00:07:36,190 --> 00:07:38,200 We are also communicating down the cell. 108 00:07:39,160 --> 00:07:42,370 Let's take another pause right here and make some more updates in the next video.