1
00:00:02,220 --> 00:00:05,700
So let's connect our store here to react,

2
00:00:05,700 --> 00:00:08,340
we already got a store, now to connect it,

3
00:00:08,610 --> 00:00:15,050
I need a special package because redux alone is standalone, it is not connected to react.

4
00:00:15,120 --> 00:00:20,960
I'll install it with npm install --save and the name is react-redux

5
00:00:21,030 --> 00:00:22,290
very simple name, I guess.

6
00:00:22,410 --> 00:00:30,030
It does what the name suggests, it allows us to hook up our redux store to our react application.

7
00:00:30,060 --> 00:00:34,060
Now with that installed, I can import something from that package,

8
00:00:34,170 --> 00:00:38,660
so import something from react-redux.

9
00:00:38,840 --> 00:00:45,080
Now here that something actually is a provider component,

10
00:00:45,250 --> 00:00:50,070
we wrap our app component with provider like this,

11
00:00:50,080 --> 00:00:59,400
so here I'll simply wrap it. Provider is a helper component which allows us to kind of inject our store

12
00:00:59,520 --> 00:01:07,330
into the react components. For hooking up the provider component with our store here,

13
00:01:07,470 --> 00:01:13,990
I need to set up a property, a special property expected by the component of course. It's named store

14
00:01:14,250 --> 00:01:21,270
and here, I passed a store created with createStore, which in our case is stored in that store constant,

15
00:01:21,810 --> 00:01:23,690
really a lot of stores here.

16
00:01:23,760 --> 00:01:27,720
So I'm passing that store constant as a value to this prop.

17
00:01:28,230 --> 00:01:34,500
Now with that, the store is connected to our react application, at least a bit.

18
00:01:34,550 --> 00:01:36,780
There still is something missing,

19
00:01:36,780 --> 00:01:44,920
how do we actually get the data from the store, like the counter value in our counter container where

20
00:01:44,940 --> 00:01:53,490
I read now manage this all internally. Well for that, we need to connect this individual container with the

21
00:01:53,490 --> 00:01:59,150
store or to be precise, in the end what we want to do is we want to set up our subscription here,

22
00:01:59,220 --> 00:02:04,680
we do this a bit differently than we did in the nodeJS file though, we won't do it manually by

23
00:02:04,680 --> 00:02:06,270
calling subscribe,

24
00:02:06,270 --> 00:02:10,120
we will use a feature provided by that react-redux package instead,

25
00:02:10,140 --> 00:02:13,730
let me show you which feature I mean. In the counter container

26
00:02:13,860 --> 00:02:16,610
and by the way, this pattern doesn't change,

27
00:02:16,740 --> 00:02:20,850
it's still our container components that managed the state, now

28
00:02:20,880 --> 00:02:26,390
they don't manage it on their own anymore but they are now the places which receive it from redux.

29
00:02:26,520 --> 00:02:32,770
We still use container components which then may distribute it down to their components which they embed

30
00:02:32,970 --> 00:02:39,360
but we never change our pattern of having a few selected components getting the state and passing it

31
00:02:39,360 --> 00:02:39,900
on,

32
00:02:39,900 --> 00:02:45,690
this pattern is still the same even though we'll eventually get rid of state later.

33
00:02:45,690 --> 00:02:55,080
For now let's import something from react-redux though and that something I want to import is called

34
00:02:55,190 --> 00:02:56,380
connect,

35
00:02:56,640 --> 00:03:03,160
it's a function, a higher order component actually, a higher order component we use on the export,

36
00:03:03,180 --> 00:03:14,520
so on the counter export. However not too rapid like this but instead connect itself is a function which

37
00:03:14,520 --> 00:03:18,830
returns a function which takes then a component as input,

38
00:03:18,840 --> 00:03:22,470
so connect is not really a higher order component,

39
00:03:22,590 --> 00:03:26,160
it's a function which returns a higher order component.

40
00:03:26,160 --> 00:03:32,490
The whole idea behind this complex set up simply is that connect now also can be called as a function

41
00:03:32,670 --> 00:03:38,400
and since it returns a function, we then execute the result of connect of this function execution.

42
00:03:38,430 --> 00:03:45,330
We execute this to and pass counter and to this first function execution, we can pass some configuration for

43
00:03:45,330 --> 00:03:46,840
this given container.

44
00:03:47,220 --> 00:03:48,520
Precisely,

45
00:03:48,540 --> 00:03:56,100
we passed two pieces of information to connect. Which part of the whole application state is interesting

46
00:03:56,100 --> 00:03:58,960
to us because here we only have counter

47
00:03:58,980 --> 00:04:05,110
but in bigger apps, you may have loads and loads of different states and pieces of states you manage

48
00:04:05,310 --> 00:04:10,530
and you don't need all of that and all your containers. So you can define which slice of the state do

49
00:04:10,550 --> 00:04:18,270
I want to get in this container and which actions do I want to dispatch because again, in bigger applications

