1
00:00:00,820 --> 00:00:04,270
In this video we're going to start putting together our song detail component.

2
00:00:04,320 --> 00:00:09,780
So remember all this thing needs to do is show some information about the currently selected song to

3
00:00:09,780 --> 00:00:12,040
get a better idea of how we're going to put this together.

4
00:00:12,040 --> 00:00:16,170
Let's take a look at one quick diagram so that you can understand how we're going to use the connect

5
00:00:16,180 --> 00:00:17,370
function here.

6
00:00:17,370 --> 00:00:21,700
Now we already looked at the diagram just like this one but it was for the song list.

7
00:00:21,750 --> 00:00:24,500
So we're now going to change it just a little bit for the song detail.

8
00:00:24,510 --> 00:00:31,170
Instead the song detail needs to know about some information that is stored inside of our redux store.

9
00:00:31,260 --> 00:00:34,840
So we're going to rap our song detail with the Kinect component.

10
00:00:34,890 --> 00:00:40,080
We're going to define a map state to prop's function that's going to essentially tell the provider Hey

11
00:00:40,170 --> 00:00:46,950
tell me any time that the selected song changes in response the provider is going to tell the connect

12
00:00:46,950 --> 00:00:47,640
function.

13
00:00:47,790 --> 00:00:53,340
But every single time that the user clicks on a select button and they select a song changes the connect

14
00:00:53,340 --> 00:00:58,740
function is then going to take the currently selected song and pass it as a prop down into the song

15
00:00:58,740 --> 00:01:00,430
detail component.

16
00:01:00,450 --> 00:01:05,430
Now the song detail component has absolutely no functionality tied to it that is going to somehow allow

17
00:01:05,430 --> 00:01:09,660
a user to click on something or drag something or type something in.

18
00:01:09,750 --> 00:01:12,330
That would cause a change to a redux state.

19
00:01:12,360 --> 00:01:17,390
So we do not need to wire up any action creators to our song detail component.

20
00:01:17,770 --> 00:01:18,000
OK.

21
00:01:18,030 --> 00:01:19,200
So let's get to it.

22
00:01:19,200 --> 00:01:25,720
I'm going to flip back over to my code editor and inside my components directory I'll make a new file

23
00:01:25,720 --> 00:01:27,500
called Song detail.

24
00:01:27,610 --> 00:01:28,680
Yes.

25
00:01:28,750 --> 00:01:34,570
And then at the top I'm going to import re-act from react and I'll also import the connect function

26
00:01:34,630 --> 00:01:37,550
from re-act redux.

27
00:01:37,640 --> 00:01:42,530
Then inside if you're not going to make a class based component this time around you do not have to

28
00:01:42,530 --> 00:01:45,480
make a class based component to work with the connect function.

29
00:01:45,500 --> 00:01:49,880
You can work with the connect function with a functional component as well.

30
00:01:49,880 --> 00:01:56,450
So inside if you're going to say Konst song detail is going to be a functional component and for right

31
00:01:56,550 --> 00:02:01,920
now return a div with a text song detail.

32
00:02:02,040 --> 00:02:06,060
Then at the bottom I'm going to export default song detail.

33
00:02:06,590 --> 00:02:09,470
OK so that's just going to show the component by itself.

34
00:02:09,480 --> 00:02:14,760
But like we just said we want to wrap the song detail with the connect component so that we can get

35
00:02:14,760 --> 00:02:16,940
some information out of our redux store.

36
00:02:17,250 --> 00:02:24,790
So to do so I'm going to define a map state to prop's function.

37
00:02:24,840 --> 00:02:29,070
Remember this function right here is going to be called with our entire state objects so we're going

38
00:02:29,070 --> 00:02:34,050
to reach into that state object and pull out just the property that we care about and return it as an

39
00:02:34,050 --> 00:02:36,630
object from this function right here.

40
00:02:36,630 --> 00:02:42,870
So in this case if we go back over to a reducers index file we can look at the combined reducers function

41
00:02:42,870 --> 00:02:44,080
call right here.

42
00:02:44,130 --> 00:02:50,310
Remember the keys on this object are going to be the keys inside of our state object so our selected

43
00:02:50,310 --> 00:02:56,330
song is going to be available on state DOT selected song.

44
00:02:56,350 --> 00:03:03,670
So back over here to get my currently selected song I can refer to state DOT selected song.

45
00:03:03,680 --> 00:03:08,720
Now I'm going to put this into a object with the key of a song.

46
00:03:08,750 --> 00:03:11,020
We don't have to call this things selected song.

47
00:03:11,090 --> 00:03:16,820
We don't have to copy the key name on either side so I'll just call it simply a song and I'll make sure

48
00:03:16,820 --> 00:03:18,510
that I return it from that function.

