1
00:00:00,150 --> 00:00:05,390
All right, so let's get this party started and we're going to go to context.

2
00:00:06,090 --> 00:00:06,570
Yes.

3
00:00:06,630 --> 00:00:10,560
And first, I would want to set up our used producer.

4
00:00:10,600 --> 00:00:19,020
OK, so instead of state, we're going to do a little bit of refactoring and use a producer, not what

5
00:00:19,020 --> 00:00:21,930
two things use producer was looking for.

6
00:00:22,290 --> 00:00:29,550
It was looking for user function, which eventually will set up and the producer JS file and also we

7
00:00:29,550 --> 00:00:30,000
need it.

8
00:00:30,000 --> 00:00:30,930
Initial state.

9
00:00:31,200 --> 00:00:31,600
Correct.

10
00:00:31,950 --> 00:00:35,580
So for now, let's just pass and nothing over here.

11
00:00:35,820 --> 00:00:40,710
So this is going to be an empty I want to change these values where I'm not going to call this cart

12
00:00:41,040 --> 00:00:43,200
because there's going to be some more values there.

13
00:00:43,440 --> 00:00:50,970
So I'm just going to go with State and then remember, instead of said state or whatever, we go with

14
00:00:50,970 --> 00:00:52,830
this patch work.

15
00:00:52,830 --> 00:00:59,160
So I'm not once we set up this function, then I would want to pass on those two values, the producer

16
00:00:59,160 --> 00:01:01,530
function as well as initial state.

17
00:01:01,860 --> 00:01:06,680
Let's start with initial state, and I'm just going to set it up as a local value.

18
00:01:07,020 --> 00:01:14,820
So let me set up my variable first and then I'll set it equal to the object.

19
00:01:15,150 --> 00:01:20,850
And then inside of the object, I would want to have a loading, which is going to be false for the

20
00:01:20,850 --> 00:01:21,240
time being.

21
00:01:21,240 --> 00:01:27,390
Of course, eventually we'll change that then and we'll set up our cart and eventually it will be empty

22
00:01:27,390 --> 00:01:27,810
array.

23
00:01:28,080 --> 00:01:32,880
But then since we haven't fetched the data yet, I would want to have some kind of values.

24
00:01:33,100 --> 00:01:38,160
That's why, for the time being will set it equal to the hardcoded once the car item.

25
00:01:38,370 --> 00:01:40,110
And then of course, we also have the total.

26
00:01:41,100 --> 00:01:43,650
Which essentially will always show the total of the.

27
00:01:44,160 --> 00:01:47,050
Again, we'll start with zero and then the amount.

28
00:01:47,310 --> 00:01:50,100
So how many items we have in a car?

29
00:01:50,290 --> 00:01:52,240
Again, we start with zero.

30
00:01:52,560 --> 00:01:54,540
So in here, user Dirceu.

31
00:01:54,780 --> 00:01:58,930
And then we pass in our initial state variable.

32
00:01:59,090 --> 00:01:59,980
OK, beautiful.

33
00:02:00,270 --> 00:02:02,610
Now we only need to set up the user.

34
00:02:02,910 --> 00:02:09,410
So I'll navigate Tulga reducer, Jess, and we'll just start with a boilerplate.

35
00:02:09,780 --> 00:02:13,610
And as far as the boilerplate, we'll set up a function.

36
00:02:13,620 --> 00:02:19,290
Of course I'm going to go with const and then reducer and it's going to be looking for two things.

37
00:02:19,530 --> 00:02:24,650
So as an argument, it is going to get state and the action.

38
00:02:25,030 --> 00:02:31,770
So remember in tutorial we covered that state is the current state before the update and then action

39
00:02:31,770 --> 00:02:37,680
is well, what we're trying to do now, initially we'll throw the error if no actions match.

40
00:02:38,010 --> 00:02:40,560
But for the time being, let's just return the state.

41
00:02:40,770 --> 00:02:46,280
And of course, I would also want to export the user and I just prefer going with defaults.

42
00:02:46,280 --> 00:02:51,830
I'm going to say export default and I will export my producer.

43
00:02:52,140 --> 00:03:00,660
So now, in a context, I can bravely grab my producer that is coming from producer Jess and then set

44
00:03:00,660 --> 00:03:02,750
it up as a first argument.

45
00:03:02,970 --> 00:03:08,640
So I have my hook used producer I and reduce their function and then initial step.

46
00:03:08,970 --> 00:03:12,510
Now the moment we will save, of course there's going to be an hour.

47
00:03:12,510 --> 00:03:12,890
Why?

48
00:03:13,230 --> 00:03:18,550
Well because in the value we are exporting our previous state value.

49
00:03:18,810 --> 00:03:20,790
In this case I have the state.

50
00:03:21,270 --> 00:03:25,320
So of course what I would want is to spread out my state.

51
00:03:25,590 --> 00:03:25,990
Correct.

