Once we have covered why would want to use use a reducer.
Next we're gonna start setting up our cart complex because like I previously mentioned I would want
to refactor my cart just to show example how we can work with use reducer and the way it's gonna work.
First of all I'm gonna collapse the use of it because we're still gonna use the same functionality even
after we're done setting up to use their juicer.
Because remember within the use effect with worked with total and cart items.
So we're going to leave these guys the way they are and I'm going to mention why I'm doing that.
But since it's taking up so much space I'm just gonna collapse at first and as you're watching the videos
remember use effect is there but all the functionality has been hidden and then I would want to change
from use state that I'm using right now for my cart to use reducer.
We use a reg user and user user is going to look for two things it's gonna look for reducer function
that's going to operate on the state and the initial state.
Now the initial state is going to stay exactly the same it is since we're already using get cars from
local storage that can stay the way it is.
But for the reducer we're going to have to create a function so for the time being I'm just gonna add
a comma and I'm going to say that there's gonna be a reduced function reduce function and you're going
to see that if I come up with a function here of course if I name it reducer since I'm referencing the
function but as always we can name it whatever you want you're not going to have an error because if
you're going to say right now you're going to get an error.
We're gonna go with const then reducer it's gonna be a function is going to look for two things for
state and action and we're going to cover this in detail as we're working on it.
And it always always needs to return a state.
We're gonna say that everything isn't gonna work as expected but we also need to change where we have
cart.
Now the cart value is going to stay exactly the same because we are using this.
And when I say we're using this I'm not talking about the functions that we have for a move item and
increase amount we're going to rewrite these functions using the use reducer but we are applying this
in the use effect.
That's why I'm going to keep the value here exactly the same.
But essentially this would be your state.
As always you can name it wherever you'd want.
I'm just keeping the name card here because again we're accessing when we work with our total as well
as card times but we're not returning a function in this sense we're turning a function called dispatch.
Again you're going to see it in a second.
So we have our use reducer that we pass in our reduced function and initial state.
Now what I would like to do is set up a reducer and separate file because imagine that all the functionality
that we have right now whether that's adding to the cart or clearing the cart is going to be in this
one single producer.
So you'd want to save up some space and in fact set up functionality in one place because it's just
going to make it easier to manage.
So we're going to cut this out like so then we're going to open up the sidebar and we're going to create
two new files.
We're going to go with a reducer dot J.S. that's gonna be step number one we're going to copy and paste
of course and we need to export this.
So in this case I'm going to go with export default.
Now I can just omit the name of course.
Let's delete that.
We're going to save it.
Of course we're exporting right now.
That also I would want to create a actions file where we're going to go with actions.
J.
Yes for now it's gonna be empty.
And then within the cart since I don't have the reducer right now reducer has been deleted from my car.
Jess I need to import it because otherwise I'm going to have a bug.
Someone go the reducer since it is a default export I can name it whatever I want from and then I'm
looking for a user file.
We're going to save it then of course set cart is not defined.
OK.
Why it's not the final one because now we're using this patch.
Please keep in mind we're going to use very very similar functionality in our reducer.
So I don't want you to delete anything.
I just want you to comment this out.
And then one by one we're gonna set up these functions using the reducer so we're not going to use Southcott
anymore.
We are going to dispatch.
So technically you could delete that cart.
But for the time being I'm just going to comment everything out just so we don't have the errors.
But at the same time so we don't have to rewrite the code comment.
Everything within the function.
So everything within the function body.
Let me just comment out.
So everything works we don't have the bugs.
And then one by one we're going to work on these functions.
Last thing Seth card also we're going gonna say it and again please keep in mind the reason why we had
bugs because there is no anymore set car there is dispatch.
And of course since we were using all the time said card that's the reason why the application was yelling
at us.
We are done with our initial setup and now we're to start working on remove item functionality.