1
00:00:00,630 --> 00:00:07,650
And I will import the global context, and then I have to show the quantity of the products which we

2
00:00:07,650 --> 00:00:10,080
added to the cart or we import them.

3
00:00:11,650 --> 00:00:13,570
And global context.

4
00:00:16,780 --> 00:00:19,120
I think he was global context.

5
00:00:23,670 --> 00:00:25,800
Why it's not showing me more transport options.

6
00:00:28,950 --> 00:00:29,200
OK.

7
00:00:29,640 --> 00:00:37,290
So the thing is, there are multiple exports in that particular component, so to import one particular.

8
00:00:38,680 --> 00:00:44,260
Function from that unit to provide clearances, because because there are multiple exports, so for

9
00:00:44,260 --> 00:00:51,880
that, you need to provide core liberties because if you want to import of one before export earnings

10
00:00:52,060 --> 00:00:55,360
and the exporter, there is only one default export.

11
00:00:55,360 --> 00:00:57,280
So then you do need to provide collaborators.

12
00:00:57,820 --> 00:01:02,200
But if there are multiple exports, then you specify which one inside the Clarissa's.

13
00:01:02,200 --> 00:01:06,370
So here we'll import a global context from the context.

14
00:01:09,520 --> 00:01:15,300
From context, now we'll use the value, so first of all, let me create a constant contest.

15
00:01:16,720 --> 00:01:22,660
Maybe we can just name it inside the object we'll name it among.

16
00:01:24,220 --> 00:01:28,510
And that would be cool to use global context.

17
00:01:30,020 --> 00:01:30,620
And.

18
00:01:31,890 --> 00:01:32,370
Now.

19
00:01:33,460 --> 00:01:39,490
Will change this value from static to dynamic for that will provide JavaScript to that means in the

20
00:01:39,490 --> 00:01:44,650
parenthesis funny and the calibrations and here will right amount.

21
00:01:45,820 --> 00:01:52,750
But you've declared, you know, the well is no longer static nodes turn to dynamic and we do need to

22
00:01:52,750 --> 00:01:58,540
right now, we know each one between the and so we don't need to come here in the cold and ride it or

23
00:01:58,540 --> 00:02:01,360
we can change it and the function on the UI itself.

24
00:02:01,420 --> 00:02:02,410
So let me save it.

25
00:02:03,190 --> 00:02:04,800
Let me see the servers is up and running.

26
00:02:04,810 --> 00:02:14,950
No, it's not personal to the project folder and it was my bag and feels right and being start and so

27
00:02:14,950 --> 00:02:16,990
will be stored in a few moments.

28
00:02:17,320 --> 00:02:27,220
OK, so relics loading up or down to do is I need to settle loading Stuart so that whenever the data

29
00:02:27,220 --> 00:02:35,590
is like being fetched from the API, so we need to see something on the UI, you know, which indicates

30
00:02:35,590 --> 00:02:37,780
that the data is being lauded for that will.

31
00:02:38,320 --> 00:02:38,790
Right.

32
00:02:39,190 --> 00:02:44,200
We've already said the loading state and all inside the context, you can see this loading state.

33
00:02:44,450 --> 00:02:45,550
So initially it is false.

34
00:02:46,130 --> 00:02:50,530
So but we have not rendered it on the UI right before that.

35
00:02:51,400 --> 00:02:54,490
We need to import had the global context and.

36
00:02:55,880 --> 00:02:58,250
Inside after this, so her over to Louise.

37
00:03:00,050 --> 00:03:03,610
I don't really import the global context import.

38
00:03:04,710 --> 00:03:08,400
Again, the calibrates use global context.

39
00:03:09,570 --> 00:03:11,850
From context.

40
00:03:14,740 --> 00:03:15,230
Indexed.

41
00:03:17,670 --> 00:03:23,340
Now we have not created any for another for the components and we have not created.

42
00:03:23,910 --> 00:03:25,820
Is that whenever we import?

