1
00:00:00,970 --> 00:00:04,970
In the last video we saw some really interesting behavior around our stream edit component.

2
00:00:05,110 --> 00:00:08,120
So we went through the flow two times but just one more time really quickly.

3
00:00:08,140 --> 00:00:13,000
The first time we showed our stream at it on the screen we got a stream of undefined inside of our props

4
00:00:13,000 --> 00:00:13,520
object.

5
00:00:13,660 --> 00:00:18,670
But after we navigated around a little bit we then saw the appropriate stream value inside there.

6
00:00:18,790 --> 00:00:21,060
So in this video I'm going to tell you why this is happening.

7
00:00:21,070 --> 00:00:26,530
And make sure that it's really clear because it's going to ultimately kind of culminate in making sure

8
00:00:26,590 --> 00:00:30,100
you understand something very important around re-act router.

9
00:00:30,100 --> 00:00:30,340
All right.

10
00:00:30,340 --> 00:00:31,230
So let's get to it.

11
00:00:31,270 --> 00:00:35,290
I've got a really long flow diagram here that's going to walk you through the entire series of steps

12
00:00:35,470 --> 00:00:38,610
and help you understand exactly what is going wrong.

13
00:00:38,620 --> 00:00:43,660
All right so everything begins with the user typing in streams at it 3 to the address bar and hitting

14
00:00:43,690 --> 00:00:47,720
enter or alternatively just hitting the refresh button right here.

15
00:00:47,860 --> 00:00:50,980
While at the you are l of streams at 3.

16
00:00:51,010 --> 00:00:56,140
So either case really when that occurs the user is going to load up our application inside their browser

17
00:00:56,680 --> 00:00:58,750
when the user first loads up our application.

18
00:00:58,750 --> 00:01:01,770
Our redux state object is totally empty.

19
00:01:01,780 --> 00:01:05,300
We do not have any loaded streams whatsoever.

20
00:01:05,320 --> 00:01:07,940
We then tried to show the stream edit component to the user.

21
00:01:08,050 --> 00:01:13,300
And when we do so we're essentially trying to select stream with ID of three from our state object.

22
00:01:13,480 --> 00:01:16,510
But by that point we have not loaded up any streams.

23
00:01:16,630 --> 00:01:18,960
So we see undefined.

24
00:01:19,450 --> 00:01:20,830
So that's what's going wrong here.

25
00:01:20,920 --> 00:01:26,590
When we navigate directly to streams at 3 we have not loaded up any streams into our application.

26
00:01:26,740 --> 00:01:31,960
And so we immediately see zero data inside of our store when we try to pull some data out of it that

27
00:01:31,960 --> 00:01:32,920
doesn't exist.

28
00:01:32,920 --> 00:01:34,980
We get that undefined value.

29
00:01:35,380 --> 00:01:39,190
So why does the application work when we navigate back over to the stream list.

30
00:01:39,310 --> 00:01:43,510
Well it's pretty simple it's essentially solving the issue that we're running into right here.

31
00:01:43,780 --> 00:01:48,640
When we then navigated to the route route we've rendered the streamlets component on the screen and

32
00:01:48,640 --> 00:01:54,340
the streamlet component if we opened it up very quickly here string list.

33
00:01:54,430 --> 00:01:59,150
Remember we've got the component down Mount right here that always calls fetch streams.

34
00:01:59,290 --> 00:02:04,120
So the instant we show stream list on the screen we are fetching a list of all of the different streams

35
00:02:04,120 --> 00:02:06,330
that our application has.

36
00:02:06,340 --> 00:02:10,210
So we fetch the list of streams and that updates our redux store.

37
00:02:10,270 --> 00:02:15,520
We then navigated back over to streams at three and then we attempt to select the stream with idea of

38
00:02:15,520 --> 00:02:17,250
three from the redux store.

39
00:02:17,440 --> 00:02:20,540
But now in this case we have already fetched our data.

40
00:02:20,560 --> 00:02:23,830
So we then see the appropriate stream appear.

