1
00:00:07,920 --> 00:00:13,290
Now it's time for us to connect the front end to the back end.

2
00:00:13,800 --> 00:00:22,410
And to achieve that, we need to find a way to handle state in our React application, because using

3
00:00:22,410 --> 00:00:29,130
the client side to connect to the back end is all about managing state and in react.

4
00:00:29,130 --> 00:00:31,580
We have couple of ways to manage state.

5
00:00:31,590 --> 00:00:41,130
One is we can use you state to manage state and react application and apart from you state, we also

6
00:00:41,130 --> 00:00:49,470
have what is called the context API hook for that one too we can use to manage State and React application.

7
00:00:49,470 --> 00:00:58,320
And lastly, we can use third party state management like Redux and to be more specific, Redux toolkit.

8
00:00:58,620 --> 00:01:06,450
But when building complex application, you need to choose whether to use the context API or to use

9
00:01:06,450 --> 00:01:07,380
Redux.

10
00:01:07,620 --> 00:01:08,790
For our purpose.

11
00:01:08,790 --> 00:01:11,910
We are going to use context API.

12
00:01:11,940 --> 00:01:20,610
Context API works the same way as Redux, but instead for context API, there is no need for you to

13
00:01:20,610 --> 00:01:21,120
install.

14
00:01:21,120 --> 00:01:24,660
Any third party is being built in into React.

15
00:01:24,750 --> 00:01:30,810
So let's see how we are going to make use of context API to manage State in a React application.

16
00:01:31,050 --> 00:01:37,770
And if you are not familiar with the context API, there is a section for context API.

17
00:01:37,890 --> 00:01:44,010
So at this point I assume that you are familiar with Context API and then you want to put them into

18
00:01:44,010 --> 00:01:44,790
practice?

19
00:01:44,800 --> 00:01:49,140
Verrastro I will explain every bit of code I write, so no problem with that.

20
00:01:49,140 --> 00:01:50,850
So let's get started.

21
00:01:51,180 --> 00:01:59,010
Well, before we continue, make sure that your bug and API or server is running and this is my back

22
00:01:59,010 --> 00:02:07,560
end server or API and this is the client side and that is the react and you can see the color difference.

23
00:02:07,740 --> 00:02:14,310
And to be able to differentiate between the back end and then the front end, I installed an extension

24
00:02:14,310 --> 00:02:15,480
called Peacock.

25
00:02:17,620 --> 00:02:25,780
And if you don't have it, go ahead and install and after installation go to view and come on palette

26
00:02:25,780 --> 00:02:33,970
and then set for peacock as this if it's search for that you can see change to favourite colour and

27
00:02:33,970 --> 00:02:36,880
here you can change any colour of your choice.

28
00:02:36,880 --> 00:02:42,580
For me, I like to use Node.js, so I like to use node green, so that is it.

29
00:02:42,730 --> 00:02:50,380
So now make sure that the server is running and for me mine is running on port 8080.

30
00:02:50,440 --> 00:02:54,580
So let's get started with the context API.

31
00:02:54,730 --> 00:03:03,940
So back to the application inside the I see I have added a new folder called a set and I added my logo

32
00:03:03,940 --> 00:03:08,620
inside and I'll provide this file for you in case you want to use it.

33
00:03:08,620 --> 00:03:11,830
And you can see that the logo has been changed.

34
00:03:12,040 --> 00:03:18,100
So let's go ahead and then implement the main logic because we are going to use context.

35
00:03:18,100 --> 00:03:20,830
We need to create a folder for that.

36
00:03:20,830 --> 00:03:27,670
So inside the components, we are going to create a new folder and we call it as context.

37
00:03:28,890 --> 00:03:34,920
And for this context, we are going to create folders based on the data type we managed.

38
00:03:35,310 --> 00:03:39,690
Looking at our back end, you can see that inside the model.

39
00:03:39,720 --> 00:03:42,090
These are the data that we have.

