1
00:00:00,940 --> 00:00:05,590
In less sexually defined a connect function inside of our song list component.

2
00:00:05,810 --> 00:00:11,330
So remember this connecting right here even though it doesn't really look like it is actually a re-act

3
00:00:11,330 --> 00:00:12,450
component.

4
00:00:12,710 --> 00:00:16,150
It's a reaction upon it that we're going to pass some configuration to.

5
00:00:16,580 --> 00:00:21,710
We're going to specifically tell this connecting that we want to get a list of songs out of our redux

6
00:00:21,710 --> 00:00:23,410
store from the provider.

7
00:00:23,720 --> 00:00:29,060
So anytime that our list of songs and side of our store changes that provider is going to automatically

8
00:00:29,060 --> 00:00:33,950
notify our connect function right here and the connect function is then going to pass our list of songs

9
00:00:34,190 --> 00:00:37,310
down to our song list component.

10
00:00:37,390 --> 00:00:42,200
So let's now figure out how we can configure this connect function or connect component and tell it

11
00:00:42,260 --> 00:00:47,090
that we want to get some specific data out of our redux store.

12
00:00:47,090 --> 00:00:52,100
All right so to do so we're going to come back over here and I'm going to define a function right above

13
00:00:52,130 --> 00:00:54,280
our export default statement.

14
00:00:54,310 --> 00:01:03,130
Now by convention this is Convention we normally call this function the map state to prop's function

15
00:01:07,190 --> 00:01:09,620
so now this can be an arrow function.

16
00:01:09,620 --> 00:01:10,850
It could be a function keyword.

17
00:01:10,850 --> 00:01:15,900
You will see it defined both ways map state to prop's.

18
00:01:15,930 --> 00:01:18,400
So this is a very crazy little function name.

19
00:01:18,420 --> 00:01:22,910
But if you really kind of read it it will eventually start to make a little bit more sense.

20
00:01:22,920 --> 00:01:28,380
This is saying that we're going to take our state object essentially all of the data that's inside of

21
00:01:28,380 --> 00:01:34,350
our redux store and we're going to run some calculation on it or some computation that's going to cause

22
00:01:34,350 --> 00:01:38,520
that data to eventually show up as props inside of our component.

23
00:01:38,520 --> 00:01:43,840
So that's the meaning of map state to process this function does not have to be called Map state to

24
00:01:43,850 --> 00:01:50,910
prop's we could just as easily call it get my states like so we can call it anything we want but by

25
00:01:50,910 --> 00:01:58,030
convention you're usually going to see this defined as something called Map state to prop's this map

26
00:01:58,030 --> 00:02:03,210
state to prop's function is going to be called with all of the state inside of a redux store.

27
00:02:03,520 --> 00:02:08,800
So that state right there is essentially going to be our entire list of songs from the song list reducer

28
00:02:09,490 --> 00:02:14,860
and are currently selected songs from the selected song reduce her state right here.

29
00:02:14,920 --> 00:02:20,500
All of that data inside of a redux store if we were still working on that insurance application the

30
00:02:20,500 --> 00:02:27,580
state object right here would contain our accounts and our policies and our claims history properties

31
00:02:27,610 --> 00:02:28,470
as well.

32
00:02:29,610 --> 00:02:33,200
So then right now let's try just cons. logging that thing out.

33
00:02:33,330 --> 00:02:38,400
I mean to say console log States and then after that I'm going to say return state just to make sure

34
00:02:38,400 --> 00:02:39,890
that everything works just fine.

35
00:02:41,050 --> 00:02:46,720
Now after defining that function and then going to take it and pass it as the first argument to this

36
00:02:46,720 --> 00:02:48,020
connector function down here.

37
00:02:48,040 --> 00:02:50,260
So that's how we can figure this connect component.

38
00:02:50,260 --> 00:02:54,520
I've said several times oh yeah we need to configure connect in some way and tell it how to get some

39
00:02:54,520 --> 00:02:55,680
data from provider.

40
00:02:55,810 --> 00:03:03,150
We can figure it by passing it a function it's going to pass that as the first function to connect that

41
00:03:03,170 --> 00:03:04,500
state to props.

42
00:03:04,500 --> 00:03:09,240
Now again I want to remind you we can call this anything we want to call it so we could call it get

43
00:03:09,240 --> 00:03:10,440
my state if we want to.

44
00:03:10,440 --> 00:03:14,140
Nothing special about calling it map state to prop's.

45
00:03:14,150 --> 00:03:15,140
All right so let's save this.

46
00:03:15,140 --> 00:03:17,540
We're going to run it and see what happens.

47
00:03:17,540 --> 00:03:22,850
All right so I can flip back over and you'll immediately notice that we've got our state object printed

48
00:03:22,850 --> 00:03:23,920
out right here.