41
00:02:24,310 --> 00:02:25,730
So that's the big issue here.

42
00:02:25,750 --> 00:02:30,460
The big issue is that we are trying to make get access to some data that has not yet been loaded up

43
00:02:30,460 --> 00:02:32,200
into our application.

44
00:02:32,200 --> 00:02:36,910
The big lesson the thing I want you to really understand here about re-act router is that anytime that

45
00:02:36,910 --> 00:02:40,750
you are using this kind of ID based selection you are l.

46
00:02:40,990 --> 00:02:43,180
We always have to obey this rule.

47
00:02:43,450 --> 00:02:47,830
We always need to make sure that any component that is going to be shown on a screen is going to be

48
00:02:47,830 --> 00:02:51,760
designed to work by itself or in isolation.

49
00:02:51,790 --> 00:02:56,290
So essentially that means that every component that re-act router does is going to show needs to fetch

50
00:02:56,350 --> 00:02:57,610
its own data.

51
00:02:57,670 --> 00:03:02,860
We really cannot assume that any given component will get access to some data that might have been loaded

52
00:03:02,860 --> 00:03:04,870
up previously inside the application.

53
00:03:04,870 --> 00:03:06,610
We've already seen that that's not the case.

54
00:03:06,790 --> 00:03:12,150
If a user navigates directly to streams at 3 there are no streams to select from.

55
00:03:12,220 --> 00:03:17,200
So our stream edit component needs to load up the appropriate stream it needs to call the action creator

56
00:03:17,410 --> 00:03:24,080
to reach out to the API and fetch the stream with ID 3 so that it can then show it on the screen.

57
00:03:24,080 --> 00:03:26,700
All right so that's pretty much the big lesson here.

58
00:03:26,750 --> 00:03:31,880
We just need to make sure that every component is not going to have some dependency on a user visiting

59
00:03:31,880 --> 00:03:36,380
some other route inside of our application ahead of time because that's our that's never going to be

60
00:03:36,380 --> 00:03:37,390
the case.

61
00:03:37,400 --> 00:03:42,560
Now you might think that was Stephen A user can only get to this page by clicking on the Edit button

62
00:03:42,560 --> 00:03:42,980
right here.

63
00:03:42,980 --> 00:03:48,470
So in this application Yeah you know we always have to see streamlets before we can go to the edit page

64
00:03:48,710 --> 00:03:50,450
but that's not really the case.

65
00:03:50,660 --> 00:03:55,200
If a user comes to this page directly they could easily bookmark the page right.

66
00:03:55,220 --> 00:04:00,770
They could book market and then come back directly to a URL of streams at three and that would completely

67
00:04:00,770 --> 00:04:03,080
bypass the stringless component.

68
00:04:03,080 --> 00:04:07,180
In addition a user might copy this link right here and share it with a friend.

69
00:04:07,340 --> 00:04:11,840
The friend might click on it come to this page and then expect to see the appropriate stream appear.

70
00:04:11,960 --> 00:04:17,150
So it's entirely possible that your users are always going to come directly to a given route inside

71
00:04:17,150 --> 00:04:18,180
your application.

72
00:04:18,200 --> 00:04:23,380
And so every route and every component shown by that route needs to fetch its own data and it cannot

73
00:04:23,390 --> 00:04:27,340
rely upon some other component fetching data ahead of time for it.

74
00:04:28,110 --> 00:04:31,220
OK so now that we understand the issue here let's fix it up.

75
00:04:31,230 --> 00:04:37,530
Let's take a quick pause and when we come back we're going to make sure that stream at it tends to fetch

76
00:04:37,620 --> 00:04:39,230
the stream that it's trying to show.

77
00:04:39,440 --> 00:04:44,130
So that if we navigate directly to this component it will fetch the appropriate stream from our API

78
00:04:44,340 --> 00:04:47,830
put it into the redux store and then select it from that store.

79
00:04:48,000 --> 00:04:50,330
So quick pause and I'll see you in just a minute.