43
00:03:25,830 --> 00:03:32,250
So I want to like make things as clean as possible because if we create for a living all so while importing,

44
00:03:32,250 --> 00:03:39,330
like while importing and providing the location, so there's a little like confusion happens in the

45
00:03:39,330 --> 00:03:42,090
beginning so that I won't be just avoid that for you.

46
00:03:42,720 --> 00:03:45,350
And now important, the global context.

47
00:03:45,360 --> 00:03:47,880
And now what we'll do is we'll create our loading.

48
00:03:49,600 --> 00:03:52,570
Constant and that will be Konst loading.

49
00:03:56,300 --> 00:04:01,610
From the EU's global context, you see, this has already been declared in the context.

50
00:04:02,000 --> 00:04:07,190
We are just calling it here and now we'll write a final statement.

51
00:04:07,670 --> 00:04:08,180
So.

52
00:04:09,160 --> 00:04:11,680
Basically, if loading.

53
00:04:13,490 --> 00:04:14,300
If loading.

54
00:04:15,750 --> 00:04:16,530
We'll return.

55
00:04:18,130 --> 00:04:19,000
Some Deus Ex.

56
00:04:23,020 --> 00:04:30,510
And parenthesis and here will provide a div and will provide a class name for it, and the costume will

57
00:04:30,510 --> 00:04:32,670
be loading inside the loading.

58
00:04:32,770 --> 00:04:36,400
We can just to give an H1 tag and will write Loading.

59
00:04:37,270 --> 00:04:40,060
You can also give some animations here, like the lower order.

60
00:04:40,060 --> 00:04:42,910
Just like there are so many loads for react.

61
00:04:42,920 --> 00:04:46,750
You can go to material way and you can find a very good amount of lower dose.

62
00:04:46,770 --> 00:04:51,640
You can also use bootstrap, or you can also make a custom Lauder's using KSAZ.

63
00:04:52,090 --> 00:04:53,050
Totally depend on you.

64
00:04:54,040 --> 00:04:54,940
There's no competition.

65
00:04:55,340 --> 00:05:01,300
So if the is set to true, this court will execute and the written statement will return.

66
00:05:01,300 --> 00:05:01,720
Loading.

67
00:05:01,960 --> 00:05:03,910
But if the looting is false?

68
00:05:04,510 --> 00:05:06,220
So what else?

69
00:05:08,180 --> 00:05:08,690
Health.

70
00:05:11,250 --> 00:05:12,240
But it done everything.

71
00:05:14,040 --> 00:05:20,160
Whatever it is here or you can or you can even avoid this, you cannot you won't want to ride themselves.

72
00:05:20,850 --> 00:05:24,120
It is understood that if Lording is true, then only the squad will execute.

73
00:05:24,330 --> 00:05:26,400
Otherwise, or I made a mistake.

74
00:05:26,430 --> 00:05:29,520
Yeah, otherwise this this is going to render anyhow.

75
00:05:30,530 --> 00:05:31,310
So.

76
00:05:32,460 --> 00:05:33,450
That is there.

77
00:05:34,930 --> 00:05:37,480
Next, a semicolon here.

78
00:05:39,610 --> 00:05:41,260
And save it.

79
00:05:43,890 --> 00:05:44,460
And.

80
00:05:45,960 --> 00:05:48,870
Let me show you how this looks in the browser.

81
00:05:50,800 --> 00:05:51,580
We refresh.

82
00:05:52,530 --> 00:05:55,620
OK, now you see the value of the cart is zero.

83
00:05:55,870 --> 00:06:00,230
Now it is no longer five, it was five and that was the starting value.

84
00:06:00,240 --> 00:06:05,290
But now we add a little dynamic thing to it, and I would say it'll OK.

85
00:06:06,750 --> 00:06:07,350
And.

86
00:06:09,450 --> 00:06:17,160
Let us now go and write our producer right now, producer is almost empty and it has no code and it's

87
00:06:17,160 --> 00:06:18,840
no functionality, nothing at all.

