1
00:00:01,060 --> 00:00:02,410
Hello and welcome back to the project.

2
00:00:02,920 --> 00:00:07,950
So now in the previous video, we saw how to get started with the reactor and now we'll go into the

3
00:00:07,960 --> 00:00:14,200
coating, but the first thing we'd be having is we'll have four different folders inside the source.

4
00:00:14,740 --> 00:00:20,710
Those are components folder where we'll have all the components, such as a header for it now, but

5
00:00:21,190 --> 00:00:26,830
the body of the blocks and the blocks and then app will have the.

6
00:00:27,840 --> 00:00:28,800
You know, the.

7
00:00:33,700 --> 00:00:39,640
I love the store, not just well, we will connect it to the users lives, users lives will be inside

8
00:00:39,640 --> 00:00:45,440
the features folder will create that and also we'll be having a styling folder so that we can style

9
00:00:45,440 --> 00:00:49,570
it to look like that each component can have its one styling.

10
00:00:50,050 --> 00:00:56,860
So first, we'll start those off by creating those folders for that posting his components folder.

11
00:01:01,680 --> 00:01:04,160
And the second one will have app.

12
00:01:06,850 --> 00:01:08,020
And not one that features.

13
00:01:12,430 --> 00:01:13,600
And the final one is stating.

14
00:01:21,160 --> 00:01:27,430
So once this is done now in this region, you will see the court for the future support.

15
00:01:28,030 --> 00:01:31,200
So the features that will have in our website is basically users lives.

16
00:01:31,630 --> 00:01:37,480
That means getting the data of the users, whether the user is logged in or not being based on the logged

17
00:01:37,480 --> 00:01:43,510
in and not or we have to render the blogs so we can see that in the feature section.

18
00:01:44,080 --> 00:01:49,750
So firstly, and the features create a file name called The Life Stogies.

19
00:01:57,560 --> 00:01:59,360
So inside is a slice of.

20
00:02:00,560 --> 00:02:03,050
First thing, we have to import few components.

21
00:02:03,620 --> 00:02:06,140
OK, firstly, we have to install them to import.

22
00:02:06,710 --> 00:02:08,360
So I am in my master folder.

23
00:02:08,360 --> 00:02:14,390
Like that blog website folder so I can say this, I will install all the dependencies on the packages

24
00:02:14,390 --> 00:02:14,810
that I need.

25
00:02:18,600 --> 00:02:24,750
So the first thing we need is Redux James Toolkit, as we said, as we saw, we will study about redux.

26
00:02:25,170 --> 00:02:30,930
So the user that nothing but the redux part where we will keep the reducers, initial state and everything

27
00:02:30,930 --> 00:02:31,890
and create the slices.

28
00:02:33,010 --> 00:02:39,690
Especially for installing redux, you need to run this command install redux toolkit.

29
00:02:42,320 --> 00:02:43,250
And has slashed.

30
00:02:43,610 --> 00:02:43,890
Yes.

31
00:02:44,930 --> 00:02:46,160
And once this is installed.

32
00:02:47,560 --> 00:02:49,360
So there is an error.

33
00:02:51,300 --> 00:02:54,240
OK, we need to mention this instrument npm install.

34
00:02:56,400 --> 00:02:58,680
And started Redux Jayesh Toolkit.

35
00:03:00,130 --> 00:03:05,680
And also, not only did just do it, could we not we need also install a reactor redux the act of logging

36
00:03:06,070 --> 00:03:09,280
material you could access and everything we can see that one by one.

37
00:03:09,520 --> 00:03:15,220
So before this guy to install dive into the coding part for the first thing, we will import this created

38
00:03:15,470 --> 00:03:16,630
from Rajesh Toolkit.

39
00:03:18,000 --> 00:03:18,630
In Port.

40
00:03:20,680 --> 00:03:22,390
Create slice.

41
00:03:27,670 --> 00:03:28,840
From to get.

42
00:03:30,150 --> 00:03:31,740
That we just installed recently.

43
00:03:39,590 --> 00:03:44,570
So basically why we are using this cowardly basis, because this is not the default exporting drugs.

44
00:03:45,740 --> 00:03:47,570
This basically has so many functions, right?

45
00:03:47,960 --> 00:03:49,070
Sort of dysfunction.

46
00:03:49,100 --> 00:03:50,610
This is one of the function we had.

47
00:03:50,840 --> 00:03:56,180
We are importing it since this is not the default export out of all the functions that will be only

48
00:03:56,180 --> 00:03:57,230
one default export.

49
00:03:57,740 --> 00:04:02,150
So that's why when it is default export only we can directly import it without any curly braces.

50
00:04:02,540 --> 00:04:06,200
But since it is not the default export, we have to use this process.

51
00:04:07,010 --> 00:04:07,280
All right.

