1
00:00:00,880 --> 00:00:04,290
Unless section we're able to render out our list of songs on the screen.

2
00:00:04,290 --> 00:00:08,560
So now we need to make sure that any time that a user clicks on one of these select buttons we somehow

3
00:00:08,560 --> 00:00:11,330
try to select that song so to speak.

4
00:00:11,350 --> 00:00:15,960
Now when we select a song what we really want to do is update the data where the state of our redux

5
00:00:15,990 --> 00:00:17,010
store.

6
00:00:17,020 --> 00:00:22,460
Remember any time that we want to update our data with redux we have to call an action creator.

7
00:00:22,480 --> 00:00:27,310
Now we've already put together an action creator inside of our actions index not just file that will

8
00:00:27,310 --> 00:00:29,040
attempt to select a song.

9
00:00:29,350 --> 00:00:31,350
So we call this action create or select song.

10
00:00:31,480 --> 00:00:37,300
If we pass a song object to it it will return in action with it type of song selected.

11
00:00:37,420 --> 00:00:39,340
And our payload of song.

12
00:00:39,880 --> 00:00:46,210
This action should then end up inside of our selected song reducer which is inside of our reducers index

13
00:00:46,680 --> 00:00:47,430
file.

14
00:00:47,860 --> 00:00:52,900
So this reducer is going to look at the action type if it is equal to song selected then it's going

15
00:00:52,900 --> 00:00:54,550
to return that particular song.

16
00:00:54,850 --> 00:01:00,190
Otherwise if it is a action with a different type then it's going to just return whatever the currently

17
00:01:00,250 --> 00:01:02,270
selected song is.

18
00:01:02,470 --> 00:01:02,930
All right.

19
00:01:03,040 --> 00:01:07,140
So all we really have to do now is figure out how to call that action creator.

20
00:01:08,980 --> 00:01:13,930
As a quick reminder I told you in passing a couple of videos ago that the Kinect function is going to

21
00:01:13,930 --> 00:01:19,300
be used not only to get data out of our store but the connect function can also be used to kind of get

22
00:01:19,360 --> 00:01:23,120
action creators correctly into our song list.

23
00:01:23,200 --> 00:01:27,590
So we're going to import our action creator that we created number that function that we just looked

24
00:01:27,590 --> 00:01:32,750
at two seconds ago and we're going to essentially wire it up to this connect helper.

25
00:01:32,750 --> 00:01:41,930
All right so back inside my song list at the very top I'm going to import select song from actions.

26
00:01:41,950 --> 00:01:47,860
Now remember when we created select song the action creator we export it as a named export from this

27
00:01:47,860 --> 00:01:48,960
file.

28
00:01:49,000 --> 00:01:52,060
That is why we are using the curly braces right here.

29
00:01:52,060 --> 00:01:58,600
If we had exported it using the default keyword we would not use the curly braces.

30
00:01:58,610 --> 00:02:02,880
All right so now that we've got our action creator this is the plain function by itself.

31
00:02:02,880 --> 00:02:06,480
We're going to pass it into that connect function at the bottom.

32
00:02:06,570 --> 00:02:12,020
So I'm going to go down to the bottom and then as a second argument to the connect function I'm going

33
00:02:12,020 --> 00:02:20,840
to pass in an object's this object is going to have a key of select song and a value of the action creator

34
00:02:21,050 --> 00:02:22,270
that we just imported.

35
00:02:23,690 --> 00:02:27,300
Notice now that the key and the value inside this object are identical.

36
00:02:27,380 --> 00:02:33,680
So we can use a little bit of yes 20:15 syntax to shorten this up and reduce down to just say select

37
00:02:33,680 --> 00:02:40,650
song like so still inside of a set of curly braces.

38
00:02:40,660 --> 00:02:47,070
All right so there's the line in total now that we are passing in a second argument here the connect

39
00:02:47,070 --> 00:02:54,620
function is going to take that select song action creator and pass it into our component as a prop to

40
00:02:54,630 --> 00:02:57,920
again inside the render method a log.

41
00:02:57,960 --> 00:03:00,250
This prompts.

42
00:03:00,450 --> 00:03:04,780
Now when I save this you'll notice that my code formatter kicked in and did a little bit of a reactor

43
00:03:04,840 --> 00:03:05,680
right there.

44
00:03:05,680 --> 00:03:08,540
It still totally equivalent to what you just saw a moment ago.

45
00:03:09,230 --> 00:03:09,480
All right.

46
00:03:09,480 --> 00:03:13,400
So I'm going to save this file and we'll flip back over.

47
00:03:13,410 --> 00:03:15,840
It's now inside of my console log right here remember.

48
00:03:15,860 --> 00:03:17,130
This is my prop's object.

49
00:03:17,150 --> 00:03:20,140
I see that I have a function here called select song.

50
00:03:20,150 --> 00:03:21,830
So that's our action creator.

51
00:03:21,830 --> 00:03:27,130
And if we call it it's going to automatically take the action that gets returned and send it in to read

52
00:03:27,130 --> 00:03:28,850
ox's dispatch function.

53
00:03:30,000 --> 00:03:34,380
Now when I say that last sentence right there I said take the action that gets returned and send it

54
00:03:34,380 --> 00:03:35,720
into the dispatch function.

55
00:03:35,730 --> 00:03:38,970
I'm kind of glossing over a tremendous amount of complexity.

56
00:03:39,180 --> 00:03:40,910
So what is the complexity there.

57
00:03:40,930 --> 00:03:42,980
Well I want to point out something kind of interesting.

