Now that we've got our fette user action creator put together we're going to start to create our component
that is going to display just the author's name.
And again we're going to called out the user Hetter.
So back inside of my components directory I will make a new file called user header.
Yes.
And then inside of here we're going to put together some boilerplate for a class based component.
So I'm going to import re-act from react.
I'll create class User Hetter that extends re-act component and then inside of here I will define my
render method inside the render method.
Right now we'll just return a simple div that has a text like user Hetter And then as usual at the bottom
we will place our export default user header.
All right.
So we're going to want to make sure that this thing eventually is going to call an action creator to
fetch the user that it needs to show on the screen.
We'll get around to that in just a second.
But for now let's make sure that the user Hetter gets displayed inside of our posts list at the appropriate
location.
So going to flip back over to my posts list component at the top I'm going to import user Hetter rom
user Hetter and then down inside of my render list method we're going to create a new instance of this
component right after the closing div on the H-2 and that paragraph tax.
So right you're right underneath one div I'm going to put user Hetter.
Now when we create this component we need to tell it exactly what user id it needs to show.
Or excuse me the idea of the user that it needs to show.
So we need to pass that down as a prop.
Now we could certainly pass down a prop called ID.
But just to make the terminology inside of you're a little bit easier to follow I'm going to call this
Propp user id just make sure it's really clear.
We are working with the idea of some particular user and then for the value of that I'm going to reference
post user ID.
Now we are able to pass in post user id recall because if we go back over to the post and point every
posts object has a user id property and that is the ID of the user that made that post.
All right so now if we save this we should be able to flip back over to our application and hopefully
if you refresh the page I think that I kind of have my development server not running right now.
Believe it or not you know I definitely just change this but I'm not seeing that update so I'll tell
you what.
There we go.
All right.
That's better.
Fun see the update.
I had stopped my server between the last Wii on this one that's why I thought maybe I hadn't started
back up.
Anyways we now see the text user header here on the screen.
So that definitely looks pretty reasonable.
Now let's keep going with these are Hetter.
So I got to go back over here into the user header component.
We want to make sure that we call an action creator inside of here that's going to fetch the appropriate
user.
So at the top we're going to make sure that we import the connect function and the action creator itself
and we will use the connect tag to wire up the action creator to the component.
So at the top I'm going to import connect from re-act redux and I'll import fetch user from actions.
So now down at the bottom I'll place the connect function and make sure I wrap my component with a second
set parentheses.
Right now we did not have a map state to prop's function.
I'm going to pass a null as the first argument and then for the second argument I'll do an object with
fecche user OK.
It's now the last thing we do inside of our component.
When ever this component appears on the screen we're probably going to want to make sure that we attempt
to patch the given user that this thing is supposed to show.
So I'm going to define that component did mount inside of here when whenever user header is displayed.
I'm going to call my action Creator through this stuff.
Propst fetch user.
And then remember we need to pass than the ID of the user that we want to fetch.
And as we saw just a second ago we are passing in the idea the user that we want to fetch as a prop
called user id so back over here I'll make sure I call fetch user with this stuff Propst user id OK.
And that's pretty much it.
So we can save this and flip back over to my application and it looks like everything still works.
Now we don't have any redo sir to actually pick up the data from the request that we are making and
eventually get access to it and show it on the screen.
So we'll take a quick pause right here and start to tackle that in the next video.
Now before we move on I want to remind you I told you that we were going to run into one or two little
challenges.
So if you are looking at some aspect of this application right now and saying Hey Stephen you know what
I don't think this is working the way we expect it to work.
That is fine.
I'm not going to tell you exactly what it is because I kind of want you to stumble into it yourself.
But again if you see something that looks weird that is totally fine and we're going to fix it up in
a couple of videos.
OK.
So let's take a pause right here and we'll start working on a redo in the next video.