1
00:00:01,160 --> 00:00:02,750
And welcome back.

2
00:00:02,750 --> 00:00:10,130
One thing I noticed from the previous video is in my Constants file I should make sure that my variable

3
00:00:10,130 --> 00:00:12,260
and my strings are the same.

4
00:00:12,260 --> 00:00:16,910
So just adding an underscore over here, all right.

5
00:00:16,940 --> 00:00:26,360
So let's talk about the next part which is using the other method that comes with react redux which is

6
00:00:26,660 --> 00:00:27,200
connect.

7
00:00:30,310 --> 00:00:39,170
Now this connect function is optimized in order for us to avoid using something called store.subscribe.

8
00:00:39,310 --> 00:00:44,490
So if you remember when we console logged the store in our apt.

9
00:00:44,590 --> 00:00:50,960
Yes we had a few functions including the get state function that we locked.

10
00:00:50,960 --> 00:00:55,430
Now there's also a dot subscribe function which subscribes 

11
00:00:55,480 --> 00:01:02,510
any component that is interested to be aware of redux and listen to any changes.

12
00:01:03,680 --> 00:01:10,400
But that's a little tedious and connect simplifies the process by simply saying use the connect function.

13
00:01:10,400 --> 00:01:17,220
and with that we're going to make the component redux aware.

14
00:01:17,430 --> 00:01:25,740
If you remember the connect components would be the yellow little components that know about redux.

15
00:01:25,740 --> 00:01:33,470
So we've created the provider component that essentially passes down the store to the components.

16
00:01:33,510 --> 00:01:35,180
But now we have to say which,

17
00:01:35,220 --> 00:01:45,870
Which one of these react components we want to be smart or be aware that the redux library exists and

18
00:01:45,870 --> 00:01:47,560
they can subscribe to changes.

19
00:01:47,580 --> 00:01:49,230
So I'm going to show you how to do that in this video

20
00:01:52,380 --> 00:01:59,040
and by the way this standard in the industry is that we call these smart components containers kind

21
00:01:59,040 --> 00:02:01,310
of like app.js

22
00:02:01,410 --> 00:02:08,080
So we're most likely going to connect the app.js file because it is a container.

23
00:02:08,210 --> 00:02:15,680
So the very first thing we're going to do is go to app.js file and within here we want to import

24
00:02:15,740 --> 00:02:18,590
a few things.

25
00:02:18,620 --> 00:02:21,490
Let's start off with importing the actions.

26
00:02:21,530 --> 00:02:26,250
So I'm going to import the actions that we have.

27
00:02:26,480 --> 00:02:27,770
Let's go over here.

28
00:02:28,620 --> 00:02:32,300
We have the set search field action.

29
00:02:32,310 --> 00:02:41,210
So we're going to do the setSearchField action and we're going to import that from the actions.js

30
00:02:41,210 --> 00:02:51,030
file and because actions.js file is folder level up since the app.js is in the containers.

31
00:02:51,120 --> 00:02:56,740
I'm going to do the double periods.

32
00:02:56,850 --> 00:03:03,720
Let's save that and we get a nice little warning saying that ... search field is defined

33
00:03:03,720 --> 00:03:04,800
but never used.

34
00:03:04,920 --> 00:03:11,330
Let's also save our index file, perfect.

35
00:03:11,370 --> 00:03:16,120
Let's now use this connect method that I've been talking about.

36
00:03:16,140 --> 00:03:31,970
So now at the top over here I'm going to say import the connect method from react redux and this connect

37
00:03:31,970 --> 00:03:32,540
method,

38
00:03:32,540 --> 00:03:33,570
The way it works.

39
00:03:33,590 --> 00:03:40,140
And again and you just have to get used to it is at the very bottom where we do export default.

40
00:03:40,710 --> 00:03:50,820
We're going to say connect is going to be a function and then another or another brackets around app.

41
00:03:50,840 --> 00:03:58,550
Now this syntax might look a little bit confusing and connect is something we call higher order function.

42
00:03:58,940 --> 00:04:09,130
Now a higher order function is a function that returns another function. So connect is going to run and

43
00:04:09,160 --> 00:04:15,500
whatever connect does inside of this function is going to return another function.

