1
00:00:01,080 --> 00:00:02,550
Speaker 1: In the last section, we put together

2
00:00:02,550 --> 00:00:06,090
some specs for our saveComment action creator.

3
00:00:06,090 --> 00:00:08,460
So we've already kind of stubbed out

4
00:00:08,460 --> 00:00:10,590
our saveComment action creator right here,

5
00:00:10,590 --> 00:00:13,350
which means making, writing our action and getting our

6
00:00:13,350 --> 00:00:16,410
specs to go green should be pretty straightforward.

7
00:00:16,410 --> 00:00:18,870
We've already assumed that our saveComment

8
00:00:18,870 --> 00:00:22,380
will always be called with the comment that we want to save,

9
00:00:22,380 --> 00:00:24,990
and we assumed that we're always gonna return the comment

10
00:00:24,990 --> 00:00:27,363
on the payload property of our action.

11
00:00:28,290 --> 00:00:30,903
So we should be able to just create our object,

12
00:00:31,800 --> 00:00:35,610
assign the type, which is gonna be SAVE_COMMENT,

13
00:00:35,610 --> 00:00:38,280
and make sure that our payload is the comment

14
00:00:38,280 --> 00:00:40,770
that the action creator is getting called with.

15
00:00:40,770 --> 00:00:44,910
Now we can save this file and boom, everything goes green.

16
00:00:44,910 --> 00:00:47,220
So, hey, that wasn't that bad, huh?

17
00:00:47,220 --> 00:00:49,350
That one went pretty quick.

18
00:00:49,350 --> 00:00:51,240
So we can see that we have the correct type

19
00:00:51,240 --> 00:00:54,933
and the correct payload on our saveComment action creator.

20
00:00:56,190 --> 00:00:57,870
So we've got our action creator put together.

21
00:00:57,870 --> 00:01:00,360
The next thing for us to do is to finish up

22
00:01:00,360 --> 00:01:02,550
our reducer, and that's pretty much just

23
00:01:02,550 --> 00:01:04,800
about gonna clinch the entire project.

24
00:01:04,800 --> 00:01:06,690
The last thing we have to do after that is just wire

25
00:01:06,690 --> 00:01:09,660
up the comment box to the saveComment action creator,

26
00:01:09,660 --> 00:01:11,700
and we should be good to go.

27
00:01:11,700 --> 00:01:13,860
Let's wire up the comment box first

28
00:01:13,860 --> 00:01:15,720
and then in the next section we'll go ahead

29
00:01:15,720 --> 00:01:18,360
and do the comments reducer.

30
00:01:18,360 --> 00:01:22,320
So in the comment_box right now we've got just a

31
00:01:22,320 --> 00:01:25,260
single class in here, CommentBox.

32
00:01:25,260 --> 00:01:29,790
It is a component right now and not a container.

33
00:01:29,790 --> 00:01:32,760
In order for our component to call the

34
00:01:32,760 --> 00:01:36,720
saveComment action creator, it needs to be a container.

35
00:01:36,720 --> 00:01:39,750
So just like we promoted the comment list into a container,

36
00:01:39,750 --> 00:01:43,260
we'll do the same thing for this comment box as well.

37
00:01:43,260 --> 00:01:45,750
I encourage you if you wanna brush up on your redux skills

38
00:01:45,750 --> 00:01:49,740
to go ahead and just give a shot at wiring up CommentBox

39
00:01:49,740 --> 00:01:52,700
as a container that has access to the

40
00:01:52,700 --> 00:01:54,960
saveComment action creator.

41
00:01:54,960 --> 00:01:56,640
So if you wanna make a go for that right now,

42
00:01:56,640 --> 00:01:58,440
feel free to give it a shot.

43
00:01:58,440 --> 00:02:01,923
Otherwise, we will start it right now.

44
00:02:03,480 --> 00:02:08,220
So first thing we need to do is import the

45
00:02:08,220 --> 00:02:12,990
connect helper from react-redux in order to

46
00:02:12,990 --> 00:02:17,400
promote our comment box into a container or smart component.

