Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,270 --> 00:00:05,550
So let's now make sure that data can be added
2
00:00:05,550 --> 00:00:09,030
or items can be added to the cart.
3
00:00:09,030 --> 00:00:12,060
And for that, I wanna use context.
4
00:00:12,060 --> 00:00:14,940
I wanna manage the overall cart data
5
00:00:14,940 --> 00:00:18,780
through context because we will need it in different places
6
00:00:18,780 --> 00:00:20,630
off the application.
7
00:00:20,630 --> 00:00:21,910
On the meal items,
8
00:00:21,910 --> 00:00:25,150
we need to update the cart and the cart component,
9
00:00:25,150 --> 00:00:27,260
we need to output it, of course.
10
00:00:27,260 --> 00:00:29,580
And we also will need to manage it
11
00:00:29,580 --> 00:00:31,931
in the future because inside of that cart,
12
00:00:31,931 --> 00:00:36,483
later the cart items can also be added or removed again.
13
00:00:37,490 --> 00:00:42,460
So therefore let's start by setting up that cart context.
14
00:00:42,460 --> 00:00:46,490
And for this, I'll add a store folder side by side
15
00:00:46,490 --> 00:00:51,010
to the components and the assets folder.
16
00:00:51,010 --> 00:00:52,600
The name is up to you
17
00:00:52,600 --> 00:00:55,780
but since we are going to store our application
18
00:00:55,780 --> 00:00:59,980
wide state here, store is kind of a convention
19
00:00:59,980 --> 00:01:01,530
in React world
20
00:01:01,530 --> 00:01:05,713
as a name for this application wide state management.
21
00:01:06,980 --> 00:01:11,420
And in there, I'll add a cart-context JS file.
22
00:01:11,420 --> 00:01:13,813
The naming of this file is up to you though.
23
00:01:14,850 --> 00:01:18,630
In here, I will import React from react
24
00:01:18,630 --> 00:01:23,373
because we can then call React, create context.
25
00:01:24,460 --> 00:01:26,580
And I will initialize this context
26
00:01:26,580 --> 00:01:31,010
with some default data, which will not actually be used
27
00:01:31,010 --> 00:01:34,663
but which will give us better auto-completion later.
28
00:01:35,610 --> 00:01:38,400
And here, we'll have an items array
29
00:01:38,400 --> 00:01:42,000
since we are going to manage a couple of cart items.
30
00:01:42,000 --> 00:01:45,460
We'll have a total amount, which is zero,
31
00:01:45,460 --> 00:01:46,563
let's say initially,
32
00:01:47,570 --> 00:01:49,740
and then we'll have two functions
33
00:01:49,740 --> 00:01:52,950
which allow us to update that context.
34
00:01:52,950 --> 00:01:53,783
And that's the add item function
35
00:01:53,783 --> 00:01:58,705
which let's say receives the item that should be added.
36
00:02:00,620 --> 00:02:03,340
And it's the remove item function,
37
00:02:03,340 --> 00:02:07,200
which receives let's say an ID to identify the item
38
00:02:07,200 --> 00:02:11,303
which should be removed from the cart like this.
39
00:02:12,480 --> 00:02:16,420
Now I'll store this in a cart context constant
40
00:02:16,420 --> 00:02:20,600
and I will export this cart context here.
41
00:02:20,600 --> 00:02:22,050
So that's step number one.
42
00:02:22,050 --> 00:02:25,240
Now we've got this context generally created
43
00:02:26,240 --> 00:02:30,090
but now we will also need to manage that context
44
00:02:30,090 --> 00:02:32,890
in some component with use state
45
00:02:32,890 --> 00:02:36,520
or use reducer as you saw it earlier in this course
46
00:02:36,520 --> 00:02:38,730
so that this context can also change
47
00:02:38,730 --> 00:02:43,093
over time and can update parts of the application over time.
48
00:02:44,810 --> 00:02:47,170
And we could do this in the same file here
49
00:02:47,170 --> 00:02:49,320
but I will trade a new file for this
50
00:02:49,320 --> 00:02:52,373
and name it cart provider JS.
51
00:02:53,890 --> 00:02:58,150
Because in here I wanna add our cart provider component
52
00:02:59,440 --> 00:03:02,350
which receives props and of course
53
00:03:02,350 --> 00:03:04,692
which I export and the goal
54
00:03:04,692 --> 00:03:09,490
of this component is simply to manage the current context
55
00:03:09,490 --> 00:03:12,450
to data and provide that context
56
00:03:12,450 --> 00:03:15,930
to all components that want access to it.
57
00:03:15,930 --> 00:03:20,930
And for that here, I will import cart context
58
00:03:21,060 --> 00:03:26,060
from ./cart-context and then return JSX code
59
00:03:30,275 --> 00:03:33,960
because this is a component where I simply
60
00:03:33,960 --> 00:03:36,883
access cartcontext.provider.
61
00:03:37,940 --> 00:03:40,900
And now we can simply pass props.children
62
00:03:40,900 --> 00:03:43,490
between cart context provider.
63
00:03:43,490 --> 00:03:46,260
And this allows us to wrap any components
64
00:03:46,260 --> 00:03:47,270
that should get access
65
00:03:47,270 --> 00:03:51,610
to this context with this cart provider component.
66
00:03:51,610 --> 00:03:53,370
And we can also add all the logic
67
00:03:53,370 --> 00:03:56,680
for managing the context data to this component,
68
00:03:56,680 --> 00:04:00,770
so that all about that is contained in one component
69
00:04:00,770 --> 00:04:04,083
and no other component needs to deal with that.
70
00:04:05,060 --> 00:04:09,380
Now for that, I will add a cart context
71
00:04:09,380 --> 00:04:12,163
helper constant in this component function.
72
00:04:13,234 --> 00:04:18,233
And that is simply an object with items total amount.
73
00:04:18,440 --> 00:04:21,570
So all the fields we set up for the context itself,
74
00:04:21,570 --> 00:04:24,300
this will be the concrete context value though
75
00:04:24,300 --> 00:04:27,200
which will also be updated over time.
76
00:04:27,200 --> 00:04:29,350
And this also holds pointers
77
00:04:29,350 --> 00:04:34,020
for the add item function and for the remove item function.
78
00:04:34,020 --> 00:04:36,830
And we can already add these functions here
79
00:04:36,830 --> 00:04:41,000
and add a add item to cart handler here
80
00:04:41,000 --> 00:04:43,910
where we get the item and then do something with it
81
00:04:43,910 --> 00:04:48,910
in the future and the remove item from card handler function
82
00:04:50,670 --> 00:04:55,393
where we get the ID and do something with it in the future.
83
00:04:57,560 --> 00:05:00,720
And now it's simply point us at these functions
84
00:05:00,720 --> 00:05:02,690
which are stored as values
85
00:05:02,690 --> 00:05:07,690
for add item and remove item in this card context object.
86
00:05:08,100 --> 00:05:10,970
And it's now discard context object here,
87
00:05:10,970 --> 00:05:15,570
which is set as a value or as a value for the value prop
88
00:05:15,570 --> 00:05:20,143
on the cart context provider component here.
89
00:05:21,040 --> 00:05:23,710
And again, this will be dynamic soon.
90
00:05:23,710 --> 00:05:26,193
It's not right now, but it will be dynamic soon.
91
00:05:27,650 --> 00:05:29,360
And with that added,
92
00:05:29,360 --> 00:05:32,364
we can now use this cart provider component
93
00:05:32,364 --> 00:05:36,383
to wrap all components that need access to the cart.
94
00:05:37,410 --> 00:05:39,280
And in our application,
95
00:05:39,280 --> 00:05:43,020
that's actually all the components which are rendered
96
00:05:43,020 --> 00:05:44,910
in the app component.
97
00:05:44,910 --> 00:05:48,930
The cart of course needs access to render the cart items
98
00:05:48,930 --> 00:05:51,500
and also to edit them later
99
00:05:51,500 --> 00:05:55,300
the header needs access to update this batch
100
00:05:55,300 --> 00:05:58,560
in the header button, this batch
101
00:05:58,560 --> 00:06:01,000
where we output the number of cart items,
102
00:06:01,000 --> 00:06:04,000
so the header also needs access to the cart
103
00:06:04,000 --> 00:06:06,020
and the meals need access to the cart
104
00:06:06,020 --> 00:06:08,793
because there we wanna add items to the cart.
105
00:06:10,200 --> 00:06:13,240
So therefore we can replace this fragment here
106
00:06:13,240 --> 00:06:16,063
with cart provider, as a wrapping component.
107
00:06:17,250 --> 00:06:20,650
And of course we should now also import cart provider
108
00:06:20,650 --> 00:06:25,090
from the store folder and then the cart provider file
109
00:06:25,090 --> 00:06:27,193
and we can remove the fragment import.
110
00:06:28,760 --> 00:06:31,900
Now, we could manage that entire context also
111
00:06:31,900 --> 00:06:33,330
in the app JS file therefore,
112
00:06:33,330 --> 00:06:36,910
since we needed an all the components there.
113
00:06:36,910 --> 00:06:40,220
But by using a separate cart provider component,
114
00:06:40,220 --> 00:06:42,350
we keep the app component lean
115
00:06:42,350 --> 00:06:44,820
and don't have to put all the cart management
116
00:06:44,820 --> 00:06:46,300
logic in there.
117
00:06:46,300 --> 00:06:48,040
Simply imagine that you are working
118
00:06:48,040 --> 00:06:52,320
on a bigger application with different app wide states.
119
00:06:52,320 --> 00:06:55,190
Let's say you have a product state and a cart state
120
00:06:55,190 --> 00:06:58,620
and a user state and anything like that.
121
00:06:58,620 --> 00:06:59,820
If you would manage all
122
00:06:59,820 --> 00:07:03,690
of that in the app component, it would become super large.
123
00:07:03,690 --> 00:07:08,110
So having dedicated store components which manage that,
124
00:07:08,110 --> 00:07:09,493
makes a lot of sense.
125
00:07:11,180 --> 00:07:15,470
Now with that, we provide that context
126
00:07:15,470 --> 00:07:17,560
to all of these components.
127
00:07:17,560 --> 00:07:19,900
Now we can leverage it.
128
00:07:19,900 --> 00:07:23,070
For example, in the header cart button,
129
00:07:23,070 --> 00:07:26,760
there we need it to update the appropriate amount
130
00:07:26,760 --> 00:07:29,490
of cart items in that batch.
131
00:07:29,490 --> 00:07:31,440
And hence, what we can do,
132
00:07:31,440 --> 00:07:33,633
is we can use the context in there.
133
00:07:34,510 --> 00:07:38,380
So therefore, definitely try using that context on your own.
134
00:07:38,380 --> 00:07:41,093
In the next lecture, we're going to do it together.
10761
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.