1
00:00:01,000 --> 00:00:05,020
In the last section we created our redux store and then passed it off to the provider.

2
00:00:05,030 --> 00:00:10,030
So now any component inside of an application can somehow get access to that redux store through the

3
00:00:10,030 --> 00:00:11,130
provider Tech.

4
00:00:11,440 --> 00:00:16,870
Let's say start to work on the re-act side of our application by creating a song list component and

5
00:00:16,870 --> 00:00:19,210
then hooking it up to our app component.

6
00:00:19,210 --> 00:00:23,760
So inside of my components directory I'm going to make a new file called Song list.

7
00:00:24,000 --> 00:00:25,260
Yes.

8
00:00:25,330 --> 00:00:33,040
And then inside of here I'll put together some pretty basic markup I'll say import re-act from re-act

9
00:00:34,350 --> 00:00:37,130
and then I'll create a class based component in here.

10
00:00:37,140 --> 00:00:42,580
So I'll say last song list extends re-act components.

11
00:00:42,840 --> 00:00:47,920
Now by the way since we've now seen exactly how that named export thing works this you know there's

12
00:00:47,940 --> 00:00:53,040
an alternate way that we can write out re-act component right here if we wanted to we could directly

13
00:00:53,040 --> 00:00:57,440
import the component base class from the re-act library like so.

14
00:00:57,600 --> 00:01:02,250
So we have both a default export and a named export on a single line.

15
00:01:02,340 --> 00:01:08,760
Now right next to extents we can write out simply component instead of re-act component.

16
00:01:08,760 --> 00:01:12,530
Now both ways are completely appropriate to define a component.

17
00:01:12,660 --> 00:01:16,730
There's not one way that is better than another in any way shape or form.

18
00:01:16,860 --> 00:01:23,510
So whichever way you like more personally you will see each of them just about 50 percent in the while

19
00:01:23,540 --> 00:01:27,670
like 50 percent of blog posts are going to show one way 50 percent are going to show another way.

20
00:01:27,750 --> 00:01:32,730
So it's really up to you which way that which way you define your base class right here are superclass

21
00:01:33,830 --> 00:01:34,300
I guess.

22
00:01:34,310 --> 00:01:37,470
Now inside of song list I want you to find my render method.

23
00:01:37,640 --> 00:01:45,900
And right now I'll just return a div that says song list and then after that I'll say export default

24
00:01:46,200 --> 00:01:48,260
song list.

25
00:01:48,360 --> 00:01:52,050
Let's now wire the thing up to our app component and then we'll start thinking about how we're going

26
00:01:52,050 --> 00:01:54,520
to implement this connect component as well.

27
00:01:55,610 --> 00:02:03,860
So I'm going to change back over to my apt just file at the top I will import song list from song list.

28
00:02:04,820 --> 00:02:11,330
And then I'll show that inside this things render method well put song list inside there and I'm going

29
00:02:11,330 --> 00:02:14,800
to turn it into a multi line GSX expression.

30
00:02:14,930 --> 00:02:21,040
Don't forget to clean up the semi-colon after that div right there make sure delete that thing.

31
00:02:21,090 --> 00:02:22,190
All right so that's it.

32
00:02:22,310 --> 00:02:26,820
I'm going to make sure I save both files and I should be able to flip back on to my application and

33
00:02:26,820 --> 00:02:29,410
see song list appear on the screen.

34
00:02:29,940 --> 00:02:32,260
Right now it's just kind of set our sights a little bit low.

35
00:02:32,280 --> 00:02:37,920
Let's say that we want to get our list of songs into the song list and just cancel log them.

36
00:02:37,920 --> 00:02:39,610
That's all I want to do for right now.

37
00:02:41,020 --> 00:02:46,900
So in order to do so we need to create an instance of this Kinect component right here and we need to

38
00:02:46,900 --> 00:02:52,750
pass it some configuration that gets it to reach back up to the provider and tell it that it wants to

39
00:02:52,750 --> 00:02:58,770
get the list of all the songs inside of our app so we're going to write out some code here that you're

40
00:02:58,770 --> 00:03:01,880
going to write out a billion times.

41
00:03:01,880 --> 00:03:06,020
Like just all the time you're going to write out the same stuff over and over again.

