1
00:00:00,330 --> 00:00:06,270
Once we have wrapped our application using provider component, up next, we are going to use the connect

2
00:00:06,270 --> 00:00:13,750
function to get the values from the state and of course, eventually also set up the dispatch method.

3
00:00:14,010 --> 00:00:20,130
So once the user clicks any of the buttons while something is happening and I guess I'm going to start

4
00:00:20,130 --> 00:00:22,740
first by setting up these state values.

5
00:00:23,070 --> 00:00:29,400
And what I'm looking for here is in a number I would want to show the amount and my amount will be in

6
00:00:29,400 --> 00:00:30,490
the amount property.

7
00:00:30,690 --> 00:00:32,220
And at the moment it is zero.

8
00:00:32,430 --> 00:00:38,580
And since I would want to see that we are correctly connecting to our store, I'm just going to hardcourt

9
00:00:38,580 --> 00:00:39,260
this to five.

10
00:00:39,480 --> 00:00:44,520
Of course, eventually we're going to have the functionality where this is going to be calculated dynamically.

11
00:00:44,850 --> 00:00:47,520
But at the moment, hard coding is good enough.

12
00:00:47,910 --> 00:00:54,710
Now, let's navigate to now Baja's and then we're looking for our connect function and we need to import

13
00:00:54,710 --> 00:00:56,200
it as a name import.

14
00:00:56,430 --> 00:01:04,830
So let's go with Connect from React Redux and then Connect has a bit of interesting syntax because it

15
00:01:04,830 --> 00:01:06,690
is a higher order component.

16
00:01:07,080 --> 00:01:11,100
Now what that means is that it returns a component itself.

17
00:01:11,400 --> 00:01:15,720
So first of all, we write a connect, then we have first set of premises.

18
00:01:15,930 --> 00:01:18,840
So that's the first function that Connect is returning.

19
00:01:19,140 --> 00:01:25,910
And then this function is looking for the component that is going to be connected to.

20
00:01:26,340 --> 00:01:33,990
So once we do this now, instead of just returning a number, we have access to our state and to our

21
00:01:33,990 --> 00:01:39,060
dispatch method since we wrapped our number in the connect.

22
00:01:39,390 --> 00:01:45,210
And then Connect has a few arguments, but the ones that are most commonly used are the first to my

23
00:01:45,330 --> 00:01:48,230
state prompts and then map dispatch.

24
00:01:48,990 --> 00:01:55,380
Please understand that those are arguments so you can call this breed on banana, but a convention is

25
00:01:55,380 --> 00:02:01,630
to call them map state problems and then map dispatch the prompts and both of them are function.

26
00:02:01,890 --> 00:02:06,240
Now, we're not going to use this patch since there's no functionality in our number.

27
00:02:06,450 --> 00:02:11,430
So we're going to start with our first function and I'm going to go with a common connection.

28
00:02:11,550 --> 00:02:18,210
So I'm not going to be a rebel and I'm going to name mine map state to perhaps.

29
00:02:18,480 --> 00:02:20,490
Of course, I do need to create that function here.

30
00:02:20,820 --> 00:02:28,500
So I go with consed map state to prompt and then in this function, what's really cool as a parameter,

31
00:02:28,710 --> 00:02:31,390
I have access to my store.

32
00:02:31,890 --> 00:02:33,200
Now you want me to prove that.

33
00:02:33,630 --> 00:02:39,170
So if I'm going to type your state, which essentially is just my parameter and if I'm going to go with

34
00:02:39,180 --> 00:02:44,130
council log you'll see that in a console we will see our store.

35
00:02:44,490 --> 00:02:48,780
Now, of course, at the moment it's complaining that we need to return the object and we'll do that

36
00:02:48,780 --> 00:02:49,350
in a second.

37
00:02:49,620 --> 00:02:56,370
But what is more important that in my console I can see that I have the card, I have the total and

38
00:02:56,370 --> 00:02:57,420
I have the amount.

39
00:02:57,690 --> 00:03:03,860
And the way it works is, again, the actual naming already suggest all the functionality.

40
00:03:04,050 --> 00:03:07,390
So we have a map state to props.

41
00:03:07,620 --> 00:03:09,510
So what do you think is going to happen right now?

42
00:03:09,780 --> 00:03:15,970
Effectively, we will map our store to a props of the number.

