1
00:00:00,690 --> 00:00:04,800
In this video we're going to try to print up some information about the stream that the user is trying

2
00:00:04,800 --> 00:00:07,300
to access from our stream at component.

3
00:00:07,470 --> 00:00:11,760
Again we eventually want to show some text inputs here and whatnot but right now let's just make sure

4
00:00:11,760 --> 00:00:13,410
that we can load up the appropriate stream.

5
00:00:13,470 --> 00:00:18,210
So we know what default title and description we should put into these two text inputs.

6
00:00:18,210 --> 00:00:22,830
Now to do so we're going to use a combination of two sources of information.

7
00:00:22,830 --> 00:00:26,610
First off we need to know the idea of the stream that the user is trying to see.

8
00:00:26,720 --> 00:00:31,280
The idea of the stream that the user is trying to see is available inside of our prop's object underneath

9
00:00:31,320 --> 00:00:34,110
prop's match Puranas ID.

10
00:00:34,230 --> 00:00:38,020
So that right there is the idea of the stream that we are trying to access.

11
00:00:38,070 --> 00:00:42,570
Now the second source of information that we need to get access to the stream we care about is the list

12
00:00:42,570 --> 00:00:45,740
of streams inside of a redux state object.

13
00:00:45,840 --> 00:00:51,510
If you go back over to the main list of streams right here and then take a look at your redux step Tools

14
00:00:51,510 --> 00:00:56,310
panel you can click on that state button and you'll notice the up we've got that stream's object.

15
00:00:56,400 --> 00:01:00,300
We've got a key of three inside there and that is the stream that we care about.

16
00:01:00,480 --> 00:01:05,760
So essentially between the props object right here and the list of streams that we have inside of our

17
00:01:05,760 --> 00:01:11,400
state store we can somehow select the stream with an idea of 3 and then print up some information about

18
00:01:11,400 --> 00:01:14,450
it inside of our component.

19
00:01:14,550 --> 00:01:21,450
All right so I'm going to resize a couple of things here really quickly and I'm going to go back to

20
00:01:21,450 --> 00:01:26,790
the edit screen and then going to flip back over to my code editor and we're going to read out a little

21
00:01:26,790 --> 00:01:31,640
bit of code to get the appropriate stream out of our state store and printed up.

22
00:01:31,740 --> 00:01:36,420
Now in order to get some information out of our redux store we're going to use the exact same process

23
00:01:36,420 --> 00:01:43,830
that we have every single time before we're going to add in the connect function to our file from re-act

24
00:01:43,830 --> 00:01:44,680
redux.

25
00:01:44,880 --> 00:01:49,320
Well then define a map state to prop's function and wire that up to stream at it.

26
00:01:49,320 --> 00:01:53,780
So that is how we're going to get our list of streams into the component.

27
00:01:53,790 --> 00:01:54,120
All right.

28
00:01:54,120 --> 00:01:56,520
So define my map state to prop's

29
00:01:59,810 --> 00:02:01,090
right here.

30
00:02:02,330 --> 00:02:08,510
And then inside if you're going to want to return an object that has a stream property and we're going

31
00:02:08,510 --> 00:02:12,140
to want the value for this thing to be the stream that the user is trying to edit.

32
00:02:12,290 --> 00:02:16,760
Remember we're going to eventually take the title and description from it and show them inside those

33
00:02:16,910 --> 00:02:18,710
text inputs so a user can edit them.

34
00:02:18,740 --> 00:02:23,320
But right now we're just trying to print up the title and description inside of stream at it.

35
00:02:23,330 --> 00:02:27,590
So now we're in a little bit of a bind here and this is actually a very similar situation that we've

36
00:02:27,590 --> 00:02:29,870
been ran into in the past.

37
00:02:29,870 --> 00:02:36,650
Our stream at edit component has access to the prop's object and that prop's object is what knows about

38
00:02:36,650 --> 00:02:41,390
the ID that we're trying to show or the idea of the stream that we're trying to show.

39
00:02:41,390 --> 00:02:46,440
But that prop's object appears to only be accessible inside of the stream edit function.

40
00:02:46,550 --> 00:02:51,860
On the other hand maps state to prop's is what it knows about the big list of streams that's entirely

