1
00:00:01,220 --> 00:00:03,020
And welcome back.

2
00:00:03,020 --> 00:00:11,230
Now that we have redux and react redux installed, let's start writing some code and implementing redux.

3
00:00:11,430 --> 00:00:19,700
Now the first thing we want to do is create something called an action and also a reducer.

4
00:00:19,980 --> 00:00:30,040
If you remember this diagram we mentioned that redux has these two components: an action and a reducer.

5
00:00:30,050 --> 00:00:33,820
So we're going to build those two out and show you what I mean.

6
00:00:35,460 --> 00:00:39,440
The first thing we want to do is create a new file.

7
00:00:39,630 --> 00:00:45,930
Let's just keep it in the source folder and we'll say that this will be called Actions.js

8
00:00:47,940 --> 00:00:54,020
and within here we're going to create an action using just plain old javascript.

9
00:00:54,090 --> 00:01:03,680
We're going to say that export const and the first action we're going to do is the search field.

10
00:01:03,750 --> 00:01:09,810
So remember when we type into the search box we can filter the robots. We'll say that that action which

11
00:01:09,810 --> 00:01:17,100
is on search changed that we had in the react app, we'll say that this is going to be called SetSearchField

12
00:01:17,100 --> 00:01:31,180
and this search field will receive an input of text which the user types and because we want to

13
00:01:31,180 --> 00:01:37,840
keep this as small as possible we can actually wrap it in curly brackets so that we can avoid the return

14
00:01:37,840 --> 00:01:38,540
statement.

15
00:01:38,560 --> 00:01:45,100
We're just returning an object and this object is going to have a type

16
00:01:47,810 --> 00:01:54,430
called let's say CHANGE_SEARCHFIELD.

17
00:01:57,540 --> 00:02:06,070
And we'll also have a payload called text.

18
00:02:06,210 --> 00:02:13,980
So that is, this action is going to - which is called Set search field - is going to take text, which is

19
00:02:13,980 --> 00:02:20,060
what the user inputs, and it's going to return an object that has a type of CHANGE_SEARCHFIELD.

20
00:02:20,460 --> 00:02:28,200
So that's the action that's being taken and it's going to send - and payload is a common name that is

21
00:02:28,200 --> 00:02:36,750
used and redox so just get used to that - payload is we're sending whatever data is needed to go on to

22
00:02:36,750 --> 00:02:41,680
the producer which is just going to be whatever the user enters.

23
00:02:42,750 --> 00:02:43,120
All right.

24
00:02:43,150 --> 00:02:45,220
We just created our action.

25
00:02:45,340 --> 00:02:46,030
That's it.

26
00:02:46,180 --> 00:02:47,800
That's our action.

27
00:02:47,800 --> 00:02:49,390
Nice and simple.

28
00:02:49,390 --> 00:02:57,640
Now in here I've capitalized this because it's a constant and a constant is usually capitalized.

29
00:02:57,640 --> 00:03:07,720
All caps in javascript is just the standard but I like using an actual constant variable because with

30
00:03:07,720 --> 00:03:12,960
just a string we can misspell something and we might not get the error.

31
00:03:13,000 --> 00:03:18,220
But if we use a variable and we misspell it will actually get an error when we're running the app.

32
00:03:18,220 --> 00:03:21,210
So it's a nice little nifty trick.

33
00:03:21,220 --> 00:03:27,990
And most redux demos have a constant file aswell where they keep track of all these actions.

34
00:03:28,240 --> 00:03:34,480
And it's also nice to have a file where you can see what your actions are.

35
00:03:34,480 --> 00:03:39,630
Line by line because most apps will have more than just one action as you'll see.

36
00:03:39,700 --> 00:03:46,130
So let's create a new file and we'll call it constants.js.

37
00:03:46,330 --> 00:03:51,390
And within here within just export - let's make this a little bit bigger so you can see.

38
00:03:51,500 --> 00:03:52,740
There you go.

39
00:03:52,780 --> 00:04:02,070
We're going to export constant CHANGE_SEARCHFIELD.

40
00:04:02,310 --> 00:04:04,290
And that's going to equal our string.

41
00:04:05,180 --> 00:04:10,250
Again the exact same thing CHANGE_SEARCHFIELD but the string.

42
00:04:13,060 --> 00:04:16,519
Seems a little bit redundant but it's just good practice to have.

43
00:04:16,810 --> 00:04:23,380
So now that we have this variable which is a constant and because we're exporting it we can just import

44
00:04:23,380 --> 00:04:24,510
it up over here.

45
00:04:29,680 --> 00:04:38,070
And we'll say CHANGE_SEARCHFIELD make sure that there's no spelling errors this way and we'll say that

46
00:04:38,490 --> 00:04:41,080
import from the Constants file.

47
00:04:45,710 --> 00:04:49,630
And let's make this a little bit smaller just so everything fits in.