49
00:03:21,430 --> 00:03:23,670
It's now done at the export default.

50
00:03:23,670 --> 00:03:27,080
I'm going to call connect or put one set of parentheses.

51
00:03:27,120 --> 00:03:32,640
I'll put the second set around song detail and then as the first argument to the connect function I'll

52
00:03:32,640 --> 00:03:36,750
pass in map state to prop's.

53
00:03:36,860 --> 00:03:42,170
So now up inside of my song detail component this thing should be getting a prop's object that is going

54
00:03:42,170 --> 00:03:44,650
to contain the currently selected song.

55
00:03:45,170 --> 00:03:47,660
So I'm going to refer to that argument as props.

56
00:03:47,660 --> 00:03:54,110
And if right now will just cancel log out props like the all right that's pretty much it for the song

57
00:03:54,110 --> 00:03:55,330
detail for right now.

58
00:03:55,340 --> 00:03:58,480
Now we need to make sure that this thing actually shows up in our application.

59
00:03:58,610 --> 00:04:01,280
So we have to go back over to our app component.

60
00:04:01,280 --> 00:04:06,160
We have to import song detail at the top.

61
00:04:08,760 --> 00:04:12,220
And then we have to put this into the components.

62
00:04:12,420 --> 00:04:13,800
Returned GSX.

63
00:04:13,800 --> 00:04:19,920
BLOCK So right after the div right here with column 8 wide I'm going to put another div right after

64
00:04:19,920 --> 00:04:20,470
it.

65
00:04:20,700 --> 00:04:29,360
It's also going to have a class name of column 8 wide and then inside of that div I'll put on song detail

66
00:04:29,450 --> 00:04:31,640
like so.

67
00:04:31,650 --> 00:04:36,630
So this is another good example of where our app component is no longer going to be really in charge

68
00:04:36,690 --> 00:04:40,320
of customizing any of the child components that it renders.

69
00:04:40,590 --> 00:04:44,540
That's absolutely what happened in the past before we had the app component in charge of everything.

70
00:04:44,550 --> 00:04:50,640
And it passed a lot of config into our different components but now we are relying upon redux to provide

71
00:04:50,670 --> 00:04:55,350
all the configuration that we really care about and all that changing data and the ability to change

72
00:04:55,350 --> 00:04:59,620
data is being passed directly into the components themselves.

73
00:04:59,620 --> 00:04:59,830
All right.

74
00:04:59,830 --> 00:05:02,820
So let's now flip back over.

75
00:05:02,920 --> 00:05:04,670
Now I see a console log right away.

76
00:05:04,780 --> 00:05:09,100
So this is the prop's object inside of our song detail a component just as before.

77
00:05:09,130 --> 00:05:13,030
We see that it gets the dispatch function directly.

78
00:05:13,190 --> 00:05:15,620
We usually do not make use of that dispatch function directly.

79
00:05:15,620 --> 00:05:20,000
Instead we wire up our action creators to the connect function as we saw just a moment ago.

80
00:05:21,300 --> 00:05:25,290
Now we have got a prop inside the props object of song equal to nil.

81
00:05:25,380 --> 00:05:30,490
The reason it's nil is because when our application first starts up we do not yet have a selected song.

82
00:05:30,570 --> 00:05:32,960
And so we see a value of note right there.

83
00:05:32,970 --> 00:05:39,300
But now if I clicked on the select button right here we called an action creator which updated a reducer

84
00:05:39,570 --> 00:05:42,330
that updated our state inside of a redux store.

85
00:05:42,360 --> 00:05:47,460
Anytime we update the data inside our redux store by dispatching an action or essentially calling an

86
00:05:47,460 --> 00:05:53,280
action Creator it causes all of our components that are hooked up to the connect function to automatically

87
00:05:53,280 --> 00:05:54,240
render.

88
00:05:54,360 --> 00:05:59,850
And so this second called Zilog right here is from our song detail component automatically being re

89
00:05:59,880 --> 00:06:05,780
rendered and inside there we can see that we have a song property with the song that I had selected.

90
00:06:05,850 --> 00:06:10,830
And so now I can click on select for another song and I'll see a second concert's me a third council

91
00:06:10,830 --> 00:06:11,100
log.

92
00:06:11,100 --> 00:06:16,430
Now as our component gets re rendered a second time and so I can keep doing that.

93
00:06:16,440 --> 00:06:19,320
And every time we click on that component automatically renders.

94
00:06:19,580 --> 00:06:23,840
OK so now our song detail component definitely knows what the selected song is.

95
00:06:23,910 --> 00:06:29,790
So the last thing we do is take the selected song and render out some information about it on the screen.

96
00:06:29,790 --> 00:06:32,080
So quick pause will take care of that in the next video.