1
00:00:00,690 --> 00:00:07,530
OK, now let's go ahead and implement the youth radio sort of hook to our function, to our project

2
00:00:08,130 --> 00:00:09,090
or our application.

3
00:00:09,630 --> 00:00:15,630
So right now, we were using the youth they took, but now we upgraded to use it to do Hook.

4
00:00:16,170 --> 00:00:21,930
So first of all, we need to imported from York, so we imported by use.

5
00:00:23,940 --> 00:00:24,540
It was.

6
00:00:26,290 --> 00:00:27,980
Producers common.

7
00:00:29,710 --> 00:00:32,140
And next.

8
00:00:33,260 --> 00:00:34,610
We'll rename this.

9
00:00:35,710 --> 00:00:37,780
Tom used to use the producer.

10
00:00:39,420 --> 00:00:40,110
Producer.

11
00:00:41,170 --> 00:00:46,000
And inside this, there will be REDUCE-IT and an initial state.

12
00:00:47,090 --> 00:00:58,460
Not the card items, actually, but that will be reduced reduce an initial state.

13
00:01:00,340 --> 00:01:03,760
And here we'll have, of course, the state and the dispatch.

14
00:01:05,710 --> 00:01:06,160
The.

15
00:01:07,410 --> 00:01:11,280
Responsible for handling the state and dispatch.

16
00:01:13,830 --> 00:01:20,140
For deciding what action needs to be taken on that state wearable.

17
00:01:20,970 --> 00:01:27,870
OK, so we have initialized data used to use their dataset hook at the top level of the component.

18
00:01:29,830 --> 00:01:30,910
Sounds fair enough.

19
00:01:30,940 --> 00:01:39,250
Next, let us define this initial step that we do outside of this, the outside of this function, OK,

20
00:01:40,360 --> 00:01:45,580
we'll do it here and that will be concert and initial state.

21
00:01:46,870 --> 00:01:55,030
Initial state and this will be an object, and most of all, we are giving to.

22
00:01:55,540 --> 00:01:59,710
We are going to give the functionality of foot like the loading loading.

23
00:01:59,860 --> 00:02:05,230
We are going to set the loading, for example, when we are getting the data from the API.

24
00:02:05,590 --> 00:02:11,080
So the time which till the data comes to us, there should be some loaders.

25
00:02:11,620 --> 00:02:15,580
There should be a loading state that should be set to true at that time.

26
00:02:15,580 --> 00:02:22,210
And as soon as we receive the data, that loading state should be set to false and we can see their

27
00:02:22,210 --> 00:02:23,230
data on a screen.

28
00:02:23,590 --> 00:02:25,950
Before that, we need to set a state of loading.

29
00:02:26,660 --> 00:02:29,830
So initially, this will be false.

30
00:02:32,870 --> 00:02:35,690
And next, we will have the court.

31
00:02:37,000 --> 00:02:44,380
And this would contain the card items, not the spelling mistake.

32
00:02:45,680 --> 00:02:52,550
Next, we'll have the total now, the total is the number that will be shown near the bag icon in the

33
00:02:52,550 --> 00:02:53,150
nav bar.

34
00:02:54,500 --> 00:03:02,500
I am making so mistakes that will be zero for the beginning and then will have the amount which will

35
00:03:02,500 --> 00:03:05,200
be shown in the total in the sum total.

36
00:03:05,740 --> 00:03:07,780
So that will also be zero in the beginning.

37
00:03:07,780 --> 00:03:11,980
So I've given semicolon here that will just be a comma.

38
00:03:13,390 --> 00:03:13,820
OK.

39
00:03:14,290 --> 00:03:15,640
We have said the initials tick.

40
00:03:16,390 --> 00:03:22,120
It can also the through for the very first time, but it totally depends on us.

41
00:03:22,270 --> 00:03:25,420
OK, now in the app provider function.

42
00:03:26,580 --> 00:03:33,810
What we'll do is we we are returning the app context and providing a right, and we have given the value

43
00:03:33,810 --> 00:03:34,680
of carpet.

44
00:03:35,130 --> 00:03:38,370
But now what we'll do is we'll provide the state here.

45
00:03:38,560 --> 00:03:44,340
Instead of this card, we'll provide the card, we'll provide the state here.

46
00:03:44,860 --> 00:03:47,730
We'll do it by using the spread.

47
00:03:47,730 --> 00:03:55,500
Operator supports third operator will give three dots and we'll write state and inside this, that will

48
00:03:55,500 --> 00:03:56,190
be a children.

49
00:03:56,790 --> 00:04:00,150
So which we're is going to display all of the data.

50
00:04:00,270 --> 00:04:04,730
So let me just save it for now and let me just start of the server.

51
00:04:05,520 --> 00:04:12,480
So I'll go to my project folder and my bag and then I'll let npm start.

52
00:04:13,450 --> 00:04:16,890
So this will start the server and this will take a few seconds.