41
00:02:51,860 --> 00:02:53,860
stored inside of our state object.

42
00:02:54,110 --> 00:02:56,850
So one source of information is available up here.

43
00:02:56,900 --> 00:02:59,470
The other source of information is available down here.

44
00:02:59,690 --> 00:03:05,280
Well like I said remember we have ran into this situation before and we had learned that our map state

45
00:03:05,280 --> 00:03:08,860
the Propst function actually gets called with two separate arguments.

46
00:03:08,930 --> 00:03:13,780
The first argument is always our state object and we're just about always going to make use of that.

47
00:03:13,880 --> 00:03:21,380
The second argument is the own prop's argument and this is a reference to the prop's object that shows

48
00:03:21,380 --> 00:03:24,240
up inside our stream edit component.

49
00:03:24,260 --> 00:03:27,650
Just to help you remember exactly what own prop's is right there.

50
00:03:27,740 --> 00:03:31,250
I'm going to delete the console log inside of my component.

51
00:03:31,250 --> 00:03:33,020
I'm going to add a console log.

52
00:03:34,610 --> 00:03:37,580
Of own props inside of maps data props.

53
00:03:37,710 --> 00:03:41,880
And then to make sure that I have some valid syntax here I'll say Stream is no.

54
00:03:41,880 --> 00:03:44,310
Right now just so I have an actual value there.

55
00:03:44,310 --> 00:03:45,630
We're not going to livestream is nil.

56
00:03:45,630 --> 00:03:48,540
I just want to get my code to run successfully inside the browser.

57
00:03:48,930 --> 00:03:50,660
And then finally to test this out.

58
00:03:50,850 --> 00:03:52,730
I'll set up my connect function at the bottom

59
00:03:56,260 --> 00:03:57,080
like so.

60
00:03:57,440 --> 00:03:57,720
OK.

61
00:03:57,740 --> 00:03:58,640
Let's now save this.

62
00:03:58,650 --> 00:04:02,830
We'll take a look at the console log of own props inside of map state the props.

63
00:04:03,030 --> 00:04:06,260
So I going to save this all flip back over.

64
00:04:06,260 --> 00:04:08,450
And now I see my console log right here.

65
00:04:08,450 --> 00:04:12,030
Now notice it is the same exact looking prop's object to the consulate.

66
00:04:12,050 --> 00:04:13,080
We had previously.

67
00:04:13,160 --> 00:04:16,310
I see that it has the match programmes id property.

68
00:04:16,550 --> 00:04:21,100
So again any time that maps state to prop's is called we actually get two arguments.

69
00:04:21,140 --> 00:04:23,640
The first is all the state out of our redux store.

70
00:04:23,660 --> 00:04:26,700
The second is the prop's object that shows up inside of our components.

71
00:04:26,740 --> 00:04:31,190
So now inside of map state to prop's we have all the information we need.

72
00:04:31,190 --> 00:04:36,230
We know the idea of the string that we're trying to access and we also have our big object with all

73
00:04:36,230 --> 00:04:39,630
of our streams in the form of the state object right here.

74
00:04:39,680 --> 00:04:42,950
So I'm going to go ahead and remove that console log.

75
00:04:44,940 --> 00:04:46,470
I'm going to remove the No.

76
00:04:47,260 --> 00:04:49,380
Well then go into our state object.

77
00:04:49,570 --> 00:04:54,610
We're going to get our list of streams and then remember our streams variable right there are the streams

78
00:04:54,610 --> 00:05:00,370
property refers to an object where the keys of that object are the IDs of all the streams that we've

79
00:05:00,370 --> 00:05:01,310
loaded up.

80
00:05:01,390 --> 00:05:05,120
So we had done that to make sure that writing out a producer was really easy and straightforward.

81
00:05:05,200 --> 00:05:07,050
But there's another benefit as well.

82
00:05:07,060 --> 00:05:12,010
The other benefit is that any time that you want to select a record out of that object by using an ID

83
00:05:12,250 --> 00:05:15,980
or we have to do is use the very familiar bracket notation.

84
00:05:16,030 --> 00:05:22,090
So inside of the streams object we want to find the stream with an ID of three.

