Hello and welcome back to the project.
So now in the previous video, we saw how to get started with the reactor and now we'll go into the
coating, but the first thing we'd be having is we'll have four different folders inside the source.
Those are components folder where we'll have all the components, such as a header for it now, but
the body of the blocks and the blocks and then app will have the.
You know, the.
I love the store, not just well, we will connect it to the users lives, users lives will be inside
the features folder will create that and also we'll be having a styling folder so that we can style
it to look like that each component can have its one styling.
So first, we'll start those off by creating those folders for that posting his components folder.
And the second one will have app.
And not one that features.
And the final one is stating.
So once this is done now in this region, you will see the court for the future support.
So the features that will have in our website is basically users lives.
That means getting the data of the users, whether the user is logged in or not being based on the logged
in and not or we have to render the blogs so we can see that in the feature section.
So firstly, and the features create a file name called The Life Stogies.
So inside is a slice of.
First thing, we have to import few components.
OK, firstly, we have to install them to import.
So I am in my master folder.
Like that blog website folder so I can say this, I will install all the dependencies on the packages
that I need.
So the first thing we need is Redux James Toolkit, as we said, as we saw, we will study about redux.
So the user that nothing but the redux part where we will keep the reducers, initial state and everything
and create the slices.
Especially for installing redux, you need to run this command install redux toolkit.
And has slashed.
Yes.
And once this is installed.
So there is an error.
OK, we need to mention this instrument npm install.
And started Redux Jayesh Toolkit.
And also, not only did just do it, could we not we need also install a reactor redux the act of logging
material you could access and everything we can see that one by one.
So before this guy to install dive into the coding part for the first thing, we will import this created
from Rajesh Toolkit.
In Port.
Create slice.
From to get.
That we just installed recently.
So basically why we are using this cowardly basis, because this is not the default exporting drugs.
This basically has so many functions, right?
Sort of dysfunction.
This is one of the function we had.
We are importing it since this is not the default export out of all the functions that will be only
one default export.
So that's why when it is default export only we can directly import it without any curly braces.
But since it is not the default export, we have to use this process.
All right.
So after this?
We have to create the use of slice.
Create the user slice.
So it creates life.
And inside this, you have to give some parameters, such as user.
Initial state.
These are basically key value pairs, we are creating a JavaScript object.
So inside the initial step, we have to give the initial state of the user we sign with opening RSA.
So initially, he will not sign it.
So is Simon.
Will be Ford's.
User data will be No.
Because initially, when the user is not sending the user be, of course.
Researching what so they know what the user is not saying, then on what basis we have to render the
blocks so we have to give a default value, right?
Default blog.
There should be some default blogs, so this section put based on what that the blog should be like.
We want tech news or sports news or some movie film news or something.
So initially we'll have some tech news.
You can have anything, you're going to have sports or movies that depends on you, but we'll have a
news.
And the blog data will be null.
The search input will be checked, but the blocked data will be not only when the user is signed and
then will have the distinct input.
The blog that's why the blog that I will mention so they all need to be separated by a comma.
Let's say we got there initially.
So now we are done with this user slice.
Initial step, so off that initial state will declare the reducers that users are used to get benefits,
data set and fetch data set and get data like that.
So first thing we want set signed.
These radio shows are used to basically manipulate the initial state.
So in in very initial stage we have for, you know, for the properties on what to say, we have four
properties, so hope it changes properties.
We need to change these, Simon to proven that when the user signs in.
So how to do that will do that with their help of producers.
So first thing is the same in how Britain is signing by using this signing function, this will take
the state election.
And it will set the U.S. in action that payload.
Standard is signed into action not.
Bailout.
So once this is done.
Similarly, you can.
Have.
For four of them.
Instead of six a.m., we want to set user data.
And they're also using data.
I'm sorry to have it, be it.
And after he was ordered to shelter input, so it would be setting foot.
And they are not searching.
And the same in.
Instead of saying we want some blood data.
Similarly lobbed at.
So using the help of producers, we have completed the.
Oh, yes.
There is some indication that it.
Let me fix this.
Producers will be with the nation state.
OK, sorry.
And then the whole thing left.
Well.
So there's a small and that's what I fixed.
In addition, there are some extra Calabrese slammed him on them.
So this is how Richard are your users object should look like.
So once this is completed, we have defined everything.
We have defined the state and also that it is a functions to change those states, but how to export
them.
We have to create a conscience so that we could export them.
This is the final step we have prepared to constrain.
Quebec's border.
So sex signed and.
Set user data.
Said input.
Said Block data.
So once this is done, this should be called the users place, but actions.
So basically, and we export this, we need to import them from some other, some other file by using
use livestock ActionScript signed in docs at Google that are not set in project docks and blog data
on basic basis of a requirement.
So once it is done, we lower export each and everything individually.
Export concert.
Select Simon.
Of course, this will take a step.
State.
Diet pills are not these same and.
So once this is done, we now have this photocopies.
And then we can export default.
But I said, these are all our exports.
But there will be only one before export for a single file.
So here in our case, it will be user sliced up reducer.
So this will be the day for the export select sign in here it will be select user data.
At a time that the staking, said, Simon.
So selecting the today's computer, here's a user input.
Once this is done, this will be state of the and not so cheap because we are we are changing searching
for the value of such cheap.
And the final one is select block data.
This will change the value standard is a not logged into.
So once this is done, we have defined the initial state, we have defined the name of the user, we
have defined that individual functions we have exported them using the user selects actions.
We have exported the default user Slashdot, Reddit, user analytics, put it all the, you know, the
spread of the functions using this boat operator so that we can use, we can set the value of this.
We can take the state of the, you know what the user is using the current state and then change according
to that step.
We have defined the user, selected our guest.
We have completed the feature section in the next and the next.
We will see how to get started with the components.
And also before that, we'll see how to like a small we don't or dodges and some code changes and index
dodges.
After that, we can start with the home page component.
See ya in the next few.