44
00:04:15,640 --> 00:04:22,250
And because it returns another function it's going to run this part with the app.

45
00:04:22,280 --> 00:04:28,190
So that's how higher order components work and you'll learn more about these later on in your career.

46
00:04:28,190 --> 00:04:35,330
But for now just know that this is the syntax you just have to get used to it. Now let's just add a new line 

47
00:04:35,430 --> 00:04:36,560
so we can see it better here.

48
00:04:37,410 --> 00:04:47,250
Now within here, connect accepts two parameters which again are standard. I can name them whatever I want

49
00:04:47,470 --> 00:04:58,750
but we're just following the redux standards, which the first one is mapStateToProps and the second

50
00:04:58,750 --> 00:05:08,520
one is mapDispatchToProps.

51
00:05:08,580 --> 00:05:09,100
All right.

52
00:05:09,100 --> 00:05:17,560
So right now we've just connected this component, this app component and said hey subscribe to any state

53
00:05:17,560 --> 00:05:21,240
changes in the redux store.

54
00:05:22,090 --> 00:05:28,930
And now app knows that there is a redux store somewhere and any time that there's changes to it it might

55
00:05:28,930 --> 00:05:31,330
be interested in.

56
00:05:31,390 --> 00:05:35,470
But now we need to tell it what to be interested in.

57
00:05:35,500 --> 00:05:42,230
That is what state should I listen to, what dispatch or what action should I listen to.

58
00:05:42,250 --> 00:05:46,820
So let's go back to the top and at the very top here.

59
00:05:46,910 --> 00:05:54,000
We want to define these functions that, or these parameters. So all we're going to do is say 

60
00:05:54,000 --> 00:06:04,410
const mapStateToProps and this is going to receive a state and oops.

61
00:06:04,520 --> 00:06:06,980
And it's going to return

62
00:06:09,850 --> 00:06:10,480
an object

63
00:06:13,730 --> 00:06:19,310
and like I said before you can name these whatever you want but this is the standard and any redux app

64
00:06:19,310 --> 00:06:22,040
you'll just see this or just get used to the syntax.

65
00:06:22,100 --> 00:06:25,340
Once you do it a couple times it becomes second nature.

66
00:06:25,340 --> 00:06:25,690
All right.

67
00:06:25,690 --> 00:06:30,950
And in here we want to say that the search field

68
00:06:35,270 --> 00:06:41,690
state which again if we go to our reducers, we have a search field over here.

69
00:06:44,530 --> 00:06:53,260
This search field state is going to equal a state which we receive dot the part of the reducer which

70
00:06:53,260 --> 00:07:06,550
again if we go to reducers is search robots so searchRobots.searchField

71
00:07:06,560 --> 00:07:13,580
So again it's saying that the search field that we're going to return which is going to be used as props

72
00:07:13,970 --> 00:07:24,560
by the App component is going to come from the state (not Stata) state.searchRobots.searchField

73
00:07:25,010 --> 00:07:33,980
which again comes from our reducer because remember in index.js file we've created the store

74
00:07:34,070 --> 00:07:37,220
with the search robots reducer.

75
00:07:37,250 --> 00:07:45,980
So if we go back here let's save that, and we have MapDispatchToProps is not defined.

76
00:07:46,160 --> 00:07:53,690
And again because we need the second part which is MapDispatchToProps so let's again create that.

77
00:07:56,970 --> 00:08:07,700
We'll say that const mapDispatchedToProps is going to receive something called dispatch.

78
00:08:07,830 --> 00:08:14,730
And again something that, you'll just have to get used to. Dispatch, if you remember in our discussion

79
00:08:14,730 --> 00:08:21,510
about flux is what triggers the action, so an action is just an object that we've created,

80
00:08:21,510 --> 00:08:29,330
again, if you remember. But in order to send this action we need something called dispatch to -

81
00:08:29,360 --> 00:08:35,250
so it gets dispatched into the reducer.

82
00:08:35,330 --> 00:08:44,750
So this dispatch can now be used to send actions, and the way we do that, we can say onSearchChange

83
00:08:46,040 --> 00:08:48,350
which is just the name that - I can say anything.