85
00:05:22,180 --> 00:05:30,980
So inside those square brackets we're going to reference own props match BRAMs dot ID.

86
00:05:31,180 --> 00:05:40,760
So right here stream's own props dot match dot prams dot Id like so.

87
00:05:40,880 --> 00:05:45,680
So that should select the appropriate stream out of the object that contains all of our streams inside

88
00:05:45,680 --> 00:05:50,840
of our redux store assign that to the stream property inside this object and then return it from map

89
00:05:50,840 --> 00:05:56,900
state to prop's So the final result of all this is that our prop's object should now have a stream property

90
00:05:57,260 --> 00:06:01,480
that contains the stream that our user is trying to edit.

91
00:06:01,490 --> 00:06:06,810
Now before we tried to walk or print out some information about that stream and this div right here.

92
00:06:06,830 --> 00:06:12,200
Let's first do one more conc a log of prop's right here because there's going to be some kind of interesting

93
00:06:12,290 --> 00:06:15,430
unexpected behavior that I want you to see.

94
00:06:15,560 --> 00:06:17,730
So I'm going to add in the console log of props.

95
00:06:17,750 --> 00:06:23,440
I'll then save this and then we will flip back over to our browser and take a look at what happens.

96
00:06:23,550 --> 00:06:25,470
Not going to do a hard refresh here.

97
00:06:25,730 --> 00:06:27,040
There's my console log.

98
00:06:27,080 --> 00:06:28,490
So now I'll expand this.

99
00:06:28,640 --> 00:06:33,460
And when I do so you'll notice that stream's showed up as undefined.

100
00:06:33,840 --> 00:06:34,400
Huh.

101
00:06:34,700 --> 00:06:40,520
Well if stream is undefined that means that we did not successfully pull the appropriate stream out

102
00:06:40,520 --> 00:06:42,680
of our streams object right here.

103
00:06:42,680 --> 00:06:46,040
It means that something is going wrong with that little chunk of code.

104
00:06:46,170 --> 00:06:48,710
But let me show you some really interesting behavior.

105
00:06:48,830 --> 00:06:54,930
I'm going to navigate back to my big list of streams by clicking on you up your.

106
00:06:55,120 --> 00:06:57,670
And then I'm going to click on the Edit button again.

107
00:06:58,930 --> 00:07:02,450
Now as soon as Stream at it loads up we get a second console log here.

108
00:07:02,530 --> 00:07:08,380
Again that's from the console log inside of our component and I'm going to expand the second console

109
00:07:08,380 --> 00:07:13,890
log and when I do so you'll notice that the stream is now appearing correctly.

110
00:07:14,080 --> 00:07:18,250
So it seems like when we first loaded up this page we had no stream.

111
00:07:18,250 --> 00:07:22,840
But then when we started to navigate around a little bit it seemed like the streams suddenly showed

112
00:07:22,840 --> 00:07:23,680
up.

113
00:07:23,680 --> 00:07:25,640
So that's kind of unexpected behavior.

114
00:07:25,810 --> 00:07:29,640
Just to make sure this is really clear let's run through this one more time very quickly.

115
00:07:29,680 --> 00:07:31,400
I'm at stream's at three.

116
00:07:31,480 --> 00:07:37,780
I'm going to refresh the page when I refreshed the page I see my console log again stream is undefined.

117
00:07:37,840 --> 00:07:43,780
But if I now go back to stream me and then click on the Edit button again I see that stream has now

118
00:07:43,780 --> 00:07:47,440
showed up correctly I've got the entire object right there.

119
00:07:47,440 --> 00:07:47,700
All right.

120
00:07:47,710 --> 00:07:50,050
So again this is kind of interesting behavior.

121
00:07:50,050 --> 00:07:51,180
Let's take a pause right here.

122
00:07:51,190 --> 00:07:54,640
When we come back the next section we're going to take a look at a diagram to make sure that you really

123
00:07:54,670 --> 00:07:58,150
understand why we are sometimes seeing stream of undefined.

124
00:07:58,300 --> 00:08:01,970
And then sometimes we are seeing the string with the appropriate value inside of it.

125
00:08:02,020 --> 00:08:04,270
So a quick pause and I'll see you in just a minute.