52
00:04:08,000 --> 00:04:09,620
So after this?

53
00:04:11,430 --> 00:04:13,290
We have to create the use of slice.

54
00:04:16,340 --> 00:04:17,540
Create the user slice.

55
00:04:19,670 --> 00:04:21,680
So it creates life.

56
00:04:23,570 --> 00:04:27,560
And inside this, you have to give some parameters, such as user.

57
00:04:28,700 --> 00:04:29,720
Initial state.

58
00:04:34,400 --> 00:04:38,330
These are basically key value pairs, we are creating a JavaScript object.

59
00:04:38,810 --> 00:04:44,600
So inside the initial step, we have to give the initial state of the user we sign with opening RSA.

60
00:04:44,960 --> 00:04:46,850
So initially, he will not sign it.

61
00:04:47,090 --> 00:04:48,290
So is Simon.

62
00:04:50,600 --> 00:04:51,500
Will be Ford's.

63
00:04:55,220 --> 00:04:57,080
User data will be No.

64
00:04:59,310 --> 00:05:03,090
Because initially, when the user is not sending the user be, of course.

65
00:05:04,240 --> 00:05:09,930
Researching what so they know what the user is not saying, then on what basis we have to render the

66
00:05:09,930 --> 00:05:12,440
blocks so we have to give a default value, right?

67
00:05:12,450 --> 00:05:13,140
Default blog.

68
00:05:13,170 --> 00:05:19,530
There should be some default blogs, so this section put based on what that the blog should be like.

69
00:05:19,530 --> 00:05:23,670
We want tech news or sports news or some movie film news or something.

70
00:05:24,240 --> 00:05:26,100
So initially we'll have some tech news.

71
00:05:26,520 --> 00:05:31,610
You can have anything, you're going to have sports or movies that depends on you, but we'll have a

72
00:05:31,640 --> 00:05:31,980
news.

73
00:05:35,300 --> 00:05:36,770
And the blog data will be null.

74
00:05:38,490 --> 00:05:43,790
The search input will be checked, but the blocked data will be not only when the user is signed and

75
00:05:43,800 --> 00:05:47,310
then will have the distinct input.

76
00:05:48,820 --> 00:05:54,470
The blog that's why the blog that I will mention so they all need to be separated by a comma.

77
00:05:54,490 --> 00:05:56,440
Let's say we got there initially.

78
00:05:57,010 --> 00:06:00,520
So now we are done with this user slice.

79
00:06:02,520 --> 00:06:09,490
Initial step, so off that initial state will declare the reducers that users are used to get benefits,

80
00:06:09,510 --> 00:06:12,180
data set and fetch data set and get data like that.

81
00:06:13,020 --> 00:06:15,050
So first thing we want set signed.

82
00:06:16,420 --> 00:06:20,080
These radio shows are used to basically manipulate the initial state.

83
00:06:20,620 --> 00:06:26,920
So in in very initial stage we have for, you know, for the properties on what to say, we have four

84
00:06:26,920 --> 00:06:29,110
properties, so hope it changes properties.

85
00:06:29,110 --> 00:06:33,060
We need to change these, Simon to proven that when the user signs in.

86
00:06:33,550 --> 00:06:36,250
So how to do that will do that with their help of producers.

87
00:06:37,460 --> 00:06:43,820
So first thing is the same in how Britain is signing by using this signing function, this will take

88
00:06:43,820 --> 00:06:45,380
the state election.

89
00:06:50,120 --> 00:06:53,300
And it will set the U.S. in action that payload.

90
00:06:54,480 --> 00:06:59,220
Standard is signed into action not.

91
00:07:00,170 --> 00:07:00,570
Bailout.

92
00:07:04,280 --> 00:07:05,360
So once this is done.

93
00:07:06,690 --> 00:07:07,710
Similarly, you can.

94
00:07:11,810 --> 00:07:12,260
Have.

95
00:07:16,240 --> 00:07:17,830
For four of them.

96
00:07:19,100 --> 00:07:21,590
Instead of six a.m., we want to set user data.

97
00:07:24,980 --> 00:07:27,110
And they're also using data.

98
00:07:29,990 --> 00:07:31,700
I'm sorry to have it, be it.

99
00:07:33,270 --> 00:07:37,920
And after he was ordered to shelter input, so it would be setting foot.

100
00:07:39,500 --> 00:07:41,120
And they are not searching.

101
00:07:45,230 --> 00:07:46,130
And the same in.

102
00:07:47,430 --> 00:07:49,380
Instead of saying we want some blood data.

103
00:07:53,160 --> 00:07:54,680
Similarly lobbed at.

104
00:07:56,520 --> 00:07:59,760
So using the help of producers, we have completed the.

105
00:08:05,930 --> 00:08:07,900
Oh, yes.