84
00:08:48,360 --> 00:08:51,950
So remember this is a prop that it's going to receive.

85
00:08:51,950 --> 00:08:58,230
But we're going to keep it the same as the one that we've had in our react app - onSearchChange.

86
00:08:58,260 --> 00:09:05,910
And so this is what the prop is going to be named. And the onSearchChange is going to receive an event

87
00:09:06,390 --> 00:09:15,270
because remember it's a input box that users type, and this event, again because on search change is a

88
00:09:15,270 --> 00:09:26,840
function, is going to dispatch the action setSearchField because remember, the action is just an object

89
00:09:26,870 --> 00:09:28,870
just a function that returns an object.

90
00:09:28,940 --> 00:09:30,530
We want to dispatch that.

91
00:09:30,620 --> 00:09:39,950
So the reducers are aware of it and this search field when it gets dispatched is going to listen to.

92
00:09:40,100 --> 00:09:47,590
If you remember in our actions it's going to receive a text. That is whatever the user has input to it.

93
00:09:48,220 --> 00:09:59,100
In which case we can just do event.target.value again just like we have in the onSearchChange

94
00:09:59,100 --> 00:10:03,520
here, event.target.value

95
00:10:03,530 --> 00:10:07,970
So if I save this, let me make this a little bit smaller and save

96
00:10:07,970 --> 00:10:11,390
now, I have a few little warnings.

97
00:10:11,390 --> 00:10:17,100
One is that remember we need to return this as an object.

98
00:10:17,180 --> 00:10:30,930
So we want to say return just like we did above with the state, an object that contains all of our action.

99
00:10:30,950 --> 00:10:38,340
Again mapStateToProps is telling me what state, what piece state I need to listen to, and send down as

100
00:10:38,350 --> 00:10:46,270
props and mapDispatchToProps says hey tell me what props I should listen to that are actions

101
00:10:46,300 --> 00:10:47,720
that need to get dispatched.

102
00:10:49,160 --> 00:10:52,170
All right everything is working.

103
00:10:52,670 --> 00:10:54,640
We're not getting any errors over here.

104
00:10:55,070 --> 00:11:01,520
And remember now that down here in the connect we know what mapStateToProps is, (what) mapDispatchToProps

105
00:11:01,530 --> 00:11:08,120
is and connect is going to run the first part of the function and say Okay I'm listening to this

106
00:11:08,120 --> 00:11:15,950
part of the state and I'm interested in these actions and then it's going to give those props to the

107
00:11:16,010 --> 00:11:17,460
app.

108
00:11:17,480 --> 00:11:19,260
Here's the exciting part.

109
00:11:20,160 --> 00:11:24,850
Because remember I said redux can replace your state in your app.

110
00:11:24,990 --> 00:11:36,490
I can technically now remove the search field from this.state from the app and I can also remove

111
00:11:36,510 --> 00:11:40,290
onSearchChange because again that's coming down as props.

112
00:11:40,290 --> 00:11:45,860
We don't need to declare it as a method of app. So I can delete that now.

113
00:11:46,760 --> 00:11:52,660
And then down here I'm not interested in this.state searchfield anymore.

114
00:11:52,790 --> 00:11:56,780
I can remove that because now it's coming down as props.

115
00:11:56,990 --> 00:11:59,570
So instead I can say 

116
00:12:02,890 --> 00:12:16,180
const searchField with capital F comes from this.props and finally the onSearchChange doesn't come

117
00:12:16,180 --> 00:12:21,350
from this.onSearchChange which was a method of the app.

118
00:12:21,370 --> 00:12:22,520
It comes from the props.

119
00:12:22,600 --> 00:12:31,650
So again I can say onSearchChange and remove the .this . Let's save that.

120
00:12:35,740 --> 00:12:42,040
And again I'll get an error saying that searchfield is not defined because remember, with our redux

121
00:12:42,040 --> 00:12:47,730
state we changed the search field to have capital F.

122
00:12:47,750 --> 00:12:52,480
So if I changed that so it understands that, that's what we're interested in.

123
00:12:53,860 --> 00:12:57,080
Everything is working.

124
00:12:57,110 --> 00:13:06,950
Now here's a little gotcha. Right now because in our index.js file we only have one reducer.