49
00:03:23,960 --> 00:03:30,020
We've got selected Saag that has all the data that was returned from our selected song reducer which

50
00:03:30,020 --> 00:03:31,640
by default was no.

51
00:03:31,970 --> 00:03:37,580
And then we've got these songs Saray as well that has those four song objects that we had to.

52
00:03:37,610 --> 00:03:42,500
So now we essentially want to pull off just this song's property and make sure that it somehow gets

53
00:03:42,500 --> 00:03:44,790
into our song list component.

54
00:03:44,810 --> 00:03:49,920
Remember the song component doesn't care about the selected song at all it just cares about songs.

55
00:03:51,680 --> 00:03:57,500
So to do so inside of my mouth state to prop's function right here I'm going to remove that council

56
00:03:57,580 --> 00:04:05,420
Lague and I'm going to remove the state right there and I'm going to replace it with an object this

57
00:04:05,420 --> 00:04:15,660
object is going to have a key of songs and its value will be state DOT songs like so so the object that

58
00:04:15,660 --> 00:04:22,160
we return from the map state to prop's function is going to show up as props inside of our component

59
00:04:22,490 --> 00:04:26,790
three essentially Sayne by returning the subject right here where essentially saying that at some point

60
00:04:26,790 --> 00:04:32,280
in time the future inside of our songless component if we say this start prop's it's going to be equal

61
00:04:32,280 --> 00:04:34,810
to exactly that object.

62
00:04:34,830 --> 00:04:35,160
Right.

63
00:04:35,200 --> 00:04:41,340
They're going to be an object that has a song's property and that will contain the list or the array

64
00:04:41,340 --> 00:04:43,260
of all of our songs.

65
00:04:43,290 --> 00:04:49,980
So that is exactly how we make use of the re-act redux library to get data from our redux store into

66
00:04:50,040 --> 00:04:51,290
a component.

67
00:04:51,390 --> 00:04:56,970
It's always going to be the exact same scenario we're always going to import connect at the top.

68
00:04:57,090 --> 00:05:02,990
We're always going to call connect and then pass in our component as the second function call.

69
00:05:03,010 --> 00:05:08,410
We're always going to define map state to prop's map state to prop's is always going to get a first

70
00:05:08,410 --> 00:05:13,840
argument of state and we're always going to return an object that is going to show up as props inside

71
00:05:13,840 --> 00:05:15,260
of our component.

72
00:05:15,610 --> 00:05:20,560
Now if any of that seemed mysterious then just do a quick replay of those last 15 seconds or if you

73
00:05:20,560 --> 00:05:26,230
missed anything in there to replay those last 15 seconds because that entire flow that I just mentioned

74
00:05:26,410 --> 00:05:29,440
is going to be repeated a billion times.

75
00:05:30,390 --> 00:05:33,450
On every single re-act project they you ever work on.

76
00:05:33,480 --> 00:05:36,540
It's always going to be the same code the see inside of your.

77
00:05:36,540 --> 00:05:41,730
Over and over and over again always import connects always the component always maps state to props

78
00:05:41,880 --> 00:05:46,020
and then always export default connect your components right there.

79
00:05:46,960 --> 00:05:52,300
All right so with that further ado inside of my components I'm going to try doing a console log of this

80
00:05:52,600 --> 00:05:57,070
props like so let's just see what data shows up inside that component.

81
00:05:57,250 --> 00:05:58,720
So I'll flip back over.

82
00:05:58,720 --> 00:06:00,460
And now here's my prop's object.

83
00:06:00,460 --> 00:06:01,780
I see my list of songs.

84
00:06:01,780 --> 00:06:03,820
There is the list of songs right there.

85
00:06:04,000 --> 00:06:08,850
And then you'll notice that we also got a reference to the dispatch function from our redux store as

86
00:06:08,850 --> 00:06:09,560
well.

87
00:06:09,610 --> 00:06:14,650
This is the same dispatch function that we use previously inside of code pen to manually dispatch an

88
00:06:14,650 --> 00:06:19,330
action creator or someone manually dispatched an action after calling an action creator.

89
00:06:20,960 --> 00:06:25,580
So if you ever want to change some data inside of our application we can make use of this dispatch function

90
00:06:25,580 --> 00:06:26,180
right here.

91
00:06:26,270 --> 00:06:31,040
But as you'll see in just a little bit there's a much more convenient way of doing that.

92
00:06:31,070 --> 00:06:31,450
All right.

93
00:06:31,460 --> 00:06:34,460
Now that we've got our list of songs inside of here please take a pause.

94
00:06:34,490 --> 00:06:39,380
When we come back in the next section we're going to render this list of songs out inside of our song

95
00:06:39,470 --> 00:06:40,520
list component.

96
00:06:40,520 --> 00:06:42,630
So quick break and I'll see you in just a minute.