Excellent.
With our simple components of the way we can switch gears and focus on displaying store product.
Eventually you're going to be fetching products from your own API.
But since I find it a bit of an overkill.
Building our API and react app together the same time.
Initially we were going to fetch our products from the API I created specifically for this project and
once we build the card component then we're going to set up our own API more essentially you're going
to set up your own API and we're going to do it together.
But for the time being you can think of these as temporary local data but of course instead of storing
them in our app we're going to fetch them from the external API.
I created my API using the same data structure as strappy.
So once you create your own API you're not gonna have to refactor your whole app just change the URL
where you're getting your data from.
With that being said now let's discuss our possible strategies and why react.
Context API makes the most sense because let's understand one thing not only we need access to a product
in a product page.
We also need access in the homepage as well as the single product because in the home page we're displaying
the feature product in a single product we're displaying in for about that particular product.
It would be only product we would just use use the fact hook set up our HDTV request and we would be
good to go.
However it is not the case.
And in order to give us a better understanding of what we're doing.
I just created a visual representation of our app.
Now granted it doesn't include all the pages it doesn't include all the components but this should give
us a clue of why the context API would be our best solution.
Now our first solution would be following where we need to set up a [REMOVED] P request so why don't we
just do it in each and every component.
And definitely you can do that.
Let's say within a featured we would want to display the feature product set up the Asian ETP request
the same thing in a product list within the product page and also within any single product.
However there are two problems with this approach.
First of all even though our requests are gonna be different there's still gonna be some copying pasting
and eventually we're just going to be repeating ourselves and there's gonna be some bugs.
And it also is gonna be harder to manage because what if let's say you are you are all changes you're
going to have to hop from one component to another one and change let's say just one part of the url.
So even though it is an option it is probably not the best one.
OK so what would be alternative.
Well you could say we could set up the HDP request within our route component.
We could just get it there and then whatever component needs that data.
Well we can just pass it down as props and you could definitely do that.
But aren't we gonna do a bunch of proper drilling where we're going to have to pass not only to a home
but then to feature the same what product list in order to get our data into products list.
We're first going to have to pass it through product.
And even though we're not passing let's say 10 levels deep it is still a bit annoying that we need to
pass through components that actually don't require that data.
And also it's gonna be hard to manage because in fact we're not only going to have one context we're
gonna have one for users one for card and one for product.
So if we're gonna jam all our code within app component it is gonna be hard to manage that particular
file because it is already busy right now because we are already dealing with our reactive product down.
So even though it would be another approach again it's not the best one because it is going to be hard
to manage our file if we're jamming all the logic in there.
So we have a single component approach.
We have the app approach and both of them didn't work.
So what would work.
Well we could set up a react context API where we set up in one place.
Again our ETP request and then using the used context took we can access it anywhere in our application
whether that would be products list or whether that would be a product page.
It doesn't matter the same way we're going to wrap the context the product context around our whole
application.
And then each and every component that needs access to the data we can have access right away.
And that way if we need to change something we're just gonna do it in one place.
And again I'm not I'm going to repeat myself but we are going to create three contexts.
We're going to have one for users one for card and one for product.
And the reason why we're doing it that way.
Because again it is easier to manage if our file just deals with one functionality we definitely could
set up one context that deals with everything users cartoon products but by doing so we're going to
make our lives harder because now we're gonna have to deal with again a giant file.
That's the reason why it is better to separate your functionality into a separate complex.