47
00:02:17,400 --> 00:02:20,880
So we'll no longer be returning CommentBox the class

48
00:02:20,880 --> 00:02:24,570
by default. Instead, we're going to be

49
00:02:24,570 --> 00:02:26,160
exporting our container.

50
00:02:26,160 --> 00:02:29,793
So let's move our container creation down to the bottom.

51
00:02:31,170 --> 00:02:35,590
So we'll call a connect with CommentBox, and we only care

52
00:02:37,230 --> 00:02:40,140
about wiring up the action creator to this component.

53
00:02:40,140 --> 00:02:43,200
We do not care about state at all.

54
00:02:43,200 --> 00:02:45,750
So the first argument of connect is always reserved

55
00:02:45,750 --> 00:02:48,060
for the map state to props function.

56
00:02:48,060 --> 00:02:50,640
So in this case, we're just gonna pass a null there.

57
00:02:50,640 --> 00:02:53,100
No, we don't care about any piece of state,

58
00:02:53,100 --> 00:02:54,450
so no need to worry about that.

59
00:02:54,450 --> 00:02:58,140
The only thing that we care about are the action creators.

60
00:02:58,140 --> 00:02:59,640
So in case you've never seen seen this before,

61
00:02:59,640 --> 00:03:02,490
I wanna show you a little bit of a shortcut

62
00:03:02,490 --> 00:03:04,440
with a second argument here.

63
00:03:04,440 --> 00:03:07,140
If you look at the official docs for connect, you'll see

64
00:03:07,140 --> 00:03:09,120
that it recommends creating a function called

65
00:03:09,120 --> 00:03:11,490
map dispatch to props.

66
00:03:11,490 --> 00:03:14,460
In our case, we're gonna use a little bit of a shortcut,

67
00:03:14,460 --> 00:03:15,993
and it's very, very handy.

68
00:03:17,790 --> 00:03:19,890
At the top of our file,

69
00:03:19,890 --> 00:03:24,890
we're going to import * as actions from up into actions.

70
00:03:27,450 --> 00:03:29,700
So we just imported everything,

71
00:03:29,700 --> 00:03:32,970
all the action creators from our actions file,

72
00:03:32,970 --> 00:03:35,520
and we saved them in this file right here,

73
00:03:35,520 --> 00:03:38,013
our comment box, as the variable actions.

74
00:03:40,080 --> 00:03:45,080
Now we can just pass in this entire actions object instead

75
00:03:45,540 --> 00:03:49,110
of a function called, you know, map dispatch to props here.

76
00:03:49,110 --> 00:03:52,530
And just by passing this entire actions object in here,

77
00:03:52,530 --> 00:03:55,470
it will automatically bind all of our action creators

78
00:03:55,470 --> 00:03:57,330
to the CommentBox class.

79
00:03:57,330 --> 00:03:59,493
Well, CommentBox container in this case.

80
00:04:00,330 --> 00:04:03,840
So now we've got access to all of our action creators

81
00:04:03,840 --> 00:04:08,840
inside of comment box, as on this.props.

82
00:04:09,480 --> 00:04:11,970
So the last step in here gets pretty darn easy,

83
00:04:11,970 --> 00:04:13,410
pretty straightforward.

84
00:04:13,410 --> 00:04:16,709
All we need to do is call our action creator

85
00:04:16,709 --> 00:04:19,200
and pass it the current comment.

86
00:04:19,200 --> 00:04:23,280
And we'll do this inside of our handleSubmit function.

87
00:04:23,280 --> 00:04:27,720
So we'll say this.props.saveComment,

88
00:04:27,720 --> 00:04:30,810
that's the action creator, and we're gonna pass into it

89
00:04:30,810 --> 00:04:33,693
this.state.comment, like so.

90
00:04:35,160 --> 00:04:36,903
So let's go ahead and save this.

91
00:04:38,580 --> 00:04:41,040
And now the last thing we need to do since we've wired up

92
00:04:41,040 --> 00:04:43,980
this action creator, is we need to set up our reducer.

93
00:04:43,980 --> 00:04:46,413
Let's take care of that inside the next section.