88
00:06:19,500 --> 00:06:22,530
But now we'll add code to it.

89
00:06:22,770 --> 00:06:29,340
And this is the most important file you can say to do third audits, because the motive behind this

90
00:06:29,940 --> 00:06:34,740
produce project is to teach you the reducer hook and how to use it to do so.

91
00:06:35,220 --> 00:06:38,340
How do you dispatch how to use state action and all that?

92
00:06:38,890 --> 00:06:41,220
That is the motive behind this project.

93
00:06:41,580 --> 00:06:50,340
So you need to look very closely when I have this call and this is the most important part of this tutorial

94
00:06:51,210 --> 00:06:52,500
by the product, you can see.

95
00:06:53,480 --> 00:06:56,630
So now we already defined the reducer.

96
00:06:57,760 --> 00:07:02,770
You can see in Slide, the producer cost producer is equal to state action.

97
00:07:02,780 --> 00:07:07,940
These are the two barometers, or you can see arguments which are expected by default.

98
00:07:08,690 --> 00:07:10,850
So now inside this.

99
00:07:11,960 --> 00:07:14,750
There is a bunch of things we need to do.

100
00:07:15,730 --> 00:07:18,840
We need to return a lot of things, according to our needs.

101
00:07:19,300 --> 00:07:20,740
Okay, so.

102
00:07:21,970 --> 00:07:28,390
One thing here is that you can use the street statements, which I demonstrated when I was explaining

103
00:07:28,390 --> 00:07:29,190
that REDUCE-IT OK.

104
00:07:29,350 --> 00:07:31,810
So I was explaining with the help of food statements.

105
00:07:32,380 --> 00:07:39,700
But if you want, you can also use the infernal statements like bulldust saying if you have any confusion,

106
00:07:39,700 --> 00:07:43,910
the sweet statements and you default and everything, you can just go ahead with.

107
00:07:44,080 --> 00:07:50,500
If in a segment that is more straightforward and in the beginning, it would be good to just stick to

108
00:07:50,500 --> 00:07:56,290
the if in statements because they are the basic like the basic things which everyone knows, I guess.

109
00:07:56,770 --> 00:08:02,980
OK, so now we'll write a final statement to clear the clock whenever the user will press the button

110
00:08:03,280 --> 00:08:04,420
to clear the card.

111
00:08:04,810 --> 00:08:07,270
So then what should happen?

112
00:08:07,630 --> 00:08:10,480
That code will be in service if statements if.

113
00:08:11,780 --> 00:08:12,100
Hmm.

114
00:08:13,100 --> 00:08:15,410
Action dog type.

115
00:08:17,500 --> 00:08:24,150
Is equally equal to the spring, and that spring will be clear underscored.

116
00:08:24,650 --> 00:08:28,870
But now this is like a customizable thing.

117
00:08:28,870 --> 00:08:34,060
You can write anything like you can just write clear or you can write delete whatever whatsoever that

118
00:08:34,060 --> 00:08:35,560
is not at all a compulsion.

119
00:08:36,520 --> 00:08:43,390
What more do you have to focus on the concept now inside a brief statement that should be a written

120
00:08:43,720 --> 00:08:51,970
like what it is should return if that condition is fulfilled, then start to return will use a spread

121
00:08:51,970 --> 00:08:54,700
operator who will return the state.

122
00:08:56,600 --> 00:08:58,340
And if God forbid you.

123
00:09:01,430 --> 00:09:07,350
Because the user has cleared the card, so the card at eight should be zero now.

124
00:09:08,690 --> 00:09:09,070
OK.

125
00:09:09,740 --> 00:09:12,980
So this was our clear card functionality.

126
00:09:13,670 --> 00:09:20,990
The next will do increase and decrease functionality and also the amount should be calculated on every

127
00:09:20,990 --> 00:09:21,830
increasing decrease.

128
00:09:22,310 --> 00:09:23,450
That thing will be the next.

129
00:09:24,020 --> 00:09:25,700
So we'll do that in the next review.