Instructor: In the last section,
we put together our fetch comments action creator
and there's just two last things we have to take care of.
First off, we need to add a new button
to our application to make sure anytime a user clicks on it,
we call the fetch comments action creator.
And we also need to modify our comments reducer
so that it can watch for the fetch comments type.
Let's first take care of the button.
I'll add the button to the comment box component
because we've already imported all
of our actions to this thing.
And wired them up to the component itself
at the very bottom of the file.
So all we really have to do is add a button
to this render function right here.
And anytime user clicks on it,
we need to make sure we call the appropriate action creator.
Now the mock up we were
just looking at showed the two buttons
for submitting a comment
and fetching a list of comments right next to each other.
But to accomplish that we would have
to add that new button, like, right here.
I don't really wanna do that
because then clicking on this button
might trigger a form submittal.
We could definitely prevent that behavior
but let's just take the easy way out here.
So I'm going to wrap the entire form
with a div.
And then I'll add the new button tag that we want
as a sibling to the form.
So if we click on the button.
No way of the form getting submitted.
So down here I'll put on my, oops.
My button.
I'll give it some text like fetch comments
and I'll add an on click hand alert to the button itself.
So let's say on click.
Anytime someone calls this thing,
we're going to directly call
that action creator we just put
together called fetch comments.
So right here, we'll say this dot props dot fetch comments.
Now two things to keep in mind here
of kind of basic react stuff.
First off, we are not putting a set
of parentheses after that.
The reason we're not doing that
is that we want to give this button a callback
that it can call at some point in the future.
So we're just giving a reference
to the fetch comments function.
If we put the set of parentheses on
then the instant this component gets rendered
it will immediately attempt to call fetch comments
which is not the behavior we want.
The second thing I want to remind you about very quickly
is when we bind an action creator
to a component through the connect tag down here
it gets added to the props object for the component itself.
So that's why we did this dot props dot fetch comments.
All right, so let's now flip back over to the browser
and just make sure that button's appearing.
Okay, looks good.
So now the last thing we have to do
is open up our reducers comments dot JS file.
And we'll make sure that this reducer knows
how to handle that extra type that we just added.
So the extra type that we just added
into our application was called fetch comments.
I'll first make sure
that I import that type at the top
and then I'll add a case to my reducer.
And one thing I wanna mention
is that we cannot reuse save comment right here
because fetch comments is going to be dealing
with multiple comments.
In addition, it's also going to have
to have some logic inside of it
to iterate through this list of objects
and only pull off the name property from each one.
Okay, so now inside of here we can iterate
through the list of comments.
The list of comments is available
on action dot payload dot data.
This is gonna be the array of objects.
So like literally this data structure right here.
So we're gonna map through that thing.
And for every comment object we're going
to return just the name property.
So we'll end up with an array of strings.
So I'll say action dot payload dot data dot map.
And for every comment we're going
to return just comment dot name.
Like so.
Now I will assign the result of all this
to a temporary variable that I'll call simply comments.
And then after we do that operation we
will return a new array
that contains all the previous comments we had
which we can accommodate for by doing dot, dot, dot, state.
So that's all the previous comments
plus all these new comments as well.
So dot, dot, dot comments.
Okay, so I think that's just about it.
Let's flip on over to the browser
and we're gonna test this thing out
and just make sure that we can
actually get the list of comments on the screen.
After we do that we can then figure out
how we're going to actually test all this stuff.
So back inside my browser.
I'm gonna click on fetch comments
and I see my list of comments appear.
In total I should see 500
and it definitely looks like I've got 500.
Okay, now of course I should still
be able to enter in some text.
Click on submit comment.
And that comment should be added
at the very bottom of the list.
So if I go all the way down I'll see
the gibberish that I just added in right there.
So I think that we got the actual functionality
put together.
Let's continue in the next section
and we're gonna start thinking
about how we're going to actually test all this stuff.
So quick break and I'll see you in just a minute.