42
00:03:06,470 --> 00:03:11,850
This connect component thing is going to be defined directly inside of our song list component file

43
00:03:12,120 --> 00:03:18,090
because only the song list needs to create this connect function that reaches up and gets that list

44
00:03:18,090 --> 00:03:19,540
of songs.

45
00:03:19,560 --> 00:03:27,950
So at the top of the file I'm going to import connect from apps from re-act dash redux.

46
00:03:28,320 --> 00:03:30,420
And notice here that connect is lowercase.

47
00:03:30,420 --> 00:03:35,880
It is not capitalized it is lowercase to create a instance of the connect component.

48
00:03:35,880 --> 00:03:39,030
We're going to use some kind of strange looking syntax.

49
00:03:39,030 --> 00:03:39,390
OK.

50
00:03:39,420 --> 00:03:42,380
This is very strange looking syntax but bear with me.

51
00:03:42,390 --> 00:03:44,200
I'll tell you exactly how it works.

52
00:03:45,210 --> 00:03:51,450
So I'm going to go down to my export default down here and right in front of song list I'm going to

53
00:03:51,450 --> 00:03:58,890
say connect I'm going to place a set of parentheses and then I'm going to put a second set of parentheses

54
00:03:59,070 --> 00:04:01,480
around a song list like so.

55
00:04:01,530 --> 00:04:05,970
Now this might look like really weird syntax to you but trust me it is completely valid.

56
00:04:05,970 --> 00:04:09,060
Javascript code is to prove that to you.

57
00:04:09,070 --> 00:04:13,690
I'm going to save this file and then we're going to flip back over to our application and you're going

58
00:04:13,690 --> 00:04:17,890
to see that we still see our song list component on the screen.

59
00:04:17,930 --> 00:04:22,910
So before we try to configure this connect thing and get it to tell the provider that we want our list

60
00:04:22,910 --> 00:04:28,040
of songs I want to very quickly tell you about the syntax that you see right here by showing you a quick

61
00:04:28,100 --> 00:04:29,890
written example.

62
00:04:30,070 --> 00:04:32,790
So I going to flip on over to that little code editor over here.

63
00:04:32,920 --> 00:04:39,970
Remember you can get here by going to Stephen Grider dot dot IO slash J.S. playgrounds or you know actually

64
00:04:39,970 --> 00:04:43,580
we can go to slash playgrounds like so simpler.

65
00:04:43,940 --> 00:04:44,420
OK.

66
00:04:44,470 --> 00:04:48,610
So we're going to write out a function that essentially is going to end up with the same signature as

67
00:04:48,670 --> 00:04:50,380
what you see right here.

68
00:04:50,410 --> 00:04:57,780
So I'm going to define a function that I'll call a connect and then inside if you're going to return

69
00:04:58,740 --> 00:05:06,930
a function and whenever that thing gets called I'm just going to return a value of there like so.

70
00:05:06,940 --> 00:05:10,510
So we've got a function that returns a function.

71
00:05:10,510 --> 00:05:16,010
Now whenever I call that original function connects I don't immediately see anything out over here.

72
00:05:16,150 --> 00:05:19,480
But if I now add on a second set of parentheses I see that text.

73
00:05:19,480 --> 00:05:21,060
Hi there.

74
00:05:21,070 --> 00:05:24,410
So what is the connect function doing in the re-act redux library doing.

75
00:05:24,730 --> 00:05:29,260
Well all it's doing is returning a function and when we call the function that gets returned we put

76
00:05:29,260 --> 00:05:31,530
on the second set of princes right after.

77
00:05:31,540 --> 00:05:34,980
So connect right here the first set returns a function.

78
00:05:35,110 --> 00:05:37,800
The second set invokes the function that got returned.

79
00:05:37,810 --> 00:05:42,260
That's it completely valid Javascript code.

80
00:05:42,280 --> 00:05:45,000
So we understand that this is a valid javascript.

81
00:05:45,130 --> 00:05:46,760
Let's take another quick pause right here.

82
00:05:46,780 --> 00:05:52,240
When we come back the next section we're going to start to configure this connect function call so quick

83
00:05:52,240 --> 00:05:54,000
puzzle I'll see you in just a minute.