1 00:00:01,050 --> 00:00:01,883 Instructor: In the last section 2 00:00:01,883 --> 00:00:05,040 we created our save comment action creator, 3 00:00:05,040 --> 00:00:07,620 and we also added that type of save comment 4 00:00:07,620 --> 00:00:11,040 to our comments reducer in the reducers directory. 5 00:00:11,040 --> 00:00:12,810 Now we're going to eventually come back 6 00:00:12,810 --> 00:00:14,547 and write some tests around this reducer 7 00:00:14,547 --> 00:00:16,890 and that action creator that we just added, 8 00:00:16,890 --> 00:00:19,200 but first we're going to wire that action creator 9 00:00:19,200 --> 00:00:21,750 up to our comment box component. 10 00:00:21,750 --> 00:00:23,370 The reason that we're going to go directly over 11 00:00:23,370 --> 00:00:26,670 to that component is that adding in this action creator 12 00:00:26,670 --> 00:00:28,950 to that component is going to teach us one 13 00:00:28,950 --> 00:00:30,960 of the biggest lessons that we're going to learn 14 00:00:30,960 --> 00:00:34,260 about testing a React and Redux application. 15 00:00:34,260 --> 00:00:35,433 So let's get to it. 16 00:00:36,300 --> 00:00:38,520 Now the first thing I wanna do is flip on over 17 00:00:38,520 --> 00:00:41,520 to my terminal and I want to point out to you right now 18 00:00:41,520 --> 00:00:44,640 that it appears that all of our tests are still passing. 19 00:00:44,640 --> 00:00:47,370 So everything right now, it looks like we're good to go. 20 00:00:47,370 --> 00:00:49,920 I just want you to keep that in mind for right now. 21 00:00:50,790 --> 00:00:53,793 So now I'm gonna flip on over to my comment box component. 22 00:00:54,630 --> 00:00:57,630 We're going to want to import our action creator. 23 00:00:57,630 --> 00:01:00,060 We're going to import the connect tag 24 00:01:00,060 --> 00:01:02,250 or the connect function from React Redux, 25 00:01:02,250 --> 00:01:04,080 and we're gonna wire that action creator 26 00:01:04,080 --> 00:01:05,310 up to this component. 27 00:01:05,310 --> 00:01:07,290 Okay, so let's get to it. 28 00:01:07,290 --> 00:01:12,270 At the top I will import connect from React Redux 29 00:01:12,270 --> 00:01:17,270 and I will import actions, excuse me... 30 00:01:17,790 --> 00:01:22,790 Star as actions my mistake from actions. 31 00:01:22,860 --> 00:01:24,300 And that's it. 32 00:01:24,300 --> 00:01:26,340 So this right here is gonna grab all the actions 33 00:01:26,340 --> 00:01:28,860 out of our actions index.js file. 34 00:01:28,860 --> 00:01:30,270 And just like we said before 35 00:01:30,270 --> 00:01:32,070 when we were importing our reducers, 36 00:01:32,070 --> 00:01:34,050 by writing out just actions right here 37 00:01:34,050 --> 00:01:36,420 we're going to import our actions directory 38 00:01:36,420 --> 00:01:39,753 which will give us our index.js file by default. 39 00:01:41,850 --> 00:01:42,930 We'll now go down to the bottom 40 00:01:42,930 --> 00:01:45,960 of the file and set up our connect tag. 41 00:01:45,960 --> 00:01:48,990 So at the bottom of the file I'm going to add 42 00:01:48,990 --> 00:01:51,123 in my connect function call like so. 43 00:01:52,230 --> 00:01:54,120 The first argument is going to be reserved 44 00:01:54,120 --> 00:01:56,490 for our map state to props function. 45 00:01:56,490 --> 00:01:59,220 In this case, our comment box does not need access 46 00:01:59,220 --> 00:02:02,640 to any state, so I'll just put no inside there 47 00:02:02,640 --> 00:02:03,750 and then we'll use a shortcut 48 00:02:03,750 --> 00:02:05,850 for wiring up all the action creators. 49 00:02:05,850 --> 00:02:09,122 All we have to do is pass in that actions object like so. 50 00:02:10,410 --> 00:02:13,020 Okay, so this looks good. 51 00:02:13,020 --> 00:02:14,610 I think that what we've got right now is going 52 00:02:14,610 --> 00:02:15,900 down the right path. 53 00:02:15,900 --> 00:02:19,050 The last thing we have to do is inside of our handle submit 54 00:02:19,050 --> 00:02:22,020 we're gonna make sure that we take that comment 55 00:02:22,020 --> 00:02:25,980 that we have as part of this.state.comment, 56 00:02:25,980 --> 00:02:27,830 and call that action creator with it. 57 00:02:28,830 --> 00:02:31,470 So I'm going to remove the comment for the 2D right there 58 00:02:31,470 --> 00:02:34,833 and I will replace it with this.props.saveComment, 59 00:02:36,060 --> 00:02:40,173 and we'll pass in this.state.comment. 60 00:02:41,640 --> 00:02:43,260 So I'm now gonna save this file 61 00:02:43,260 --> 00:02:45,720 and I'm gonna flip on over directly to the browser. 62 00:02:45,720 --> 00:02:48,630 So try not to look at your test just yet, all right? 63 00:02:48,630 --> 00:02:50,630 We're gonna flip on over to our browser. 64 00:02:53,220 --> 00:02:56,160 Now once over here, I'm gonna just try to add a comment. 65 00:02:56,160 --> 00:02:58,339 So I'll enter in some random text and I'll click 66 00:02:58,339 --> 00:03:01,320 on submit comment, and it appears like everything 67 00:03:01,320 --> 00:03:03,180 still works just fine. 68 00:03:03,180 --> 00:03:04,620 Of course, we're not displaying the list 69 00:03:04,620 --> 00:03:06,570 of comments on the screen because we've not worked 70 00:03:06,570 --> 00:03:08,820 on that component at all just yet. 71 00:03:08,820 --> 00:03:11,010 But the fact that I don't get any errors down here 72 00:03:11,010 --> 00:03:14,580 inside my console, well that's pretty much good news for me. 73 00:03:14,580 --> 00:03:18,390 However, if we flip back over to our terminal 74 00:03:18,390 --> 00:03:22,140 you're gonna notice some really nasty stuff. 75 00:03:22,140 --> 00:03:24,900 So back over here, it looks like we now have a whole bunch 76 00:03:24,900 --> 00:03:28,800 of tests that are failing inside of our application. 77 00:03:28,800 --> 00:03:32,520 Well, that's definitely a little bit unexpected. 78 00:03:32,520 --> 00:03:35,730 In particular, you'll notice this message right here. 79 00:03:35,730 --> 00:03:37,290 We have many different error messages, 80 00:03:37,290 --> 00:03:38,490 but this one kind of stands out. 81 00:03:38,490 --> 00:03:40,440 It says, could not find store in 82 00:03:40,440 --> 00:03:44,820 either the context or props of connect comment box. 83 00:03:44,820 --> 00:03:46,620 So let's take a quick pause right here. 84 00:03:46,620 --> 00:03:48,120 We're gonna come back to the next section 85 00:03:48,120 --> 00:03:50,100 and we're gonna start to talk about exactly 86 00:03:50,100 --> 00:03:51,840 what's going wrong with our tests 87 00:03:51,840 --> 00:03:53,970 now that we've added Redux in. 88 00:03:53,970 --> 00:03:56,783 All right, so quick break and I'll see you in just a minute.