40
00:03:42,090 --> 00:03:49,020
We have the account transactions and then the user meaning that we are going to manage these types of

41
00:03:49,020 --> 00:03:51,510
states in our application.

42
00:03:52,050 --> 00:03:55,260
Inside the context, we are going to create three or four days.

43
00:03:55,260 --> 00:04:01,830
But for now let's work with the users and I'm going to name this one as of context.

44
00:04:02,750 --> 00:04:03,400
Great.

45
00:04:03,410 --> 00:04:09,500
And then inside we are going to create one file by name of context.

46
00:04:11,750 --> 00:04:13,160
There it is.

47
00:04:13,460 --> 00:04:19,019
And then after that, I'm going to create one more file call of action types.

48
00:04:19,040 --> 00:04:21,950
We're going to be as of action types.

49
00:04:21,950 --> 00:04:25,700
And I'll explain to you why we need this file.

50
00:04:25,850 --> 00:04:32,090
Now that we have added the of context file, let's implement the context API.

51
00:04:32,480 --> 00:04:38,030
First step is that let's require what is called create context from React.

52
00:04:38,830 --> 00:04:46,960
So first step is that we are going to create what is called Earth context and we are going to make use

53
00:04:46,960 --> 00:04:50,320
of the create context and call it as a function.

54
00:04:50,440 --> 00:04:59,020
And what comes back, we are going to assign to a variable called of context, and it's equal to that.

55
00:04:59,320 --> 00:05:05,910
We may need this of context in our component to be able to use the context that we are going to create.

56
00:05:05,920 --> 00:05:11,020
Because of that, we need to export for this file as export.

57
00:05:11,590 --> 00:05:14,980
The next step is that we need to create a provider.

58
00:05:15,550 --> 00:05:23,500
The provider is going to serve as a high order component, meaning that it is going to take a component

59
00:05:23,500 --> 00:05:27,070
that need to access a data from this context.

60
00:05:27,070 --> 00:05:28,630
So here we go.

61
00:05:28,660 --> 00:05:35,470
Our code is one as comms and then of context provider.

62
00:05:36,350 --> 00:05:40,280
And is equal to every function as that.

63
00:05:40,520 --> 00:05:45,950
The next step is that we need to receive the component that's going to use this or provider.

64
00:05:45,950 --> 00:05:49,880
Because of that, we need to do structure as children.

65
00:05:50,750 --> 00:05:57,850
The children pro represent the component that is going to use the pass in into this higher order component.

66
00:05:57,860 --> 00:05:59,270
So here we go.

67
00:05:59,390 --> 00:06:03,560
We are going to return from this component.

68
00:06:03,560 --> 00:06:07,460
And what we are going to retain is the of context.

69
00:06:07,460 --> 00:06:14,690
And on that we have what is called provider as the name implies, it's going to provide a data to other

70
00:06:14,690 --> 00:06:15,590
components.

71
00:06:15,800 --> 00:06:19,130
Then lastly, we bring the children inside.

72
00:06:19,790 --> 00:06:25,490
The next step is that we need to create initial stage for the user context.

73
00:06:25,490 --> 00:06:26,900
So here we go.

74
00:06:27,050 --> 00:06:31,650
You're going to be as concerned and then initiate state by convention.

75
00:06:31,670 --> 00:06:37,070
We use uppercase for initial state and it's equal to an object.

76
00:06:37,220 --> 00:06:44,570
This one is up to you how we are going to manage or keep track about your states for our purpose.

77
00:06:44,570 --> 00:06:49,070
We want to keep track about the authentication status, about the user.

78
00:06:49,100 --> 00:06:57,170
So our assign a variable called user off and then by default is null because the user hasn't logged

79
00:06:57,170 --> 00:06:57,980
in yet.

80
00:06:58,280 --> 00:07:06,230
And I also want to keep track about the error in case something goes wrong upon logging in or upon registration.