48
00:04:49,710 --> 00:04:52,930
And there you go.

49
00:04:52,940 --> 00:04:59,640
So now we can use the changed search field instead of the text.

50
00:04:59,780 --> 00:05:00,660
And there you go.

51
00:05:00,730 --> 00:05:08,650
We have a nice and good looking actions file with the SetSearchField action and you can imagine here

52
00:05:08,650 --> 00:05:14,680
as we get more and more actions we can keep adding things and we keep adding all the constants that

53
00:05:14,680 --> 00:05:18,460
we need for the actions that that our app takes.

54
00:05:18,460 --> 00:05:18,660
All right.

55
00:05:18,670 --> 00:05:22,020
The next thing that we remember with redux is after the action.

56
00:05:22,030 --> 00:05:30,190
We also have a reducer which I said is a big function that just reads the action and spits out what

57
00:05:30,190 --> 00:05:32,420
we call state.

58
00:05:32,530 --> 00:05:38,560
So let's do that, let's create another file here we'll call it reducers.js

59
00:05:42,040 --> 00:05:53,670
and within here, let's create that reducer. We first start off by saying const initialState.

60
00:05:54,050 --> 00:05:56,030
So we need some sort of start point.

61
00:05:56,030 --> 00:06:00,790
So you may remember in our app.js file with create react app.

62
00:06:00,860 --> 00:06:08,220
If I open that up we see that we have initial state with search field that is blank.

63
00:06:08,240 --> 00:06:15,400
So similar to that we need to say that the initial state here is going to have the search field

64
00:06:18,290 --> 00:06:20,390
that is equal to an empty string.

65
00:06:22,080 --> 00:06:23,510
So that's the initial state.

66
00:06:23,550 --> 00:06:28,050
That's the initial object that we'll have in the redux store.

67
00:06:28,530 --> 00:06:31,850
And now we need to create the reducer. Again.

68
00:06:31,920 --> 00:06:38,190
Remember it's a function that's very easy to do again because we're going to use it in other places.

69
00:06:38,190 --> 00:06:46,780
We're going to export it and we'll say that this is going to be called a search robots because that's

70
00:06:46,780 --> 00:06:52,640
the action that's taking it's going to search the robots using the search field.

71
00:06:52,660 --> 00:06:58,980
So this search robots reducer will take in a few things.

72
00:06:59,030 --> 00:07:09,470
First is a state which is the state of our application and then the second thing is the action.

73
00:07:09,490 --> 00:07:11,720
So that is what action just happened.

74
00:07:13,630 --> 00:07:20,440
And using ES6 let's just give it default parameters to make sure that if this is empty or action is

75
00:07:20,440 --> 00:07:21,890
empty We're not getting any errors.

76
00:07:21,910 --> 00:07:30,340
So we'll say that state will be the initial state which is why we have up here and then action is just

77
00:07:30,340 --> 00:07:32,110
going to be an empty object.

78
00:07:32,110 --> 00:07:38,790
Remember our actions are just objects that were returning.

79
00:07:38,820 --> 00:07:48,690
So from here using error functions we have our first reducer. And reducers here, what they do is they get

80
00:07:48,780 --> 00:07:52,190
this input of a state and an action.

81
00:07:52,230 --> 00:07:58,680
And if they care about the action that they receive in our case if we care if we receive any actions

82
00:07:58,680 --> 00:08:04,980
that are related to searching robots we're going to do something we're going to act upon the state the

83
00:08:04,980 --> 00:08:09,820
way we're going to do that is we're going to use a switch statement and we're going to say within the

84
00:08:09,820 --> 00:08:12,960
switch statement that we're going to do an action.type

85
00:08:15,650 --> 00:08:17,370
remember action.type.

86
00:08:17,480 --> 00:08:20,280
That's something that we use in the action.js file..

87
00:08:20,510 --> 00:08:25,480
Remember we have a type of change search field.

88
00:08:25,610 --> 00:08:31,390
So looking at this it looks like we're going to care about the change search field action type.

89
00:08:31,430 --> 00:08:41,909
So let's just import the constants file up over here for redux or for our reducer aswell.

90
00:08:42,049 --> 00:08:51,530
And within here we can say that if the case that the action type.

91
00:08:51,730 --> 00:08:54,730
Whoops let's just do CHANGE_SEARCHFIELD

92
00:08:56,370 --> 00:09:07,100
If that's the case, well we want to return a new state and this goes back to the three principles that

93
00:09:07,100 --> 00:09:08,060
we talked about.

94
00:09:08,060 --> 00:09:08,850
Let's have a look.

95
00:09:10,240 --> 00:09:15,610
The three principals in react is that we have the single source of truth that is the one big object

96
00:09:15,610 --> 00:09:16,690
that describes our app.

97
00:09:16,840 --> 00:09:22,490
So we have our initial state variable that we've set. State is read only.

