Welcome to the radio.
So in this video, we can see how to implement the remove some part and not some functionality.
So as you can see it, when I'm clicking on add to basket, the the cart division is getting updated
with the number of items in the basket.
So now, once you go to the checkout page, you can see the items that are added to the fact, and you
can see that that is getting dynamically updated on the number of items already.
So if I click remove from the basket, you're going to see the price getting updated and also the number
of elements already here and already it.
So basically, we can see how to implement this feature in our website.
Basically, we use a user that user hooks for this purpose and also use database.
So firstly, to stop with the project, we have to we have to open the court and then we have to create
a file called state provided not just.
So going to how to do this had to cut and remove some card functionality.
So Africans here, basically they are having on one page like this.
It had that.
And then with the like some products, imagine what it.
And then some products like the products and buttons.
So when you click on the button, we want this product details to be sent to the checkout page.
OK.
So.
To send the data of this product to the checkout page will not send it directly.
Like, for example, estimate a cloud over it like a data layer, so we'll be sending the product details
to this data layer.
And you can use the product, the data that is present, the data from any component.
So I can use from the checkout page component down from the header component or inside checkout, as
you can see inside or better.
I have product products already it and then the amount so you can use the data, what here in this component,
here in this component.
So once you push the data into the data layer, you can use it from any component.
So this is what we'll do with this data provider.
OK.
Let me add this Fundstrat provider will basically prepare the data.
So first thing you have to do is import the packages.
Create context in this context.
And use reduced.
So basically, what we mean by clear context and like use context.
So this is what the react context here comes in.
So context provides us a way to parse data through the componenti through the componentry without having
to pass drops down manually at every level.
So like as I said before, if you want to send this data to any component, you have to pass like,
for example, if I want to send this to the checkout product like over here, so then I have to implement
everything like I have to send the props to the below component and then the props to the below components.
So it's like a trillion you have after.
Send the props to every and then the download until it reaches the donor.
So instead of that, to access the data from a certain area, from every component, breakfast, from
every component, we lose this context.
So we have to create a context for the same context.
So basically, that is what we'll be doing here once we import these things.
So to be creating the context.
Will you be exporting it at the same time, creating so this creates the data layer?
OK, so basically we are preparing the data.
iPads, the data.
Now we have to wrap it up and provide the data, right?
So what we have to wrap our app and provide the data with the data.
So this we have to do export.
Gombe State provided.
So we'll be using the Arrow functionality at.
So this is basically the boilerplate code that we have to use for every React project, OK?
So it's going to be the boilerplate quote So what about this?
Complete the court and tell you what the complete code will look.
Our values should be.
Uses revenues that we have to use that due to look.
OK, given capsule, reduce it.
And ActionScript.
And should this will have the children?
So once we are done with this, we have to pull the information from the data, they have to use it
from various components.
Right, so.
So this line of courage to pull information from the retailer.
So this is the boilerplate code that you have to use for every product when you are dealing with the
state providers.
So what the whole code does is it will import very ideas that you already have that that are needed
to implement the functionality that we want and prepares the data so that whenever we use the radio,
that the arguments that the REDUCE-IT have, that is the current state and dispatch method to alter
the current state.
So basically, we'll be getting all the features that are necessary to build this data and to push the
information into the left and then pull the pull back the information from the left.
So once we did this, we have to create a create a file called reduce and address.
And introduce a Dargis here will be building all the application.
I mean, if at all the.
Application.
Eleven states.
And defiant actions to make that statement, yes.
Changes to the state.
Now.
So we we have the first export, the initial step, so this is also the boilerplate code that you have
to use for every project.
Don't worry, if you don't understand it, it basically creates a red alert and it will get the basic
functionality that we want to use.
So this will be a material basket.
Well, will store all the products that are pushed into the retailer and retrieve the products from
that data.
So now we'll be using the selector.
So I said, but then at this hour, we'll get to argument that is stick and action.
So this state has the current current state of our data layer and then action to make the changes relationship.
This will be out of action.
And then here we can perform the methods that we want to do.
So basically, I'll be using this thing in in my checkout, see it.
Check out our gas order and product or where we have to.
When we click on Add to basket, we have to call a function that make changes to the.
So we'll see how we do that.
So today we have to.
Export producer.
So long as we do that, we have to go to Florida just OK.
And then click on the basket like on.
We have to follow function, right?
So we know that.
So I'm clicking the attribute of the button or it will it will call a function when the button is pressed.
Click here I am calling a function, it is a JavaScript functions I have to use collaborative.
So regarding add to basket function, so you have to define the function well defined in this function
product only.
So as I'm working with state television, I have been import them first.
So important as you state value from state provider, basically, then I study this, you will state
value makes the product as a children's component.
So when it runs, it's children component, it can access the data from the parent company and that
is the first thing they are doing in the studio.
And we are making everything children when whenever we use this state provider that we are using in
that context.
So basically, to pull the information, we'll be using this.
So I'm using the state value.
So long as you are importing this now, you can write the code in the function.
So here dispatch means it's alternative name for the action.
OK, is alternative name for action like basically state and action we are using yet a state and dispatch.
So, OK, this dispatch will do this will.
This is like JavaScript object that will have a Typekit type feature, so we'll be seeing how to do
that.
So as to what should we have declared the function?
So when you click on add to basket, we have to change the state.
That means we are introducing a new product data into the state.
So for that, we have to use this action.
That is the dispatch method.
So dispatch.
I started something called item.
Oh, let me show you item.
Typekit, first, we have to use tape and then the tape will be the name that you want to give to the
to the function that you want to perform, so that if you are adding more functions like now, we having
to get information, we never remove that basket.
So to do all this, we have to give it a tape so that we can use that switch inside to reduce our debt
and then do the necessary function.
So I'm studying this, and now I'll give the item item that I want to pull the item is the data that
I want to push into the data.
So this will be an object.
A feisty IED.
I imagine, Maj.
Price will be Price.
And then waiting with bated.
So.
So with this, we have done that to basket.
OK.
Your comment.
So we have rolled the cord in product today, so we have the target of this to basket introduced or
just so we knew this which gets you.
You're here since I've said you once we set up the data layer we can using an agent or not.
So basically, I'm importing the used tech instead value and then using making this having the children.
I can access that data that has been set up so we can see how to do this and reduce it.
As I said, we'll be providing a tape inside a broader digest.
I will be accessing the switch at that type.
So the first time the case will be.
Add to that.
And then we have to return an object like return, the total data that is present inside the data.
So in this reducer, it's like.
What we say.
It is immutable, the state protest, whether they're due to function, is immutable.
So in coming state, coming in as coming in as an argument is never directly changed.
Their lives and function as a route has to render a completely new state object.
So that's why we'll be returning the complete new object over it as it is immutable.
So I'll be returning the previous state that this freight operator does that a lot, it does this that
it will it will return the complete previous trade that we are using and then change the necessary.
I want to do so in the basket.
I will add the product.
Initially, it will be a standard basket only.
And then I landed with action items.
So basically, the basket remains as it is, but I am adding an additional item to the basket, so basically
I'm adding a product, a new product details for the data.
So this is what I can does.
OK, there is no need to have a simple an idea and then.
You need to have a fallen order.
So with this, we have completed that add to basket functionality.
So when you click on add to basket how to like, as you can see, Audiard.
When we pick on October 14, like make this number update dynamically, the items in the basket so we
can see how to do that.
So for that, we have to go to another gas.
And in strategies.
As you can see over here.
Instead of sending a number like zero, I want to have the number of items that are present inside the
data so far this, I have to import the necessary things.
So long as I'm importing this, I'm making this other child components, OK, so that I can access information
from the data.
So long as I can import this, I can now.
Let me make Rick again important, the data let on some.
I'll be putting the basket and then the dispatch method.
From your street value, that is basically I am restructuring the area that is didn't use jet importing,
basket and dispatch.
So in all of the simple thing here, if we want to like the basket, does product details.
So if there are two products inside the basket, there will be two objects with product details.
So if you want to get the number of items and then we just run the basket length so that so that is
what we were doing here when simply said basket doubling since it is JavaScript.
We have to use calibrated.
Yeah.
So with this, like with this, you can see the numbers getting affected.
So there's another object is not a travel cannot trade property symbol to.
So ensure that there's a found in fact, things were collapsed.
So fixed, ever, so that gave me that instead provided ideas like there's a typo in of editions that
I have type any in any physical state, so you have to change that initial step and then I'll change
and reduce any aperture an initial step.
So not like as I said before.
Once we set up the data layer, we can use that data from the data layer from any component.
So basically, we have to set up parent level data architecture from the parent level, all the components
and what is a parent component parent component, this app.
So once we said that Burgess with this data layer, then we can access everything from that children.
OK.
So that is what I and I will be doing not go to in our Jess and add these lines of code.
Add these two lines of everything, but reduce an initial state from it.
State provided that some state provider and insert dodges include these three lines of code like we
have.
We are setting up the state provider with the initial state this and then reduce it.
So once we do this and you have to change the typos, go to the page.
And then when you refresh, you can see like when you click on add to basket, it is getting updated.
We're getting up there today, but when we go to check out, we can see the products.
So now what we have to do is that we have to bring the product data from the data layer and also the
data for amount and then the number of items in the data that we see in the next.
We do.