81
00:07:06,230 --> 00:07:09,470
So here by default is also now.

82
00:07:09,680 --> 00:07:16,670
And I also want to keep track about loading so that I can give user some good user experience.

83
00:07:16,670 --> 00:07:19,370
So by default is false.

84
00:07:20,000 --> 00:07:20,570
Great.

85
00:07:20,570 --> 00:07:25,400
And then lastly, I also want to keep track about the profile by the user.

86
00:07:25,400 --> 00:07:32,180
So I would declare a variable and say profile equal to now that is by default.

87
00:07:32,330 --> 00:07:37,010
So we are going to create a function to update this stage.

88
00:07:37,010 --> 00:07:42,560
So now let's have a period for comment and call this one as initial states.

89
00:07:42,950 --> 00:07:48,110
So the next step is that we need to find a way to update this state.

90
00:07:48,110 --> 00:07:53,600
And to achieve that we are going to use a hook called use reducer.

91
00:07:53,690 --> 00:07:55,130
So here you go.

92
00:07:55,160 --> 00:08:04,220
We bring in the use reducer and the next step is that we need to call the use reducer inside the component.

93
00:08:04,220 --> 00:08:08,870
Again, don't call the use reducer outside the provider.

94
00:08:08,870 --> 00:08:11,420
It must be inside a component.

95
00:08:11,420 --> 00:08:13,160
So here we go.

96
00:08:13,340 --> 00:08:19,130
We call use reducer as a function, and for this it takes in two elements.

97
00:08:19,130 --> 00:08:22,040
The first one is what we call the reducer.

98
00:08:22,220 --> 00:08:27,950
So for now I can pass in a callback function using error function as dots.

99
00:08:28,220 --> 00:08:30,500
And next is the initial state.

100
00:08:30,500 --> 00:08:33,470
And lucky for us, we have the initial state here.

101
00:08:33,980 --> 00:08:37,010
So let's pass in as initial states.

102
00:08:37,039 --> 00:08:37,700
Great.

103
00:08:37,700 --> 00:08:40,789
And what comes back from the user reducer?

104
00:08:40,880 --> 00:08:43,280
We have two important things.

105
00:08:43,309 --> 00:08:50,330
So let's go ahead and then structure that and here we go, let's have some space around that.

106
00:08:50,330 --> 00:08:50,900
Great.

107
00:08:51,080 --> 00:08:54,710
So the first element is what we call state.

108
00:08:54,980 --> 00:09:00,980
So this stage represents our entire state in application, that is the initial state.

109
00:09:01,220 --> 00:09:09,350
And then the next remains is going to be a function where we are going to use to update this state and

110
00:09:09,350 --> 00:09:13,330
by default we call it as dispatch great.

111
00:09:13,430 --> 00:09:19,520
So this stage represents the entire state, so you can name it, let's say user state or anything.

112
00:09:19,520 --> 00:09:20,810
The choice is yours.

113
00:09:20,900 --> 00:09:21,650
Likewise.

114
00:09:21,650 --> 00:09:23,870
This one to you can name it whatever you want.

115
00:09:23,870 --> 00:09:30,110
The choice is yours, but by convention you use what is called dispatch and which is a function.

116
00:09:30,110 --> 00:09:37,130
So the next question is that how can we update our state by taking the data coming from our back end

117
00:09:37,160 --> 00:09:38,570
into our application?

118
00:09:38,570 --> 00:09:46,010
That is why the reducer comes into play, because we are going to implement our business logic inside

119
00:09:46,010 --> 00:09:46,940
this function.

120
00:09:46,940 --> 00:09:50,810
Let's create a function on its own and then we require ACA.

121
00:09:50,930 --> 00:09:57,800
So up here we are going to create what is called user reducer or of reducer.

122
00:10:00,090 --> 00:10:01,340
And here we go.