53
00:04:18,200 --> 00:04:23,090
OK, so now the server is up and running, and we have received some errors.

54
00:04:23,720 --> 00:04:27,800
So I think I've made a typo on the line and let it.

55
00:04:28,870 --> 00:04:31,420
Yes, there's a typo.

56
00:04:33,780 --> 00:04:34,640
And when I savoured.

57
00:04:36,510 --> 00:04:37,010
OK.

58
00:04:37,080 --> 00:04:43,470
That reduces not defined, but what we are going to do is we are going to create the reducer in a separate

59
00:04:43,470 --> 00:04:50,670
file that will be reduced retards and then we'll be importing it and then it ever will go.

60
00:04:51,380 --> 00:04:56,600
So, OK, now we are done with the basic structure of the use reducer.

61
00:04:56,610 --> 00:04:59,910
So now let's go ahead and create the reducer file.

62
00:05:00,780 --> 00:05:08,190
And for that, we need to go to the source folder and we have to create the new standards to do certain

63
00:05:08,190 --> 00:05:09,000
audits.

64
00:05:12,410 --> 00:05:17,360
So in the beginning, we'll just create a basic rule is the function, so that will be caused.

65
00:05:19,350 --> 00:05:26,690
You son, is equal to a fair total function, and inside this, there would be two arguments that would

66
00:05:26,690 --> 00:05:27,350
be state.

67
00:05:31,790 --> 00:05:32,540
And action.

68
00:05:34,250 --> 00:05:34,700
And.

69
00:05:36,230 --> 00:05:42,350
This would be a function which will be returning state as of now.

70
00:05:43,160 --> 00:05:45,050
We're not providing any functionality now.

71
00:05:45,530 --> 00:05:50,240
We're just testing it and we'll explore this function export default.

72
00:05:52,630 --> 00:05:53,200
But it is a.

73
00:05:55,290 --> 00:05:57,870
As simple as that.

74
00:05:58,740 --> 00:06:07,720
Now we'll go to the context, and we'll import the producer from producer import producer from North

75
00:06:07,740 --> 00:06:08,400
Form.

76
00:06:09,920 --> 00:06:10,220
The new.

77
00:06:12,810 --> 00:06:15,000
Now it will vanish.

78
00:06:16,730 --> 00:06:17,000
Yeah.

79
00:06:17,810 --> 00:06:20,540
Now let us go to the browser and have a look.

80
00:06:21,790 --> 00:06:23,290
Which Iran is waiting for us?

81
00:06:26,230 --> 00:06:27,680
Oh, no, Iran is working for us.

82
00:06:27,700 --> 00:06:32,080
OK, so things look a little bit cleaner now.

83
00:06:32,560 --> 00:06:34,990
And of course, there is no functionality as of now.

84
00:06:35,380 --> 00:06:39,460
And you can see still this errors are coming to us.

85
00:06:39,640 --> 00:06:42,520
So let us try to fix them.

86
00:06:43,620 --> 00:06:48,850
Now inside the card container, we've already imported the context on.

87
00:06:49,470 --> 00:06:53,580
So what we'll do is we try to we try to.

88
00:06:55,460 --> 00:06:58,820
Jane, this this is a hardcoded value and static.

89
00:06:59,000 --> 00:07:00,860
Let us try to make it dynamic.

90
00:07:01,790 --> 00:07:09,890
So first of all, what we'll do is we'll import something from here that would be amount, I guess.

91
00:07:11,710 --> 00:07:13,750
And will ride the amount here.

92
00:07:15,110 --> 00:07:17,000
Well, I hope that works.

93
00:07:18,970 --> 00:07:24,340
And let does go to the browser and see, yeah.

94
00:07:24,580 --> 00:07:26,770
The amount is the euro right now.

95
00:07:28,530 --> 00:07:30,780
And I hope that is.

96
00:07:32,940 --> 00:07:33,600
That is it.

97
00:07:34,840 --> 00:07:39,730
Now, why do you want to do is we want to change the value of this bag?

98
00:07:39,910 --> 00:07:43,930
We want to make good dynamic right now and this is static and hardcoded.

99
00:07:44,440 --> 00:07:48,680
Let us go ahead and just change that particular value.

100
00:07:49,690 --> 00:07:53,890
Before that, we need to import that inside this props.

101
00:07:55,600 --> 00:08:01,980
And that could be done from the context, of course, that of the total.

102
00:08:02,600 --> 00:08:04,450
Let me just grab the total.

103
00:08:06,140 --> 00:08:09,050
And where was it actually showing?

104
00:08:10,670 --> 00:08:12,540
Oh, that was in the nav bar.

105
00:08:12,560 --> 00:08:12,990
OK, OK.

106
00:08:13,220 --> 00:08:14,810
So for that, we need to go to the never.

107
00:08:16,200 --> 00:08:22,110
And we need to import our context, and it's a long process.