43
00:03:16,320 --> 00:03:24,000
Now, the cool thing is that we can pick which actual state values we will map so we could technically

44
00:03:24,000 --> 00:03:24,810
map all of it.

45
00:03:25,170 --> 00:03:31,080
But we don't have to since not every component needs to know everything that there is to know about

46
00:03:31,080 --> 00:03:32,460
the state of your application.

47
00:03:32,760 --> 00:03:40,080
And like our error message suggests, we need to return a plain object from our map state props.

48
00:03:40,350 --> 00:03:43,460
And then in that object we set up the prop name.

49
00:03:43,650 --> 00:03:49,440
So in my case, I'm going to go with the Mount and that is the prop that I will have access in number

50
00:03:49,680 --> 00:03:53,420
the same way if we will just pass it down for, let's say, the parent.

51
00:03:53,430 --> 00:03:55,580
And then, of course, I need to sign some kind of value.

52
00:03:55,950 --> 00:04:04,210
So in my case, since I know that I have access to all my store from the state, I can trust state and

53
00:04:04,210 --> 00:04:07,530
then the property I'm looking for is the amount.

54
00:04:07,830 --> 00:04:11,040
Now, I don't need to cancel it and of course I do need to return.

55
00:04:11,280 --> 00:04:14,250
So I have my object and I'm just going to go with return.

56
00:04:14,430 --> 00:04:22,890
And then like I said, we will have in the no amount prop there is equal to whatever I have in my state

57
00:04:23,130 --> 00:04:25,080
under the property ofthe amount.

58
00:04:25,470 --> 00:04:31,710
I will save it and then let's head on up and where we have the number, of course we have access right

59
00:04:31,710 --> 00:04:34,650
now to my amount property.

60
00:04:34,890 --> 00:04:36,330
So I'm going to access my property.

61
00:04:36,570 --> 00:04:43,620
And then just like normal react, I have access to my prop and then instead of hardgoods zero, I'm

62
00:04:43,620 --> 00:04:46,110
just going to go with amount and there you go.

63
00:04:46,110 --> 00:04:54,210
We have a success because right now, no, I have access to a state and more specifically, I have access

64
00:04:54,210 --> 00:04:59,680
to my amount value and my amount value is five because of course, now I had.

65
00:05:00,230 --> 00:05:07,400
But as we're going to be changing our amount dynamically later on, it will also change here in the.

66
00:05:08,400 --> 00:05:10,450
Again, the basic setup is following.

67
00:05:10,640 --> 00:05:12,560
We do need to import the connect.

68
00:05:12,950 --> 00:05:15,080
Connect is higher order component.

69
00:05:15,410 --> 00:05:18,170
So we need to run first set of prices.

70
00:05:18,170 --> 00:05:19,370
So need to invoke it.

71
00:05:19,730 --> 00:05:26,660
And then we have second set of parentheses where we pass in the component and essentially we just export

72
00:05:26,660 --> 00:05:30,220
that component once we have run our connect.

73
00:05:30,500 --> 00:05:36,170
And then in the connect we have few arguments, but the ones that we're going to use the most are the

74
00:05:36,170 --> 00:05:41,860
first one map state the props and the second one that we're going to cover in the few videos.

75
00:05:42,080 --> 00:05:44,930
Map this, dispatch the props and the weight map.

76
00:05:44,930 --> 00:05:53,270
State of Props works is that we have a parameter and that primer has access to all our state.

77
00:05:53,600 --> 00:05:59,900
And then from the function, we do need to return an object and then in the object we're setting up

78
00:05:59,900 --> 00:06:01,930
our property values.

79
00:06:02,180 --> 00:06:07,610
So, for example, what kind of property I'm going to have here, that will be my prop.

80
00:06:07,880 --> 00:06:13,430
So again, if I'm going to name this banana horse up in the Navar, I'm going to be accessing this time

81
00:06:13,430 --> 00:06:16,520
the banana prop and then whatever value I want.

82
00:06:16,730 --> 00:06:21,830
And in this case, I'm just picking from the state, whichever value I would want.

83
00:06:22,010 --> 00:06:25,640
And of course, I said it equal to and now I have access to my amount.

84
00:06:26,210 --> 00:06:32,390
And then in the component I can just display whatever the value, the amount prop has.