In the last video we saw some really interesting behavior around our stream edit component.
So we went through the flow two times but just one more time really quickly.
The first time we showed our stream at it on the screen we got a stream of undefined inside of our props
object.
But after we navigated around a little bit we then saw the appropriate stream value inside there.
So in this video I'm going to tell you why this is happening.
And make sure that it's really clear because it's going to ultimately kind of culminate in making sure
you understand something very important around re-act router.
All right.
So let's get to it.
I've got a really long flow diagram here that's going to walk you through the entire series of steps
and help you understand exactly what is going wrong.
All right so everything begins with the user typing in streams at it 3 to the address bar and hitting
enter or alternatively just hitting the refresh button right here.
While at the you are l of streams at 3.
So either case really when that occurs the user is going to load up our application inside their browser
when the user first loads up our application.
Our redux state object is totally empty.
We do not have any loaded streams whatsoever.
We then tried to show the stream edit component to the user.
And when we do so we're essentially trying to select stream with ID of three from our state object.
But by that point we have not loaded up any streams.
So we see undefined.
So that's what's going wrong here.
When we navigate directly to streams at 3 we have not loaded up any streams into our application.
And so we immediately see zero data inside of our store when we try to pull some data out of it that
doesn't exist.
We get that undefined value.
So why does the application work when we navigate back over to the stream list.
Well it's pretty simple it's essentially solving the issue that we're running into right here.
When we then navigated to the route route we've rendered the streamlets component on the screen and
the streamlet component if we opened it up very quickly here string list.
Remember we've got the component down Mount right here that always calls fetch streams.
So the instant we show stream list on the screen we are fetching a list of all of the different streams
that our application has.
So we fetch the list of streams and that updates our redux store.
We then navigated back over to streams at three and then we attempt to select the stream with idea of
three from the redux store.
But now in this case we have already fetched our data.
So we then see the appropriate stream appear.
So that's the big issue here.
The big issue is that we are trying to make get access to some data that has not yet been loaded up
into our application.
The big lesson the thing I want you to really understand here about re-act router is that anytime that
you are using this kind of ID based selection you are l.
We always have to obey this rule.
We always need to make sure that any component that is going to be shown on a screen is going to be
designed to work by itself or in isolation.
So essentially that means that every component that re-act router does is going to show needs to fetch
its own data.
We really cannot assume that any given component will get access to some data that might have been loaded
up previously inside the application.
We've already seen that that's not the case.
If a user navigates directly to streams at 3 there are no streams to select from.
So our stream edit component needs to load up the appropriate stream it needs to call the action creator
to reach out to the API and fetch the stream with ID 3 so that it can then show it on the screen.
All right so that's pretty much the big lesson here.
We just need to make sure that every component is not going to have some dependency on a user visiting
some other route inside of our application ahead of time because that's our that's never going to be
the case.
Now you might think that was Stephen A user can only get to this page by clicking on the Edit button
right here.
So in this application Yeah you know we always have to see streamlets before we can go to the edit page
but that's not really the case.
If a user comes to this page directly they could easily bookmark the page right.
They could book market and then come back directly to a URL of streams at three and that would completely
bypass the stringless component.
In addition a user might copy this link right here and share it with a friend.
The friend might click on it come to this page and then expect to see the appropriate stream appear.
So it's entirely possible that your users are always going to come directly to a given route inside
your application.
And so every route and every component shown by that route needs to fetch its own data and it cannot
rely upon some other component fetching data ahead of time for it.
OK so now that we understand the issue here let's fix it up.
Let's take a quick pause and when we come back we're going to make sure that stream at it tends to fetch
the stream that it's trying to show.
So that if we navigate directly to this component it will fetch the appropriate stream from our API
put it into the redux store and then select it from that store.
So quick pause and I'll see you in just a minute.