Speaker 1: In the last section, we put together
some specs for our saveComment action creator.
So we've already kind of stubbed out
our saveComment action creator right here,
which means making, writing our action and getting our
specs to go green should be pretty straightforward.
We've already assumed that our saveComment
will always be called with the comment that we want to save,
and we assumed that we're always gonna return the comment
on the payload property of our action.
So we should be able to just create our object,
assign the type, which is gonna be SAVE_COMMENT,
and make sure that our payload is the comment
that the action creator is getting called with.
Now we can save this file and boom, everything goes green.
So, hey, that wasn't that bad, huh?
That one went pretty quick.
So we can see that we have the correct type
and the correct payload on our saveComment action creator.
So we've got our action creator put together.
The next thing for us to do is to finish up
our reducer, and that's pretty much just
about gonna clinch the entire project.
The last thing we have to do after that is just wire
up the comment box to the saveComment action creator,
and we should be good to go.
Let's wire up the comment box first
and then in the next section we'll go ahead
and do the comments reducer.
So in the comment_box right now we've got just a
single class in here, CommentBox.
It is a component right now and not a container.
In order for our component to call the
saveComment action creator, it needs to be a container.
So just like we promoted the comment list into a container,
we'll do the same thing for this comment box as well.
I encourage you if you wanna brush up on your redux skills
to go ahead and just give a shot at wiring up CommentBox
as a container that has access to the
saveComment action creator.
So if you wanna make a go for that right now,
feel free to give it a shot.
Otherwise, we will start it right now.
So first thing we need to do is import the
connect helper from react-redux in order to
promote our comment box into a container or smart component.
So we'll no longer be returning CommentBox the class
by default. Instead, we're going to be
exporting our container.
So let's move our container creation down to the bottom.
So we'll call a connect with CommentBox, and we only care
about wiring up the action creator to this component.
We do not care about state at all.
So the first argument of connect is always reserved
for the map state to props function.
So in this case, we're just gonna pass a null there.
No, we don't care about any piece of state,
so no need to worry about that.
The only thing that we care about are the action creators.
So in case you've never seen seen this before,
I wanna show you a little bit of a shortcut
with a second argument here.
If you look at the official docs for connect, you'll see
that it recommends creating a function called
map dispatch to props.
In our case, we're gonna use a little bit of a shortcut,
and it's very, very handy.
At the top of our file,
we're going to import * as actions from up into actions.
So we just imported everything,
all the action creators from our actions file,
and we saved them in this file right here,
our comment box, as the variable actions.
Now we can just pass in this entire actions object instead
of a function called, you know, map dispatch to props here.
And just by passing this entire actions object in here,
it will automatically bind all of our action creators
to the CommentBox class.
Well, CommentBox container in this case.
So now we've got access to all of our action creators
inside of comment box, as on this.props.
So the last step in here gets pretty darn easy,
pretty straightforward.
All we need to do is call our action creator
and pass it the current comment.
And we'll do this inside of our handleSubmit function.
So we'll say this.props.saveComment,
that's the action creator, and we're gonna pass into it
this.state.comment, like so.
So let's go ahead and save this.
And now the last thing we need to do since we've wired up
this action creator, is we need to set up our reducer.
Let's take care of that inside the next section.