123
00:10:01,350 --> 00:10:06,690
Cost reducer is equal to zero function perfect.

124
00:10:06,960 --> 00:10:11,790
And this reducer we have access to two important things.

125
00:10:11,820 --> 00:10:15,120
The first one is what we call the states.

126
00:10:15,570 --> 00:10:19,250
The next segment is what we call the action grade.

127
00:10:19,260 --> 00:10:25,950
So this state represents our state in our application in this case, which is our initial state, because

128
00:10:25,950 --> 00:10:28,470
we are going to update this state.

129
00:10:28,800 --> 00:10:33,000
We also have this state inside the use reducer also.

130
00:10:33,330 --> 00:10:35,460
So now let's look at the flow here.

131
00:10:35,640 --> 00:10:40,020
We have what is called dispatcher and then the reducer.

132
00:10:40,050 --> 00:10:44,940
So to be able to update our initial state, this is the flow.

133
00:10:44,970 --> 00:10:54,000
First of all, we are going to dispatch an action given to us by use reducer and then inside the reducer

134
00:10:54,030 --> 00:10:57,630
is going to check the action type that is coming in here.

135
00:10:57,960 --> 00:11:05,100
So if the action type is equal to what is inside the reducer, then the reducer is going to make changes

136
00:11:05,100 --> 00:11:06,930
to the initial state.

137
00:11:07,290 --> 00:11:13,200
Then the AB data state will reflect and then have access inside the use reducer.

138
00:11:13,410 --> 00:11:18,270
So let's see how we are going to implement the reducer inside this function.

139
00:11:18,450 --> 00:11:22,370
For the meantime, let's just return an empty object.

140
00:11:22,380 --> 00:11:24,870
We will come back to it as we move on.

141
00:11:26,080 --> 00:11:26,810
Great.

142
00:11:26,830 --> 00:11:32,320
So now let's remove this one and let's call our reducer here.

143
00:11:32,350 --> 00:11:38,530
So right now we have a complete context API be set up.

144
00:11:39,100 --> 00:11:46,870
The next step is that we are going to feed a component that is going to have access to this provider.

145
00:11:46,900 --> 00:11:54,610
In that way, we are going to pass in a probe called value and this value is going to hold any data

146
00:11:54,610 --> 00:11:58,910
or functions that needs to be accessed inside our component.

147
00:11:58,930 --> 00:12:04,930
So for our case, let's just send some dummy data and call this one as a log in.

148
00:12:05,260 --> 00:12:07,930
And by default, let's say it's false.

149
00:12:08,050 --> 00:12:13,510
So now we have a complete set up of context API.

150
00:12:14,140 --> 00:12:21,550
The next step is that we want any component to have access to our states and then our function that

151
00:12:21,550 --> 00:12:22,780
we are going to create.

152
00:12:22,870 --> 00:12:28,540
In that way, we need to wrap this provider at the root of our application.

153
00:12:28,780 --> 00:12:33,100
The next step is let's go to index and here we go.

154
00:12:33,220 --> 00:12:41,680
We are going to wrap the provider inside the app because the app that renders the rest of the component

155
00:12:41,710 --> 00:12:45,970
that is the home page look in register our transaction.

156
00:12:46,960 --> 00:12:51,620
Of context provider where I forgot to export it here.

157
00:12:51,640 --> 00:13:02,290
So inside here we need to export this components as export default and then going to be as context provider.

158
00:13:02,410 --> 00:13:06,310
So inside the index and here we go.

159
00:13:06,310 --> 00:13:12,250
So let's remove the react street mode and then let's replace with this one.

160
00:13:12,280 --> 00:13:19,180
Now any component have access to our methods and then state insert component here.

161
00:13:19,510 --> 00:13:23,290
So this how we set up context API.

162
00:13:23,620 --> 00:13:29,890
So in the next video, I will show you how we are going to consume context meaning state for our context

163
00:13:29,890 --> 00:13:30,610
API.