1 00:00:01,470 --> 00:00:02,303 Instructor: In the last section 2 00:00:02,303 --> 00:00:04,740 we installed two dependencies to our project. 3 00:00:04,740 --> 00:00:07,050 We're now going to go look at a diagram really quickly 4 00:00:07,050 --> 00:00:08,460 that's gonna give us a better idea 5 00:00:08,460 --> 00:00:10,890 of how this application's going to be designed. 6 00:00:10,890 --> 00:00:12,690 Then we'll go back over to our code editor 7 00:00:12,690 --> 00:00:14,610 and start working on it. 8 00:00:14,610 --> 00:00:15,780 Okay, here we go. 9 00:00:15,780 --> 00:00:18,480 So in total, we're gonna have three separate components 10 00:00:18,480 --> 00:00:19,920 inside of our application. 11 00:00:19,920 --> 00:00:21,330 We're gonna have something we're going to call 12 00:00:21,330 --> 00:00:22,830 the app component, 13 00:00:22,830 --> 00:00:25,920 we'll have a comment box and a comment list. 14 00:00:25,920 --> 00:00:28,620 We'll first begin with the comment box right here. 15 00:00:28,620 --> 00:00:31,050 So the comment box component is responsible 16 00:00:31,050 --> 00:00:33,660 for showing this tiny little form to the user. 17 00:00:33,660 --> 00:00:36,030 It will have a text area and a button. 18 00:00:36,030 --> 00:00:38,340 And any time a user clicks on the button right here 19 00:00:38,340 --> 00:00:39,660 we will add a comment 20 00:00:39,660 --> 00:00:42,450 that the user entered to the comment list. 21 00:00:42,450 --> 00:00:44,700 In addition, when the user clicks on submit 22 00:00:44,700 --> 00:00:46,920 we'll also clear out all the text 23 00:00:46,920 --> 00:00:49,053 inside of the text area right here. 24 00:00:50,130 --> 00:00:52,800 The comment list component is gonna have a very simple job. 25 00:00:52,800 --> 00:00:55,230 It's going to display all the different comments 26 00:00:55,230 --> 00:00:57,663 that the user has added inside this app. 27 00:00:59,160 --> 00:01:01,350 Both those components, so both the comment box 28 00:01:01,350 --> 00:01:03,840 and the comment list will be displayed inside of something 29 00:01:03,840 --> 00:01:05,730 we'll call the app component. 30 00:01:05,730 --> 00:01:07,800 Now, the app component really has no purpose 31 00:01:07,800 --> 00:01:09,540 or no big job assigned to it. 32 00:01:09,540 --> 00:01:11,760 All it really does is show the comment box 33 00:01:11,760 --> 00:01:14,430 and the comment list, that's all. 34 00:01:14,430 --> 00:01:16,710 So on the react side of things, three components, 35 00:01:16,710 --> 00:01:19,233 each of which pretty darn straightforward I think. 36 00:01:20,370 --> 00:01:24,270 On the Redux side, we're gonna have two big pieces. 37 00:01:24,270 --> 00:01:26,460 So for the Redux design of our application 38 00:01:26,460 --> 00:01:28,110 we'll have a global state object 39 00:01:28,110 --> 00:01:30,510 with one reducer inside of it. 40 00:01:30,510 --> 00:01:33,270 That reducer is going to produce a piece of state 41 00:01:33,270 --> 00:01:35,793 that we will refer to as simply comments. 42 00:01:36,750 --> 00:01:38,220 This will be an array of strings 43 00:01:38,220 --> 00:01:40,230 where each string represents a comment 44 00:01:40,230 --> 00:01:43,293 that the user has added via that comment box form. 45 00:01:44,550 --> 00:01:47,490 Next up, we're gonna have one single action in here as well. 46 00:01:47,490 --> 00:01:50,370 We'll call it the safe comment action. 47 00:01:50,370 --> 00:01:52,350 So anytime we call these Safe Comment Action 48 00:01:52,350 --> 00:01:56,250 or Action Creator, we will parse in the comment text 49 00:01:56,250 --> 00:01:58,740 and hopefully we're going to take that comment 50 00:01:58,740 --> 00:02:00,510 and add it to our list of comments 51 00:02:00,510 --> 00:02:03,660 that is created by our comments reducer. 52 00:02:03,660 --> 00:02:05,970 Now at this point, we've kind of looked at the design here. 53 00:02:05,970 --> 00:02:07,147 So we've spoken about, 54 00:02:07,147 --> 00:02:10,199 "Hey, what do we have in the terms of components 55 00:02:10,199 --> 00:02:12,750 and what do we have in terms of the Redux side 56 00:02:12,750 --> 00:02:14,490 of this application as well?" 57 00:02:14,490 --> 00:02:15,817 And at this point, you're probably thinking, 58 00:02:15,817 --> 00:02:17,460 "Steven, when are we gonna be talking 59 00:02:17,460 --> 00:02:18,947 about the testing stuff?" 60 00:02:18,947 --> 00:02:20,250 Well, believe it or not 61 00:02:20,250 --> 00:02:23,220 we've kind of already been talking about the testing stuff 62 00:02:23,220 --> 00:02:26,100 particularly in this section as well. 63 00:02:26,100 --> 00:02:27,570 So let's take a quick pause right here. 64 00:02:27,570 --> 00:02:29,010 We're gonna come back in the next section 65 00:02:29,010 --> 00:02:30,960 and you're gonna figure out why talking 66 00:02:30,960 --> 00:02:33,000 about the different parts of our application 67 00:02:33,000 --> 00:02:36,690 and the responsibility of each one is a critical component 68 00:02:36,690 --> 00:02:39,930 of building out some testing inside of your application. 69 00:02:39,930 --> 00:02:41,460 So quick break and we'll talk about 70 00:02:41,460 --> 00:02:43,510 why that's important in the next section.