Instructor: In the last section
we created our save comment action creator,
and we also added that type of save comment
to our comments reducer in the reducers directory.
Now we're going to eventually come back
and write some tests around this reducer
and that action creator that we just added,
but first we're going to wire that action creator
up to our comment box component.
The reason that we're going to go directly over
to that component is that adding in this action creator
to that component is going to teach us one
of the biggest lessons that we're going to learn
about testing a React and Redux application.
So let's get to it.
Now the first thing I wanna do is flip on over
to my terminal and I want to point out to you right now
that it appears that all of our tests are still passing.
So everything right now, it looks like we're good to go.
I just want you to keep that in mind for right now.
So now I'm gonna flip on over to my comment box component.
We're going to want to import our action creator.
We're going to import the connect tag
or the connect function from React Redux,
and we're gonna wire that action creator
up to this component.
Okay, so let's get to it.
At the top I will import connect from React Redux
and I will import actions, excuse me...
Star as actions my mistake from actions.
And that's it.
So this right here is gonna grab all the actions
out of our actions index.js file.
And just like we said before
when we were importing our reducers,
by writing out just actions right here
we're going to import our actions directory
which will give us our index.js file by default.
We'll now go down to the bottom
of the file and set up our connect tag.
So at the bottom of the file I'm going to add
in my connect function call like so.
The first argument is going to be reserved
for our map state to props function.
In this case, our comment box does not need access
to any state, so I'll just put no inside there
and then we'll use a shortcut
for wiring up all the action creators.
All we have to do is pass in that actions object like so.
Okay, so this looks good.
I think that what we've got right now is going
down the right path.
The last thing we have to do is inside of our handle submit
we're gonna make sure that we take that comment
that we have as part of this.state.comment,
and call that action creator with it.
So I'm going to remove the comment for the 2D right there
and I will replace it with this.props.saveComment,
and we'll pass in this.state.comment.
So I'm now gonna save this file
and I'm gonna flip on over directly to the browser.
So try not to look at your test just yet, all right?
We're gonna flip on over to our browser.
Now once over here, I'm gonna just try to add a comment.
So I'll enter in some random text and I'll click
on submit comment, and it appears like everything
still works just fine.
Of course, we're not displaying the list
of comments on the screen because we've not worked
on that component at all just yet.
But the fact that I don't get any errors down here
inside my console, well that's pretty much good news for me.
However, if we flip back over to our terminal
you're gonna notice some really nasty stuff.
So back over here, it looks like we now have a whole bunch
of tests that are failing inside of our application.
Well, that's definitely a little bit unexpected.
In particular, you'll notice this message right here.
We have many different error messages,
but this one kind of stands out.
It says, could not find store in
either the context or props of connect comment box.
So let's take a quick pause right here.
We're gonna come back to the next section
and we're gonna start to talk about exactly
what's going wrong with our tests
now that we've added Redux in.
All right, so quick break and I'll see you in just a minute.