106
00:08:13,110 --> 00:08:14,460
There is some indication that it.

107
00:08:21,220 --> 00:08:22,090
Let me fix this.

108
00:08:30,540 --> 00:08:32,700
Producers will be with the nation state.

109
00:08:33,510 --> 00:08:34,210
OK, sorry.

110
00:08:36,090 --> 00:08:37,890
And then the whole thing left.

111
00:08:44,480 --> 00:08:44,720
Well.

112
00:08:52,530 --> 00:08:54,440
So there's a small and that's what I fixed.

113
00:08:54,610 --> 00:08:57,300
In addition, there are some extra Calabrese slammed him on them.

114
00:08:57,660 --> 00:09:00,690
So this is how Richard are your users object should look like.

115
00:09:01,290 --> 00:09:03,960
So once this is completed, we have defined everything.

116
00:09:03,960 --> 00:09:09,570
We have defined the state and also that it is a functions to change those states, but how to export

117
00:09:09,570 --> 00:09:09,750
them.

118
00:09:09,900 --> 00:09:12,510
We have to create a conscience so that we could export them.

119
00:09:13,500 --> 00:09:15,630
This is the final step we have prepared to constrain.

120
00:09:17,620 --> 00:09:18,410
Quebec's border.

121
00:09:19,470 --> 00:09:22,290
So sex signed and.

122
00:09:24,170 --> 00:09:25,220
Set user data.

123
00:09:28,520 --> 00:09:29,390
Said input.

124
00:09:32,010 --> 00:09:32,940
Said Block data.

125
00:09:33,690 --> 00:09:38,490
So once this is done, this should be called the users place, but actions.

126
00:09:40,150 --> 00:09:46,630
So basically, and we export this, we need to import them from some other, some other file by using

127
00:09:46,630 --> 00:09:52,330
use livestock ActionScript signed in docs at Google that are not set in project docks and blog data

128
00:09:52,750 --> 00:09:54,430
on basic basis of a requirement.

129
00:09:54,820 --> 00:09:58,390
So once it is done, we lower export each and everything individually.

130
00:09:59,930 --> 00:10:01,490
Export concert.

131
00:10:03,000 --> 00:10:04,020
Select Simon.

132
00:10:07,940 --> 00:10:09,280
Of course, this will take a step.

133
00:10:12,380 --> 00:10:12,920
State.

134
00:10:13,930 --> 00:10:18,160
Diet pills are not these same and.

135
00:10:19,390 --> 00:10:23,320
So once this is done, we now have this photocopies.

136
00:10:26,370 --> 00:10:28,530
And then we can export default.

137
00:10:28,930 --> 00:10:30,720
But I said, these are all our exports.

138
00:10:30,960 --> 00:10:34,260
But there will be only one before export for a single file.

139
00:10:34,650 --> 00:10:37,350
So here in our case, it will be user sliced up reducer.

140
00:10:39,290 --> 00:10:45,710
So this will be the day for the export select sign in here it will be select user data.

141
00:10:50,810 --> 00:10:54,410
At a time that the staking, said, Simon.

142
00:10:55,540 --> 00:10:58,630
So selecting the today's computer, here's a user input.

143
00:11:01,600 --> 00:11:06,790
Once this is done, this will be state of the and not so cheap because we are we are changing searching

144
00:11:06,790 --> 00:11:07,910
for the value of such cheap.

145
00:11:10,090 --> 00:11:12,430
And the final one is select block data.

146
00:11:17,500 --> 00:11:20,460
This will change the value standard is a not logged into.

147
00:11:23,860 --> 00:11:28,060
So once this is done, we have defined the initial state, we have defined the name of the user, we

148
00:11:28,060 --> 00:11:31,480
have defined that individual functions we have exported them using the user selects actions.

149
00:11:31,480 --> 00:11:36,580
We have exported the default user Slashdot, Reddit, user analytics, put it all the, you know, the

150
00:11:36,850 --> 00:11:41,580
spread of the functions using this boat operator so that we can use, we can set the value of this.

151
00:11:41,590 --> 00:11:46,690
We can take the state of the, you know what the user is using the current state and then change according

152
00:11:46,690 --> 00:11:47,580
to that step.

153
00:11:48,270 --> 00:11:50,080
We have defined the user, selected our guest.

154
00:11:50,920 --> 00:11:54,190
We have completed the feature section in the next and the next.

155
00:11:54,520 --> 00:11:57,520
We will see how to get started with the components.

156
00:11:57,520 --> 00:12:04,120
And also before that, we'll see how to like a small we don't or dodges and some code changes and index

157
00:12:04,130 --> 00:12:04,630
dodges.

158
00:12:04,660 --> 00:12:06,700
After that, we can start with the home page component.

159
00:12:07,150 --> 00:12:08,140
See ya in the next few.