50
00:04:18,570 --> 00:04:25,050
you may have thousands of actions dispatched from all over the application but a given individual container

51
00:04:25,620 --> 00:04:27,660
may only dispatch a couple of these.

52
00:04:28,050 --> 00:04:31,710
So the actions we want to dispatch and the state we want to get,

53
00:04:31,860 --> 00:04:36,270
let's start with the state you want to get. For that, I'll create a new constant

54
00:04:36,270 --> 00:04:41,460
and please notice that I do this after the class here, after my component

55
00:04:41,520 --> 00:04:43,280
class, before the export.

56
00:04:43,320 --> 00:04:45,680
So this is a constant and I'll name it

57
00:04:45,720 --> 00:04:48,390
mapStateToProps,

58
00:04:48,450 --> 00:04:51,510
this is a name you'll often see in articles and tutorials,

59
00:04:51,510 --> 00:04:56,330
the name is totally up to you but it's very clear about what you will store in here.

60
00:04:56,550 --> 00:05:03,180
You store instructions about how the state managed by redux should be mapped to props you can use in

61
00:05:03,180 --> 00:05:05,760
this container because that's important,

62
00:05:05,940 --> 00:05:13,170
the state managed redux is not received as state here because state is the thing you change internally

63
00:05:13,170 --> 00:05:14,630
from within a component.

64
00:05:14,730 --> 00:05:16,060
Those times are over,

65
00:05:16,110 --> 00:05:20,910
redux is now the place where we manage and change the state, so we don't want to get anything which

66
00:05:20,910 --> 00:05:24,990
we can change internally and props are changed internally,

67
00:05:24,990 --> 00:05:28,270
that is why we map the redux state to props.

68
00:05:28,530 --> 00:05:30,160
This is where the name comes from,

69
00:05:30,190 --> 00:05:39,270
mapStateToProps, it actually stores a function which expects the state stored in redux as the

70
00:05:39,270 --> 00:05:47,260
input and returns a javascript object which is a map of prop names and slices of the state stored

71
00:05:47,260 --> 00:05:48,610
in redux.

72
00:05:48,610 --> 00:05:54,610
Now this function will eventually be executed by the react-redux package because we will pass it to

73
00:05:54,610 --> 00:05:55,260
it,

74
00:05:55,300 --> 00:05:59,200
it's our way of configuring which kind of information we need.

75
00:05:59,230 --> 00:06:04,840
So now in this map which we return to here, we should define prop names which are of course totally

76
00:06:04,840 --> 00:06:07,570
up to you, like ctr for counter

77
00:06:07,990 --> 00:06:15,190
and then you access state and this state here again, will be given to you by react-redux which of course

78
00:06:15,190 --> 00:06:20,640
will reach out to your redux state which of course in turn is the state you set up here,

79
00:06:20,800 --> 00:06:29,950
so there will be a counter property available. So we can access this counter property on our state

80
00:06:29,950 --> 00:06:36,490
and with that, we're saying hey please give me the value of the counter in our global state managed by

81
00:06:36,560 --> 00:06:43,570
redux and give it to me in the form of a property name ctr which I then can use in here.

82
00:06:44,910 --> 00:06:49,890
Now with that, we passed this to connect mapStateToProps, like this,

83
00:06:49,980 --> 00:06:57,900
so pass this constant which holds this function and now connect which also then receives the counter component

84
00:06:57,930 --> 00:07:02,070
on the function returned by that first function. Connect

85
00:07:02,070 --> 00:07:12,530
then gives us this container with access to this ctr, our property. This now allows us to output the ctr

86
00:07:12,560 --> 00:07:13,490
property.

87
00:07:13,680 --> 00:07:17,240
So we still have our state in there and for now I'll leave it here

88
00:07:17,610 --> 00:07:24,210
but I can go down to my jsx code in the counter container, and there where I pass the value to the

89
00:07:24,210 --> 00:07:25,450
counter output,

90
00:07:25,740 --> 00:07:35,220
I will no longer pass state counter but instead this.props.ctr, referring to this property.

91
00:07:35,280 --> 00:07:41,970
Let's now save the file and run npm start to start the build process again and then once it started, we

92
00:07:41,970 --> 00:07:47,360
should see that in our application here, we don't get an error.

93
00:07:47,670 --> 00:07:53,980
Hitting these buttons won't do anything because we still just call set state on each button click, due

94
00:07:54,020 --> 00:08:01,080
to this.counterChangedHandler but we're outputting the state from redux up here because the counter

95
00:08:01,080 --> 00:08:07,290
value we output is passed on here to counter output and that's referring to our ctr props, which is

96
00:08:07,290 --> 00:08:12,480
coming from redux and that's 0 initially and right now we have no way of changing it.

97
00:08:12,640 --> 00:08:17,240
Well let's change that in the next lecture and let's start with actions.