Now that we fixed up our navigation issues we can focus on the stream show component again as a quick
reminder the component for streams show is going to show the title and description down at the bottom.
So effectively we have to go through the exact same process that we went through for stream delete and
stream edit as well.
We need to read the ID out of the L.
We need to call the action creator to fetch that particular stream and then use a map state to prop's
function to get that stream out of our redux store and into our component.
So lets get to it inside my code editor.
I'll open up my streams show a component right here at the top.
I'm going to import connect from re-act redux and I'll also get my fetch stream action creator from
up to directory's actions.
Next up I will hook up the connect function down at the bottom so it plays connect and call it and then
OLAP stream show at the second set of parentheses.
We do not yet have a mouse stage props functions all pass and NULL for the first argument and then the
second argument will be a fetch stream inside of an object.
Next up we definitely want to make streams show into a class based component so we can use a lifecycle
method.
So I'm going to just delete the entire functional component and replace it with class stream.
Show extends re-act dot component.
Well defined my render method in there.
And right now I will return a div with the text stream show and then I will also define a component.
Did mt life cycle method and inside if you're going to go through the same process Winther previously.
We want to call this prop's not fetch.
Stream and we need to make sure that we pass in the appropriate ID for the stream that we want to fetch.
So we've seen that once before.
Member to get this little idea right here.
We will reference this dot prop's match harams ID.
OK so let's save this right here and we'll test inside the browser so going to flip back over.
I'm going to open up my network request Lague and filter by ex-aide char requests and then I will refresh
the page while I am looking at streams 4 and so I should see a request right here to get stream with
ID.
For now remember you might not be looking at the stream with an idea for you might have created a number
of different streams so you might be looking at like streams 12 or something like that.
Essentially you just want to make sure that you see a request pop up right here to go and fetch some
given stream.
I guess that looks pretty good.
So now we need to somehow get that stream out of our redux store and get it inside of our component.
So as usual we'll define map state to prop's.
We're going to get both our state argument and own props and then inside of your we will return an object
of stream and that will be states streams and we need to get own prop's dot match BRAMs Id like Zo and
Eclipse's sidebar so you can see that whole line
all right now let's take maps to props and pass it off to our next function.
So map state to prop's And then finally we'll try to show some information about that stream inside
of a render method.
Now let's not forget the same scenario we have gone through many times before if we have not yet fetched
the stream we need to handle that appropriately.
So inside of my render method I'll say if there is no stream so if not this Propst stream then I want
to return a div with the text loading otherwise I'm going to return a little bit of GSX here so I'll
delete that div with just dream show.
I'm going to make a multi-line gests X block right here and I'll put in a div with a h one inside of
the H one will show the stream's title.
So this Scott prop's stream title.
And then after that I'll place about five little bit similar text and inside there will do this up props
stream description get the stream's description on there as well.
Now if you want to we could do a little bit of yes 20:15 destructuring here to avoid the repetition
of this Propst stream.
Let's just do that really quickly.
So we'll pull off title and description from this prop's stream.
And now we don't have to duplicate this not not stream twice inside of that return statement.
So it'll go to be just title and just description like so.
All right let's save this now.
If I flip back over all see my it titled My stream as a H-1 and I'll see the 5 underneath it with the
strings description.
Now I should be able to go back to my list of streams and click on another one and see the title and
description for that stream as well.
And there's another one as well.
And then don't forget we need to also make sure that we can refresh the page and still see the appropriate
stream.
So I will refresh and I still see the stream appear.
And so that ensures that our component is fetching the data that it needs.
And we are not dependent upon going to the stream List screen first getting our list of screens and
then going to a individual page.
OK so this looks fantastic.
So let's take a pause right here.
It will continue in the next video.