In this video we're going to try to print up some information about the stream that the user is trying
to access from our stream at component.
Again we eventually want to show some text inputs here and whatnot but right now let's just make sure
that we can load up the appropriate stream.
So we know what default title and description we should put into these two text inputs.
Now to do so we're going to use a combination of two sources of information.
First off we need to know the idea of the stream that the user is trying to see.
The idea of the stream that the user is trying to see is available inside of our prop's object underneath
prop's match Puranas ID.
So that right there is the idea of the stream that we are trying to access.
Now the second source of information that we need to get access to the stream we care about is the list
of streams inside of a redux state object.
If you go back over to the main list of streams right here and then take a look at your redux step Tools
panel you can click on that state button and you'll notice the up we've got that stream's object.
We've got a key of three inside there and that is the stream that we care about.
So essentially between the props object right here and the list of streams that we have inside of our
state store we can somehow select the stream with an idea of 3 and then print up some information about
it inside of our component.
All right so I'm going to resize a couple of things here really quickly and I'm going to go back to
the edit screen and then going to flip back over to my code editor and we're going to read out a little
bit of code to get the appropriate stream out of our state store and printed up.
Now in order to get some information out of our redux store we're going to use the exact same process
that we have every single time before we're going to add in the connect function to our file from re-act
redux.
Well then define a map state to prop's function and wire that up to stream at it.
So that is how we're going to get our list of streams into the component.
All right.
So define my map state to prop's
right here.
And then inside if you're going to want to return an object that has a stream property and we're going
to want the value for this thing to be the stream that the user is trying to edit.
Remember we're going to eventually take the title and description from it and show them inside those
text inputs so a user can edit them.
But right now we're just trying to print up the title and description inside of stream at it.
So now we're in a little bit of a bind here and this is actually a very similar situation that we've
been ran into in the past.
Our stream at edit component has access to the prop's object and that prop's object is what knows about
the ID that we're trying to show or the idea of the stream that we're trying to show.
But that prop's object appears to only be accessible inside of the stream edit function.
On the other hand maps state to prop's is what it knows about the big list of streams that's entirely
stored inside of our state object.
So one source of information is available up here.
The other source of information is available down here.
Well like I said remember we have ran into this situation before and we had learned that our map state
the Propst function actually gets called with two separate arguments.
The first argument is always our state object and we're just about always going to make use of that.
The second argument is the own prop's argument and this is a reference to the prop's object that shows
up inside our stream edit component.
Just to help you remember exactly what own prop's is right there.
I'm going to delete the console log inside of my component.
I'm going to add a console log.
Of own props inside of maps data props.
And then to make sure that I have some valid syntax here I'll say Stream is no.
Right now just so I have an actual value there.
We're not going to livestream is nil.
I just want to get my code to run successfully inside the browser.
And then finally to test this out.
I'll set up my connect function at the bottom
like so.
OK.
Let's now save this.
We'll take a look at the console log of own props inside of map state the props.
So I going to save this all flip back over.
And now I see my console log right here.
Now notice it is the same exact looking prop's object to the consulate.
We had previously.
I see that it has the match programmes id property.
So again any time that maps state to prop's is called we actually get two arguments.
The first is all the state out of our redux store.
The second is the prop's object that shows up inside of our components.
So now inside of map state to prop's we have all the information we need.
We know the idea of the string that we're trying to access and we also have our big object with all
of our streams in the form of the state object right here.
So I'm going to go ahead and remove that console log.
I'm going to remove the No.
Well then go into our state object.
We're going to get our list of streams and then remember our streams variable right there are the streams
property refers to an object where the keys of that object are the IDs of all the streams that we've
loaded up.
So we had done that to make sure that writing out a producer was really easy and straightforward.
But there's another benefit as well.
The other benefit is that any time that you want to select a record out of that object by using an ID
or we have to do is use the very familiar bracket notation.
So inside of the streams object we want to find the stream with an ID of three.
So inside those square brackets we're going to reference own props match BRAMs dot ID.
So right here stream's own props dot match dot prams dot Id like so.
So that should select the appropriate stream out of the object that contains all of our streams inside
of our redux store assign that to the stream property inside this object and then return it from map
state to prop's So the final result of all this is that our prop's object should now have a stream property
that contains the stream that our user is trying to edit.
Now before we tried to walk or print out some information about that stream and this div right here.
Let's first do one more conc a log of prop's right here because there's going to be some kind of interesting
unexpected behavior that I want you to see.
So I'm going to add in the console log of props.
I'll then save this and then we will flip back over to our browser and take a look at what happens.
Not going to do a hard refresh here.
There's my console log.
So now I'll expand this.
And when I do so you'll notice that stream's showed up as undefined.
Huh.
Well if stream is undefined that means that we did not successfully pull the appropriate stream out
of our streams object right here.
It means that something is going wrong with that little chunk of code.
But let me show you some really interesting behavior.
I'm going to navigate back to my big list of streams by clicking on you up your.
And then I'm going to click on the Edit button again.
Now as soon as Stream at it loads up we get a second console log here.
Again that's from the console log inside of our component and I'm going to expand the second console
log and when I do so you'll notice that the stream is now appearing correctly.
So it seems like when we first loaded up this page we had no stream.
But then when we started to navigate around a little bit it seemed like the streams suddenly showed
up.
So that's kind of unexpected behavior.
Just to make sure this is really clear let's run through this one more time very quickly.
I'm at stream's at three.
I'm going to refresh the page when I refreshed the page I see my console log again stream is undefined.
But if I now go back to stream me and then click on the Edit button again I see that stream has now
showed up correctly I've got the entire object right there.
All right.
So again this is kind of interesting behavior.
Let's take a pause right here.
When we come back the next section we're going to take a look at a diagram to make sure that you really
understand why we are sometimes seeing stream of undefined.
And then sometimes we are seeing the string with the appropriate value inside of it.
So a quick pause and I'll see you in just a minute.