52
00:03:26,290 --> 00:03:32,220
That would make sense because I would want to pass all these properties since eventually, of course,

53
00:03:32,220 --> 00:03:33,250
I will use them.

54
00:03:33,630 --> 00:03:40,440
So what we can do is just go down the dot and then we're looking for the state value, which of course

55
00:03:40,440 --> 00:03:42,760
at the moment will be our initial state.

56
00:03:42,990 --> 00:03:46,910
Now we can see that there's something on a screen.

57
00:03:47,220 --> 00:03:48,240
And why is that?

58
00:03:48,250 --> 00:03:54,240
Well, because if we navigate to a court container, that is the only thing, or at least should be

59
00:03:54,240 --> 00:03:57,420
the only thing that is grabbing something from you.

60
00:03:58,590 --> 00:04:05,390
Of course, the cart property is already there because I said dot, dot, dot and then state.

61
00:04:05,640 --> 00:04:12,030
So I spread out all my state right now, of course, eventually we will set up some functions as well.

62
00:04:12,420 --> 00:04:13,800
So add them separately.

63
00:04:14,040 --> 00:04:20,940
But for the time being, we're just spreading out all the state powers which are loading, which are

64
00:04:20,940 --> 00:04:21,300
cart.

65
00:04:21,480 --> 00:04:24,930
And of course those are cart items and total animal.

66
00:04:25,170 --> 00:04:30,830
And to complete this video, why don't we go over the components that are looking for those voters,

67
00:04:31,110 --> 00:04:35,970
even though at the moment they are just hard coded and they are zeros and then they are false.

68
00:04:36,210 --> 00:04:41,340
And then eventually, of course, once our functionality starts working, we don't need to hop around

69
00:04:41,340 --> 00:04:45,360
our components and waste our time on hooking everything up.

70
00:04:45,570 --> 00:04:47,570
We might as well do that in this video.

71
00:04:48,000 --> 00:04:48,810
Not first.

72
00:04:48,810 --> 00:04:52,860
I guess I would want to start with a number like so.

73
00:04:53,190 --> 00:04:55,770
And then, of course, I already have used global context.

74
00:04:56,040 --> 00:04:57,820
And what is the number looking for?

75
00:04:58,260 --> 00:05:01,200
Well, it is looking for the amount of items in the car.

76
00:05:01,350 --> 00:05:01,800
Correct.

77
00:05:02,070 --> 00:05:04,650
So we go here with CONSED, then we're destructs.

78
00:05:04,650 --> 00:05:04,950
Right.

79
00:05:05,160 --> 00:05:09,840
And now that it is coming from mieux, use global context and then of course I need to invoke it.

80
00:05:10,080 --> 00:05:11,700
And then where I have the paragraph.

81
00:05:11,700 --> 00:05:13,290
Well which is wrong.

82
00:05:13,650 --> 00:05:15,810
Let's say that we'll be looking for it again.

83
00:05:16,260 --> 00:05:20,600
It is going to be zero because that is the value that I hardcoded.

84
00:05:20,910 --> 00:05:22,560
OK, that's an awesome start.

85
00:05:23,530 --> 00:05:24,320
Let's double check.

86
00:05:24,340 --> 00:05:29,590
We also have the app and then we're checking for the loading, which of course doesn't make sense right

87
00:05:29,590 --> 00:05:36,010
now because we're not loading anything as far as data, but we might as well call on it.

88
00:05:36,010 --> 00:05:39,640
And then when we do there, it is going to be already working.

89
00:05:39,970 --> 00:05:45,250
So we go with CONSED and then again, we're looking for our variable or loading a variable, of course,

90
00:05:45,490 --> 00:05:48,060
and that is equal to my year's global context.

91
00:05:48,070 --> 00:05:51,760
I invoke it and then of course I can on comment.

92
00:05:52,030 --> 00:05:54,540
There is now I have my loading as well.

93
00:05:54,760 --> 00:05:58,080
And of course the reason why we don't see that is because loading is false.

94
00:05:58,450 --> 00:06:05,350
If I go back and if I said this is true, you can probably already guess that course will be able to

95
00:06:05,350 --> 00:06:13,720
see the loading ones go back to false and we should see the items then still back within the cart container

96
00:06:13,990 --> 00:06:15,870
where essentially we have the cart.

97
00:06:16,330 --> 00:06:21,440
I also would want to check for a total because I'm here or I'm displaying that.

98
00:06:22,180 --> 00:06:28,780
So not only I would want to get the cart, I would also want to get a total and then we'll scroll down,

99
00:06:28,780 --> 00:06:31,630
scroll down, scroll down on that where we have total.

100
00:06:32,140 --> 00:06:34,840
I'll place my total value again.

101
00:06:35,320 --> 00:06:38,980
Shouldn't change much because we have the zero there.

102
00:06:39,370 --> 00:06:47,080
So we add the zero there is now we have our total and that should conclude our first video where we

103
00:06:47,080 --> 00:06:51,280
just set up the initial functionality of use producer.