58
00:03:42,990 --> 00:03:48,300
Notice how we imported the action created right here and then rather than just directly calling it inside

59
00:03:48,300 --> 00:03:52,290
of our component like rather than just saying hey let's call select song.

60
00:03:52,350 --> 00:03:58,250
You notice that we went through all this extra work of passing it to the connect function instead.

61
00:03:58,320 --> 00:04:02,580
So you might be all that curious why we went through that extra work of passing it to connect as opposed

62
00:04:02,580 --> 00:04:05,340
to just directly calling it inside of our component.

63
00:04:05,340 --> 00:04:08,640
So we're going to investigate exactly why that is in just a moment.

64
00:04:08,700 --> 00:04:12,900
But before we do I want to make sure that we can call the action creator from within our component and

65
00:04:12,960 --> 00:04:14,260
actually select a song.

66
00:04:14,430 --> 00:04:19,680
So let's make the app work first and then I'll tell you a lot more about exactly what is going on with

67
00:04:19,680 --> 00:04:24,690
the connect function right here and why we are passing it this object with a action creator inside of

68
00:04:24,690 --> 00:04:25,360
it.

69
00:04:25,750 --> 00:04:26,000
OK.

70
00:04:26,010 --> 00:04:31,740
So to make sure that we correctly call the action Creator I'm going to find my button inside of render

71
00:04:31,740 --> 00:04:36,390
list I'm going to get myself a little bit more space on that tag.

72
00:04:42,280 --> 00:04:44,590
Like so.

73
00:04:44,710 --> 00:04:49,520
And then on the button elements I'm going to pass in a on click event handler.

74
00:04:49,850 --> 00:04:56,420
So anytime that someone calls this I want to run a function that's going to call this prop's select

75
00:04:56,420 --> 00:05:03,680
song and I'm going to pass in the current song that we are iterating over.

76
00:05:03,700 --> 00:05:04,080
All right.

77
00:05:04,160 --> 00:05:07,930
So let's save this and we're going to test it out really quickly.

78
00:05:07,930 --> 00:05:09,220
So I'll flip back over.

79
00:05:09,490 --> 00:05:10,870
I'll make sure that I refresh.

80
00:05:10,960 --> 00:05:15,160
And now if I click on select Well it appears that basically nothing really happens.

81
00:05:15,280 --> 00:05:20,740
So I remember right now we might be successfully updating our state object or the state inside of our

82
00:05:20,740 --> 00:05:25,150
redux store but we don't really have any indication of that whatsoever right now.

83
00:05:25,150 --> 00:05:30,670
In order to see our changing state one thing we could do very easily is go down to our map state to

84
00:05:30,670 --> 00:05:31,800
prop's function.

85
00:05:31,840 --> 00:05:36,780
Remember this function right here gets called with all the data inside of a redux store.

86
00:05:36,780 --> 00:05:42,370
Anytime that we change our redux States or any time that we rerun our reducers and produce some new

87
00:05:42,370 --> 00:05:48,850
state object the map state props map states the function is going to rerun with the newly created state

88
00:05:48,910 --> 00:05:49,930
object.

89
00:05:49,930 --> 00:05:54,640
So in other words every time that we click on that select button this function should rerun and it's

90
00:05:54,640 --> 00:05:59,480
going to be called with the new state object a second time or a third time or a fourth time.

91
00:05:59,680 --> 00:06:06,360
So we could add a console log inside of here and council log out the entire state.

92
00:06:06,570 --> 00:06:11,960
Then anytime that we click on a button we should see a new console log and we should see the new selected

93
00:06:11,960 --> 00:06:14,670
song printed up inside that state object.

94
00:06:15,000 --> 00:06:16,460
So I'm going to flip back over.

95
00:06:16,460 --> 00:06:19,640
You'll notice that right away I already see a console log here.

96
00:06:19,640 --> 00:06:22,730
So this is all of our state inside of the store.

97
00:06:22,730 --> 00:06:26,630
We have our list of songs and we have our default selected song of M..

98
00:06:26,900 --> 00:06:32,570
If I now click on the select button I'm going to see another console log and I see that I correctly

99
00:06:32,570 --> 00:06:35,470
have a selected song with a title and a duration.

100
00:06:35,480 --> 00:06:37,790
In this case the title is no scrubs.

101
00:06:38,130 --> 00:06:40,640
Ah these song titles these are the worst songs.

102
00:06:40,740 --> 00:06:43,430
All right if I do Mark arena I can select that one.

103
00:06:43,430 --> 00:06:49,490
And now I see a title like arena and if I want to do some Backstreet Boys here I can look at selected

104
00:06:49,490 --> 00:06:51,700
song and see the title of I Want It That Way.

105
00:06:51,980 --> 00:06:52,390
OK.

106
00:06:52,460 --> 00:06:54,740
So it looks like our application is definitely working.

107
00:06:54,740 --> 00:06:59,870
Any time we click on a button we are updating the state inside our store.

108
00:07:00,200 --> 00:07:05,300
But remember I had mentioned that it's kind of interesting that we are choosing to import the action

109
00:07:05,300 --> 00:07:11,390
creator right here and then pass it off to our Connector function as opposed to just directly calling

110
00:07:11,390 --> 00:07:14,590
the action creator whenever this button right here gets clicked.

111
00:07:14,750 --> 00:07:16,140
So let's take a quick pause right here.

112
00:07:16,160 --> 00:07:20,180
When we come back the next section we're going to have a quick discussion to help you understand exactly

113
00:07:20,240 --> 00:07:21,400
why we are doing that.