1
00:00:00,240 --> 00:00:00,720
Excellent.

2
00:00:00,720 --> 00:00:06,740
With our simple components of the way we can switch gears and focus on displaying store product.

3
00:00:06,780 --> 00:00:10,550
Eventually you're going to be fetching products from your own API.

4
00:00:11,070 --> 00:00:13,880
But since I find it a bit of an overkill.

5
00:00:14,010 --> 00:00:18,750
Building our API and react app together the same time.

6
00:00:18,750 --> 00:00:24,810
Initially we were going to fetch our products from the API I created specifically for this project and

7
00:00:24,810 --> 00:00:30,820
once we build the card component then we're going to set up our own API more essentially you're going

8
00:00:30,820 --> 00:00:33,880
to set up your own API and we're going to do it together.

9
00:00:34,260 --> 00:00:40,020
But for the time being you can think of these as temporary local data but of course instead of storing

10
00:00:40,020 --> 00:00:44,260
them in our app we're going to fetch them from the external API.

11
00:00:44,310 --> 00:00:47,970
I created my API using the same data structure as strappy.

12
00:00:47,970 --> 00:00:53,310
So once you create your own API you're not gonna have to refactor your whole app just change the URL

13
00:00:53,310 --> 00:00:54,840
where you're getting your data from.

14
00:00:54,840 --> 00:00:59,130
With that being said now let's discuss our possible strategies and why react.

15
00:00:59,130 --> 00:01:06,570
Context API makes the most sense because let's understand one thing not only we need access to a product

16
00:01:06,630 --> 00:01:08,100
in a product page.

17
00:01:08,100 --> 00:01:14,250
We also need access in the homepage as well as the single product because in the home page we're displaying

18
00:01:14,250 --> 00:01:19,790
the feature product in a single product we're displaying in for about that particular product.

19
00:01:19,860 --> 00:01:27,030
It would be only product we would just use use the fact hook set up our HDTV request and we would be

20
00:01:27,030 --> 00:01:27,900
good to go.

21
00:01:27,910 --> 00:01:29,690
However it is not the case.

22
00:01:29,850 --> 00:01:33,770
And in order to give us a better understanding of what we're doing.

23
00:01:33,930 --> 00:01:37,520
I just created a visual representation of our app.

24
00:01:37,530 --> 00:01:43,050
Now granted it doesn't include all the pages it doesn't include all the components but this should give

25
00:01:43,050 --> 00:01:47,970
us a clue of why the context API would be our best solution.

26
00:01:47,990 --> 00:01:53,700
Now our first solution would be following where we need to set up a [REMOVED] P request so why don't we

27
00:01:53,700 --> 00:01:55,840
just do it in each and every component.

28
00:01:56,010 --> 00:01:57,880
And definitely you can do that.

29
00:01:57,990 --> 00:02:04,290
Let's say within a featured we would want to display the feature product set up the Asian ETP request

30
00:02:04,730 --> 00:02:10,070
the same thing in a product list within the product page and also within any single product.

31
00:02:10,500 --> 00:02:13,270
However there are two problems with this approach.

32
00:02:13,290 --> 00:02:19,170
First of all even though our requests are gonna be different there's still gonna be some copying pasting

33
00:02:19,510 --> 00:02:23,720
and eventually we're just going to be repeating ourselves and there's gonna be some bugs.

34
00:02:23,840 --> 00:02:29,460
And it also is gonna be harder to manage because what if let's say you are you are all changes you're

35
00:02:29,460 --> 00:02:35,780
going to have to hop from one component to another one and change let's say just one part of the url.

36
00:02:35,790 --> 00:02:40,370
So even though it is an option it is probably not the best one.

37
00:02:40,370 --> 00:02:42,200
OK so what would be alternative.

38
00:02:42,630 --> 00:02:48,300
Well you could say we could set up the HDP request within our route component.

39
00:02:48,300 --> 00:02:52,780
We could just get it there and then whatever component needs that data.

40
00:02:52,860 --> 00:02:56,130
Well we can just pass it down as props and you could definitely do that.

41
00:02:56,130 --> 00:03:02,400
But aren't we gonna do a bunch of proper drilling where we're going to have to pass not only to a home

42
00:03:02,760 --> 00:03:09,120
but then to feature the same what product list in order to get our data into products list.

43
00:03:09,270 --> 00:03:11,520
We're first going to have to pass it through product.

44
00:03:11,670 --> 00:03:17,580
And even though we're not passing let's say 10 levels deep it is still a bit annoying that we need to

45
00:03:17,580 --> 00:03:21,900
pass through components that actually don't require that data.

46
00:03:22,020 --> 00:03:27,000
And also it's gonna be hard to manage because in fact we're not only going to have one context we're

47
00:03:27,000 --> 00:03:31,750
gonna have one for users one for card and one for product.

48
00:03:31,770 --> 00:03:38,070
So if we're gonna jam all our code within app component it is gonna be hard to manage that particular

49
00:03:38,070 --> 00:03:44,580
file because it is already busy right now because we are already dealing with our reactive product down.

50
00:03:44,640 --> 00:03:50,310
So even though it would be another approach again it's not the best one because it is going to be hard

51
00:03:50,310 --> 00:03:54,460
to manage our file if we're jamming all the logic in there.

52
00:03:54,540 --> 00:03:57,150
So we have a single component approach.

53
00:03:57,150 --> 00:04:00,240
We have the app approach and both of them didn't work.

54
00:04:00,240 --> 00:04:01,170
So what would work.

55
00:04:01,590 --> 00:04:06,920
Well we could set up a react context API where we set up in one place.

56
00:04:06,960 --> 00:04:14,250
Again our ETP request and then using the used context took we can access it anywhere in our application

57
00:04:14,640 --> 00:04:18,760
whether that would be products list or whether that would be a product page.

58
00:04:18,770 --> 00:04:25,500
It doesn't matter the same way we're going to wrap the context the product context around our whole

59
00:04:25,500 --> 00:04:26,520
application.

60
00:04:26,520 --> 00:04:31,860
And then each and every component that needs access to the data we can have access right away.

61
00:04:32,040 --> 00:04:35,760
And that way if we need to change something we're just gonna do it in one place.

62
00:04:35,790 --> 00:04:40,290
And again I'm not I'm going to repeat myself but we are going to create three contexts.

63
00:04:40,500 --> 00:04:44,420
We're going to have one for users one for card and one for product.

64
00:04:44,580 --> 00:04:46,630
And the reason why we're doing it that way.

65
00:04:46,830 --> 00:04:54,180
Because again it is easier to manage if our file just deals with one functionality we definitely could

66
00:04:54,180 --> 00:04:59,910
set up one context that deals with everything users cartoon products but by doing so we're going to

67
00:05:00,060 --> 00:05:05,470
make our lives harder because now we're gonna have to deal with again a giant file.

68
00:05:05,850 --> 00:05:11,670
That's the reason why it is better to separate your functionality into a separate complex.