In the last section we implemented our fetch post action creator right here that reaches out and grabs 2
a single post. 3
So I think at this point in time we're ready to go ahead and make sure that we can connect our state 4
to props and grab our state props posts and make sure it shows up inside of our component here. 5
So let's go ahead and define that really quickly we'll do a function map state to prop's state and will 6
return an object state DOT pose dot post. 7
So this is the currently selected post right here and we'll make sure that we replace our role in our 8
function call a connector right here with MAP state to props. 9
Perfect. 10
OK. 11
So in theory we could probably go ahead and start referencing this up prop stopped in here and you know 12
putting some content together blah blah blah. 13
But I've got like kind of a nagging suspicion that something might not quite be right here. 14
So inside of our render method I'm going to add a console log and I'm going to log this prop stock post 15
which should be you know the posts that we just fetched right here. 16
So I going to save this. 17
And let's go ahead and refresh the browser and just try and see what happens. 18
So a refresh and OK. 19
Well this is kind of interesting. 20
We've got two console logs from the same console logs so the first time console log null and the second 21
time we've got our object here. 22
So this is kind of interesting what's going on here. 23
Well remember network requests take time. 24
They don't happen instantaneously. 25
In this case it was 214 milliseconds. 26
That's 214 second 214 milliseconds in between the time that our component first is attempting to render 27
to the time that our component actually has the data it needs to show up on the screen whenever we render 28
our component. 29
It's not going to wait for our data to magically show up. 30
The component is going to render immediately every single time even if some props are not available 31
that means that we need a way to handle the case in which our post is not yet loaded but the component 32
is trying to render itself. 33
Traditionally this would be a really good place to put in a Jack spinner. 34
You know you like kind of spinning picture what have you something like that. 35
We're going to use a little bit more or less Finast solution here but nonetheless still very useful 36
. 37
So what we're going to do is we're going to say if we don't have this stock prop top post. 38
So if not this props post then just go ahead and return a div 39
with loading. 40
So we'll say to the user if we haven't loaded it up yet. 41
Hey just hold on a second. 42
We're still loading up the data here. 43
So let's do a refresh now so you'll see just there for the slightest instant it shows loading and then 44
it resolves into show Post 63. 45
So it occurs so quickly that you could kind of debate whether or not we need to show you know loading 46
text at all. 47
And in fact it might actually be a little bit better user experience to not show it at all. 48
But really you know just so you know how do you implement a asperin like this. 49
This is a good pattern right here. 50
OK. 51
So now that we know that we've got our data by the time we hit this return statement right here. 52
Let's go ahead and flush out this component just a little bit and make sure we show some info from the 53
post. 54
So we'll add some friends. 55
Make sure you take off the semi colon out here 56
and we'll go ahead and show in each three four post title. 57
We'll do an age 6 58
for post categories and just so the user knows what they're looking at. 59
Let's say you know categories categories there we go. 60
And then we'll do a paragraph tag 61
for post content like so. 62
OK. 63
Let's refresh. 64
Post is not defined I think I got a typo. 65
Oh my mistake. 66
I'd reference just post. 67
We need this stop proper stop post. 68
Let's go ahead and since we're using the post in here so much. 69
Let's just pull it off of props like so. 70
So no just more E-6 This is totally identical to doing cons to pose sequel's this stuff props start 71
post totally identical. 72
And so we don't really need this cool anymore. 73
You can just do. 74
If we don't have a post and then post title categories and content. 75
All right let's give this another shot. 76
Cool. 77
Looks good. 78
So we've got the title of our blog post the categories and then the content below is just what we need 79
. 80
So this is looking pretty good. 81
We just need two more features. 82
We really need to build to delete this post. 83
If we don't want to view it anymore and we also need to build to navigate back to our list of posts 84
here at the top. 85
So let's go ahead and tackle those in the next section.