98
00:09:22,540 --> 00:09:26,880
That means we can never modify that object.

99
00:09:26,900 --> 00:09:37,170
The only thing we can do is create a new object that has, the same as before, the previous object the

100
00:09:37,200 --> 00:09:43,670
previous state that we had, with whatever modifications we had so state is Read-Only.

101
00:09:43,740 --> 00:09:50,190
And then the third thing is that changes only using pure functions, now remember pure functions are functions

102
00:09:50,430 --> 00:09:59,520
that get some sort of an input just like we have in our reducer and return an output that doesn't have

103
00:09:59,520 --> 00:10:00,440
any side effects.

104
00:10:00,450 --> 00:10:03,120
That is it doesn't modify anything.

105
00:10:03,300 --> 00:10:07,940
Every time we enter an input it always gives out the same output.

106
00:10:08,400 --> 00:10:15,310
So based on these principles if we go back, we know that we want this reduced to be a pure function that

107
00:10:15,310 --> 00:10:22,270
is it's taking some sort of an input and it should return a new state, and the way we do that without

108
00:10:22,270 --> 00:10:32,800
just doing state.SearchField and modifying that property we're going to do object.assign.

109
00:10:32,960 --> 00:10:43,970
And the way we do this is curly brackets comma the state that we're receiving which is the initial state

110
00:10:43,970 --> 00:10:50,270
the start and then finally whatever we want to change in that object.

111
00:10:50,270 --> 00:10:58,280
In our case we're interested in changing the search field property and the search field property is

112
00:10:58,280 --> 00:11:03,690
going to have the action.payload.

113
00:11:03,790 --> 00:11:06,800
Again let me just make this a little bit smaller.

114
00:11:06,970 --> 00:11:13,920
We're returning a new state as you can see here with object.assign that's going to have everything in

115
00:11:13,920 --> 00:11:14,730
the state.

116
00:11:14,880 --> 00:11:23,070
Plus we're going to update whatever search field property, new search field property we have with action.payload

117
00:11:23,130 --> 00:11:28,760
Remember actions have two things that were sending: an object with type, and an object with payload.

118
00:11:28,780 --> 00:11:32,310
If we go back we see type and payload.

119
00:11:32,450 --> 00:11:37,370
So this is simply saying we received an action called CHANGE_SEARCHFIELD.

120
00:11:37,490 --> 00:11:45,280
If that's the case then return the new state with action.payload whatever the user has entered.

121
00:11:45,320 --> 00:11:50,510
I know it can get a little bit confusing but this is just standard redux syntax that you'll just have

122
00:11:50,510 --> 00:11:51,330
to get used to.

123
00:11:52,550 --> 00:11:53,400
Just a heads up.

124
00:11:53,400 --> 00:11:57,050
There's another way of doing this that some people like and is cleaner.

125
00:11:57,050 --> 00:12:05,760
Another option is to do object destructuring or object spread operator which means that we can do something

126
00:12:06,150 --> 00:12:06,810
like this.

127
00:12:10,550 --> 00:12:12,370
Which works nicely as well.

128
00:12:12,410 --> 00:12:15,230
For now though let's just keep it the way we had

129
00:12:18,720 --> 00:12:23,960
and then always remember that a pure function always needs to return something.

130
00:12:23,960 --> 00:12:39,640
So in case that the action type is not this, we also want to say default to always just return state.

131
00:12:39,640 --> 00:12:40,130
There you go.

132
00:12:40,150 --> 00:12:41,790
We've created a reducer.

133
00:12:42,040 --> 00:12:44,830
That is a pure function.

134
00:12:44,830 --> 00:12:52,990
Now here we could use an if statement if we want, but I like using switch and react documentation also

135
00:12:52,990 --> 00:12:59,550
recommend switch because you can have multiple cases, multiple actions that act upon the search robots

136
00:12:59,560 --> 00:13:06,040
reducer and it's a lot easier to just add on and add on different things that affect the state of the

137
00:13:06,250 --> 00:13:08,590
robots.

138
00:13:08,590 --> 00:13:09,100
All right.

139
00:13:09,160 --> 00:13:10,830
That wasn't too bad right.

140
00:13:10,930 --> 00:13:21,170
We've created a reducer with some initial state and we also have our constants and actions.

141
00:13:21,300 --> 00:13:28,530
So that diagram that I showed you is starting to make a little bit more sense. In the next video.

142
00:13:28,530 --> 00:13:33,870
Let's actually connect these because right now it's not connected to anything it's not connected to

143
00:13:33,870 --> 00:13:36,520
our apps, to our react up.

144
00:13:36,570 --> 00:13:39,850
We've just created these files that kind of live on their own.

145
00:13:40,380 --> 00:13:42,030
I'll see you in the next one.

146
00:13:42,050 --> 00:13:42,590
Bye bye.