125
00:13:06,980 --> 00:13:11,440
We're creating the store from this, if we go back to app.js

126
00:13:11,490 --> 00:13:17,460
state actually only has one field and that is searchField.

127
00:13:17,570 --> 00:13:21,950
So we would have to do something like this.

128
00:13:22,830 --> 00:13:28,680
In order for it to work. Now we're going to get back to this point, because once we start adding more

129
00:13:29,190 --> 00:13:37,080
pieces of state and more reducers we're going to have to get state from each piece that we're interested

130
00:13:37,080 --> 00:13:37,470
in.

131
00:13:37,860 --> 00:13:42,510
But for now we're going to get back to that we're just going to say state.searchField because if you

132
00:13:42,510 --> 00:13:47,630
remember and console.log store.get state.

133
00:13:47,700 --> 00:13:49,230
We just had the search field.

134
00:13:49,530 --> 00:13:54,730
So let's save that and go back.

135
00:13:54,750 --> 00:13:55,850
All right.

136
00:13:55,950 --> 00:13:58,160
Nothing in the console that's good.

137
00:13:58,230 --> 00:14:03,530
The moment of truth if I type something here.

138
00:14:03,610 --> 00:14:04,340
Look at that.

139
00:14:04,360 --> 00:14:11,140
Everything is working, despite the fact that we no longer have the state for the search field in here

140
00:14:11,440 --> 00:14:13,910
or the method.

141
00:14:14,050 --> 00:14:16,570
Instead everything is going through redux.

142
00:14:16,570 --> 00:14:28,090
And just to test that theory if I go in here, into my setSearchField and instead of having these automatic

143
00:14:28,090 --> 00:14:37,240
return I'm going to say console.log(text) and I'm going to return from here the object so we're just

144
00:14:37,240 --> 00:14:44,110
going to console log to see if the action is coming through.

145
00:14:44,140 --> 00:14:46,480
I save and go back.

146
00:14:46,480 --> 00:14:51,290
Let's open up the tool, the console and look at that.

147
00:14:51,370 --> 00:14:55,890
Everything I type is being sent through the action.

148
00:14:55,900 --> 00:15:01,000
And another cool part is if I go to the reducer and again I test everything out and I say 

149
00:15:01,000 --> 00:15:11,340
console.log(action.type) I save this and go back. we see that we have a little funny action that happens.

150
00:15:11,340 --> 00:15:13,980
And this is the default when redux initiates.

151
00:15:14,100 --> 00:15:20,520
But now if I click on anything or type something I get CHANGE_SEARCH_FIELD,  CHANGE_SEARCH_FIELD because

152
00:15:20,520 --> 00:15:27,390
the reducer on every action gets run, and says - did CHANGE_SEARCH_FIELD action happen? 

153
00:15:27,420 --> 00:15:29,960
If that's the case I'm going to return a new state.

154
00:15:29,970 --> 00:15:31,050
Very cool.

155
00:15:31,050 --> 00:15:37,820
We've just connected our react up to redux and everything works nicely.

156
00:15:38,850 --> 00:15:44,000
There's a bit of boilerplate here and you know you have to remember mapStateToProps, 

157
00:15:44,000 --> 00:15:53,040
mapDispatchToProps but once you get used to that syntax, it's really really nice and beautiful the way redux works

158
00:15:53,250 --> 00:16:01,710
and how we've cleaned up everything where everything flows nicely. Just like we mentioned. We've created

159
00:16:01,710 --> 00:16:10,320
an action that gets dispatched into a reducer, a function that based on that action takes the

160
00:16:10,320 --> 00:16:13,710
state and changes it in the store.

161
00:16:13,710 --> 00:16:19,200
And because the store got updated react components that are interested are going to listen to those

162
00:16:19,200 --> 00:16:22,040
changes and make a view change.

163
00:16:23,460 --> 00:16:25,260
Very cool.

164
00:16:25,260 --> 00:16:28,430
All right some more exciting stuff coming up in the next video.

165
00:16:28,620 --> 00:16:30,080
I'll see you in that one.

166
00:16:30,080 --> 00:16:30,390
Bye-bye