Amazing job.
We've got our sidebar, we can even manually toggle it, so now, of course, let's set up that functionality
somewhere globally.
And I guess I would still want to reiterate why we're setting this up globally, because technically,
you could make an argument that, yeah, we can just navigate and yes, we could set up the functionality
over here and we would pass it into nobre and sidebar.
Now, first of all, why we would have to do it in the jazz world, because I would want to close the
sidebar and I can do it from the sidebar.
But as far as opening, I definitely would want to access that functionality in my neighbor.
Correct.
So there's no way for me to somehow magically push this functionality from the sidebar.
So imagine if I would set up my use that over here.
There's no way for me to magically somehow throw it in the Napa where once I click on a button, then
I can display the sidebar.
That's why at least you need to set this up in the abcess and technically it would work.
Now, the problem is more places.
You have this kind of setup where something is sitting in some kind of random component, the harder
it is to manage your application.
Imagine a scenario where maybe in one of the pages you would also want to open up the sidebar.
It would be somewhat of the pain.
Then again, get this from the app to the particular page that you would want to have functionality.
And also the app just would right away get somewhat messy, at least in my opinion, because in my opinion,
objects should just be responsible for rendering my pages.
So if I know that there's some issue with pages, I go here instead of coming here, and then I have
some kind of functionality for the sidebar, then I have the pages and hopefully you get the gist.
And that's why a better setup would be actually getting this from the local context or I'm sorry, from
the global context.
And we have multiple contexts.
We have one Fourcade filter and products and user, and for this one will use product.
Now I'll cover why I'm using products at the very end of the video.
For now, let's just go with the flow and navigate to product context.
That's the one that we're looking for.
And there's a bunch of setup here.
Like I said, essentially it is a boilerplate, but the first thing that I would want is to wrap my
application in product provider.
Otherwise, whatever functionality I'm setting up, it's pretty much useless because I'm not going to
have access to it.
And as you can see right now, I have product context as a value.
So before we do anything, we're going to navigate to you in next year.
I already imported the product provider.
And notice here now.
And by the way, this is somewhat annoying where you would need to double click in order to have both
of them open.
And sometimes it doesn't work.
But notice how in this case, I wasn't exporting here in the bottom.
I went both of them as far as the products provider and used hook the used product context.
I right away set up the exports here.
So I want to export and then provider and then export and then the hook.
OK, now in the index, I'm grabbing that provider and now I would want to wrap my app from my app component
in that provider.
So it's trying not to make some silly bugs.
We're going to go with product and provider or product.
Sorry, I was also something that is always me up.
If I have plural and it's always products and then sometimes I go with product and then there's a silly
bug.
But if you don't have any egregious errors, you should be in good space.
Because of course, now we have wrapped our whole application in the product provider next.
Like I said, since our app eventually is going to be quite big out right away, I want to set up the
structure.
So I would want to right away use my use reducer.
That's the hook that is going to come in really handy.
And we remember that we are getting back to things.
We are getting back to state.
So that always is going to be our current state and then the dispatch.
So the function that we use to control our state.
So essentially we pass in, of course, the type into the dispatch and then we go to the producer,
the function that actually controls that state.
And that is how we operate on the state using user sort of we don't go, hey, let's change some value
in a state by setting up some function.
No, we always need to run the type of action through our dispatch.
That is the only way.
And that's where that control comes into play.
Where now I'm specific.
Saying, hey, listen, you can only update the state if there is an action, if there is action, you
kind of just willy nilly start typing away and again, eventually as your project gets bigger and bigger,
that comes in really handy because you don't make some silly bugs that are very hard to find eventually,
because I can tell you right away that as we're working right now in the state, we're probably like,
hey, I could be already done.
It would take me five minutes to set up the state value and I would be in good shape.
And you're correct.
As far as the style, of course, it might seem like an overkill.
Just understand that when you're tackling big projects, it's those small things that catch up with
you later and really make your work, sometimes even a nightmare.
So I'm just saying we're going to go with you as a producer.
That is my hook.
Correct.
Use reducer.
And then we need to pass into things.
We need to pass in reduce function.
So the function of that is going to control our state.
And I already set up the boilerplate for this function and I gave it a name of reducer and all the cases.
I'm going to do that.
And it is coming from a specific folder.
So since we have multiple reducers, I went with reducers folder and then I'm looking for specific file
products, reducer products, contact product producer.
Hopefully that is clear and we go with a reducer.
And then I need to have the initial state.
What is initial state?
Well, that is just at the moment empty object.
Correct.
So we set this up and remember, in order to have some kind of functionality, we would need to dispatch
an action.
Correct.
So, for example, I would want to set up two functions, one that closes sidebar and one that opens.
And we'll start very simply in the initial state.
I want to create that property.
So there's going to be a property by the name of it side bar and then open.
Now, what is going to be the default value, which is going to be false?
So I would want to hide the sidebar by default.
Hopefully that is clear.
And now let's come up with those two functions.
I'm going to say const and then open sidebar.
Now, function is not going to be looking for any parameters and instead of dysfunction, we are going
to dispatch an action.
So say this patch over here.
And I would want to pass in the type now for now, just type the string and of course, then we'll do
the whole song and dance while we're setting up the actions in a separate place.
So for now, let's just go with a object.
Remember, we needed to pass an entire property.
And yeah, I said, I'm going to go with strength, I'm right away accessing the variable, so let me
just say sidebar and then underscore open.
So of course, this will be my action.
So that's the type of action that I'm passionate.
Now let's navigate to our reducers.
So reducers and we're looking for product reproducer.
Correct?
Again, I'm getting the actions.
I'll cover that in a second.
What's more interesting is we have this function.
Notice how exporting is default.
That's why I can name it reducer in my file just so it's a bit easier.
And we're getting two things.
We're getting state and we're getting a action.
So action is something we would want to do.
And state is the current state or old state before the update.
So I'm going to get my state and then once I'm done with my action, whatever it is, then of course
I will just want to return that new state.
Now, the reason why I have this return state here and then only I'm throwing the error, you'll sometimes
run into this annoying bug where you first set up the action.
Everything is beautiful.
You maybe invoke this function, which we're going to do in a second.
And then if you right away throw the error, well, there's just going to be an error.
Again, it's not a big deal.
We will remove this return state eventually.
But for the time being, just so I don't have those weird bugs were all right away.
Have the error.
I'm just returning a state by default.
And like I said, there's many ways how we can do that.
In my case, I prefer using the if statements instead of the switch.
So I will just say if and then action and then type.
And for the time being we have the string.
So I'll have to copy and paste the value.
Eventually I'll switch to the variable of course.
So sidebar open then.
I would want to do something and for the time being I'll just log on.
I'll say the action type or you know.
Yeah, I'll say action.
Let's just see what we've got and once we have this in place.
We're going to go back to the context and now I want to invoke this function now, in order to do that,
I will use the use the fact so we're going to go with ears is a fact.
And then as far as the callback function, I'm just going to say that I would want to run it once.
And then let's just go with open sidebar and we're going to invoke it.
And I would want to navigate to the bigger screen to check out what kind of values we have.
So let's do that.
I'm going to open up the console and we should see in the console the object.
And there it is.
I have type sidebar open.
So now, of course, what we could do is go back to the producer and say if the action type is a side
bar open, then of course I would want to return the state.
So my current state, but of course I would want to change the value for the property of now.
Is sidebar open?
Correct.
Since once I dispatch this, I would want to open up my sidebar.
I would want to showcase it.
So because this needs to be set to trial on the way, we're going to do that.
We're going to say that if that is the case, we're just returning and the dot and then state.
So the rest of the values, which at the moment we don't have, but eventually we will and will say
is sidebar open is equal to true.
So we would want to open up the sidebar and once we save.
This, of course, should work where the sidebar should be open now, a few things.
First of all, remember when we talked about the strengths, it is very easy to introduce the bug.
So if I say here sidebar and of course, I'll remove that return state, so now I will throw the error
because it is very useful to see that.
We'll see that since the strengths don't match and we still invoke the function we're going to get of
this giant error.
That's why by default, I'm just returning instead.
So you don't run into those issues when you're dispatching your first action.
But eventually I would want to keep it this way because I will right away let me know.
Hey, listen, there's something off as far as my setup.
Now, a better setup is if we have all our actions in separate place as variables, and that is if we
navigate the actions.
Jass, which are, by the way, right next to the object notice, like I said, I already created all
of these values for Y because like we just saw within the gas example, it's somewhat not productive
if we have to type all this together.
I don't think you'll learn anything from that.
So here I have the variable I'm exploring.
I have a sidebar open and sidebar close.
And also as a quick side note, the reason why I'm going over every smallest detail in this setup is
because later, since we have to repeat quite a few actions, I would want to move a bit more swiftly.
So hopefully it's going to be clearer after the first two actions, how everything is going to work
and then we don't have to spend this time on the general setup.
Again, just a quick side note.
I have these two actions, one for sidebar open, one for sidebar close.
And the only thing as far as the value is just this string power.
So now, of course, I can change this around where in the product's context, instead of using the
string, that is very easy to make a mistake.
I'm just going to go with my value since, of course, I'm importing I'm importing from the actions,
all the actions that I'm interested in, the products context.
Notice there's way more actions here.
So each context is going to look for specific actions.
It's not like every context needs all of them.
And the same works in product reducer.
Again, same thing.
I need specific things.
In this case it is a side bar open.
So I'm going to go over here, side bar open and you can probably already guess, but if the action
is sidebar close, what I would want to do while I would want to close it right.
So let me just copy and paste and in here will change this around and say side bar and then close.
If that is the case, then of course this will be back to force.
Now, I don't need to add anything at the moment, so that should do it for the sidebar.
And I also don't need to invoke it here with usufruct.
This was just to showcase how it's going to work.
Now, I would want to delete it and we're just going to copy and paste this one.
So say that the function name is going to be different because now I want to close it and instead of
action on the sidebar open, you can probably already s we're going to go with side bar close.
Now, what's missing is passing the functions and the state that is very important.
I need to have this value.
I need to know whether sidebar is open or false because remember in the sidebar, we're actually checking
that.
Correct.
So now we want to pass it down into more value.
So I'm going to go with double Cali's because I'm going to go back to Joska for the first ones and then
I'm setting up the object where first I will spread out my state because eventually there's going to
be more values.
It's not just the sidebar open, which is at the moment.
And then, of course, I would also want to pass my functions.
Now, again, there's going to be more functions.
Well, actually, the only one we're going to pass it down, but let's just say more functions.
And now I would want to pass these two open side bar and close side bar.
So I'm by the way, this just gave me a control log, which is not something I wanted.
And once we pass them down, I'll stop this video.
But before I stop it, I would just want to navigate to the side bar and check whether I'm getting these
values.
So I'm not going to change this one around.
But remember, we are setting up the provider.
We are wrapping our whole application in the product provider that is very important.
And then in the sidebar now, since, of course, the sidebar is in the app, I can access it using
my hook.
Correct.
So we use products, contacts in the products contact.
That is my hook.
But just get me the products contact and I simply want to console log with whether I have.
Whether everything works and here, let's just call this data, I mean, the naming is really up to
you since all the structured in the next year anyway.
And I'm going to go with data.
And if you can see the state and those two functions, you should be in good shape.
So when I get back here, I'll refresh, of course.
And there is now I can see that in the sidebar line 13.
I'm getting all these routers.
Now, the last thing that I would want to mention is why I'm using the products.
And honestly, the simple reason was because I didn't want to overcomplicate things and add one more
context, because we need to understand that.
Products context essentially will be responsible for getting my products from the API.
It's going to get the product and it's going to get the single product.
The reason why I did this sidebar is because I didn't want to create another new context for just a
sidebar.
It just seems for me overkill.
So I needed to add it somewhere and I thought it would make the most sense in the product context.
Normally, if you have more global things, like, for example, I don't know, maybe you have a model
that you would want to toggle globally.
Yeah, you could definitely set up a global context and then place both of these things in their sidebar,
as well as the model for me.
I just thought it's a bit of an overkill just to create a new context with new producer just to control
the sidebar.
That's why I kind of jammed it in the product.
Hopefully you can forgive me.
Hopefully you understand my reasons.
And of course, we can start selling functionality where once we click on some buttons, on some links,
we're actually invoking the open sidebar function and the closed sidebar function as well.