Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,590 --> 00:00:09,480
OK, so now that we have our heart, as well as our ability to display cart items, we want to tackle
2
00:00:09,480 --> 00:00:16,320
something like displaying the number of items we have in our cart inside of our cart icon, because
3
00:00:16,320 --> 00:00:18,630
right now it just displays zero.
4
00:00:19,520 --> 00:00:26,360
Well, thinking about what we know already about pulling Redock State into local components, maybe
5
00:00:26,360 --> 00:00:33,530
we do something where we would write a map state to props, where we would pull the state in and then
6
00:00:33,530 --> 00:00:34,340
get the value.
7
00:00:35,060 --> 00:00:36,170
Now, what would this look like?
8
00:00:36,890 --> 00:00:40,070
Well, we would write our map states a props value.
9
00:00:41,610 --> 00:00:44,370
And here we would get our state where we were.
10
00:00:44,400 --> 00:00:48,930
Destruction of cars and from car, we pull off the cart items.
11
00:00:51,290 --> 00:00:59,510
And maybe we'd pass in a value of item count, which is equal to accumulating the quantity on each of
12
00:00:59,510 --> 00:01:00,230
our card items.
13
00:01:01,010 --> 00:01:07,070
Now, if we were to look at our code of what our state looks like and let's look at the items themselves.
14
00:01:08,170 --> 00:01:14,380
We know that the quantity value is a number and we want to add them all together to get the total number
15
00:01:14,410 --> 00:01:15,520
of items we have.
16
00:01:16,590 --> 00:01:21,330
Well, this is a good time to use our reduce function if we remember where we want to bring it down
17
00:01:21,330 --> 00:01:22,660
to one final value.
18
00:01:23,250 --> 00:01:31,850
So what we could call is something like car items reduce where we would pass in zero as the initial
19
00:01:31,860 --> 00:01:38,220
cumulative value, because if you remember, we want to add all of the values in our quantity.
20
00:01:39,350 --> 00:01:43,160
So we would get our accumulated quantity.
21
00:01:44,740 --> 00:01:51,340
As the first argument in our first function, and then we would get the actual car item as the second
22
00:01:51,940 --> 00:01:59,440
argument and what we would return is a cumulative quantity plus cart item quantity.
23
00:02:00,490 --> 00:02:09,550
And what this will do for us is it will accumulate all the number values of the quantities on all the
24
00:02:09,550 --> 00:02:10,250
cart items.
25
00:02:11,020 --> 00:02:14,890
Now, if you remember from our producer lesson.
26
00:02:16,000 --> 00:02:22,240
How we added up those values together, this is doing the exact same thing, but using our quantity
27
00:02:22,240 --> 00:02:22,680
value.
28
00:02:23,260 --> 00:02:30,700
So if we can imagine we had three card items and the quantities were one to three respectively, while
29
00:02:30,700 --> 00:02:37,840
the first time our producer code gets called, it will add zero and one giving us one, then one plus
30
00:02:37,840 --> 00:02:42,190
two, giving us three, then three plus three, giving us six.
31
00:02:42,190 --> 00:02:44,920
And we would end up with an item count of six.
32
00:02:46,600 --> 00:02:51,220
So what this will do then is pass that six in as our item count parameter.
33
00:02:52,490 --> 00:02:56,540
Which we would then pass in as a prop to our component.
34
00:02:58,110 --> 00:02:59,970
So we then structure off.
35
00:03:01,260 --> 00:03:08,550
Of our props and pass it in place of zero, and now if we save and we look at our app.
36
00:03:09,340 --> 00:03:10,060
We'll see.
37
00:03:11,030 --> 00:03:17,450
That our count goes up for every item that we add and we'll see that it matches, we have two, two
38
00:03:17,450 --> 00:03:21,170
and one, which gives us five total quantity of items.
39
00:03:22,140 --> 00:03:30,780
Now, what we've written just now is called a selecter, because what we're doing here is we are writing
40
00:03:30,780 --> 00:03:33,210
some kind of code that gets a state.
41
00:03:34,180 --> 00:03:43,000
As in the whole state object, and then pulls off just a small portion or a slice of that state, because
42
00:03:43,000 --> 00:03:50,050
what we're getting is we're getting the cart, then the cart items and then reducing over those cart
43
00:03:50,050 --> 00:03:51,850
items to get a new value.
44
00:03:52,060 --> 00:03:56,080
Were computing a new value based off of the state.
45
00:03:57,250 --> 00:04:04,780
Now, the caveat to this, even though this is how Redock suggests the code to be written, is that
46
00:04:04,780 --> 00:04:09,100
will notice that whenever any reduce or updates.
47
00:04:10,330 --> 00:04:17,530
When we remember looking at our producer code, we're always returning a new object now whenever we
48
00:04:17,530 --> 00:04:25,600
return a new object and redux recompose and rebuilds the entire state object map states are props is
49
00:04:25,600 --> 00:04:33,340
actually getting called every single time, which is always passing in new props to our components.
50
00:04:34,210 --> 00:04:39,820
And why this is important is because this is always re rendering our components.
51
00:04:41,330 --> 00:04:48,800
Now, I can actually show you how this will happen, let's say, for example, we so log whenever map
52
00:04:48,800 --> 00:04:53,480
states of Prof's gets called and I'll say I am being called.
53
00:04:54,620 --> 00:05:00,710
So even though our car icon component only cares about car items.
54
00:05:02,010 --> 00:05:03,330
What ends up happening?
55
00:05:04,390 --> 00:05:09,790
Is whenever we change the state, so let's say, for example, we're not modifying our Kaat state,
56
00:05:10,060 --> 00:05:14,390
let alone our current state, we're modifying our current user on our user state.
57
00:05:15,100 --> 00:05:20,980
If I sign in right now, you'll see that I'm being called gets triggered because the map states are
58
00:05:20,990 --> 00:05:25,570
props inside of our car icon component is still being called.
59
00:05:26,610 --> 00:05:33,030
And then if I sign out right again, it's just use our current user getting changed and but again,
60
00:05:33,480 --> 00:05:39,510
our console log is still firing, which means that our map states are props, keeps firing.
61
00:05:40,290 --> 00:05:49,320
And this is important because our reduce is always returning a new value, because Reduced doesn't know
62
00:05:49,320 --> 00:05:52,930
that the car items coming in might be the exact same.
63
00:05:53,730 --> 00:06:01,470
So let's say we had two items in our cart and it reduces down to the value of two if these car items
64
00:06:01,470 --> 00:06:02,310
come in again.
65
00:06:02,310 --> 00:06:06,260
But it's the exact same two items reduced is still getting cold.
66
00:06:06,720 --> 00:06:11,000
So we're still always getting a new computed value.
67
00:06:11,010 --> 00:06:17,190
And you might be thinking, why would that happen if the objects are the same?
68
00:06:18,490 --> 00:06:26,920
Well, they're actually not because our state is always a new object, which means that everything,
69
00:06:26,920 --> 00:06:29,710
even if the value is identical.
70
00:06:30,750 --> 00:06:38,490
The object of our total state is a brand new object, which means everything inside of it, all of the
71
00:06:38,490 --> 00:06:40,860
data inside of it is brand new.
72
00:06:41,730 --> 00:06:49,860
And that's why every time Reduce gets called, whatever those items will be will also be brand new,
73
00:06:49,860 --> 00:06:54,000
even if the value is the same two car items.
74
00:06:54,120 --> 00:07:01,500
Now, this is not good for performance because we don't want to re render our component every time the
75
00:07:01,500 --> 00:07:09,840
state changes, especially if those state changes don't actually modify the parts of the state that
76
00:07:09,840 --> 00:07:11,470
are component cares about.
77
00:07:12,390 --> 00:07:22,080
So what we would want to do is to be able to store or cash the value of what our selecter is using to
78
00:07:22,080 --> 00:07:23,340
compute its value.
79
00:07:24,030 --> 00:07:28,520
So if the car item values don't actually change, right.
80
00:07:28,530 --> 00:07:34,920
And if the output of the selector doesn't change, we don't want to re render our component.
81
00:07:35,960 --> 00:07:42,890
Well, what this is actually called is memorisation, which is the cashing of the selectors value.
82
00:07:44,060 --> 00:07:51,860
And we can actually achieve this kind of memorisation using a library called Reselect and Reselect allows
83
00:07:51,860 --> 00:07:59,810
us to write the selectors in such a way so that it knows that if the properties that it's pulling from
84
00:07:59,810 --> 00:08:06,560
the state and using are the same in the sense that their value hasn't changed and the output of the
85
00:08:06,560 --> 00:08:13,700
selector is not different, then it won't actually pass them into our component.
86
00:08:13,710 --> 00:08:19,160
It'll just pass the old value and our react component will know not to render.
87
00:08:20,540 --> 00:08:26,750
There's also other benefits in the sense that it allows us to actually separate our selectors and make
88
00:08:26,750 --> 00:08:27,530
them reusable.
89
00:08:28,220 --> 00:08:31,490
Now, let's actually take a look at how to do this.
9347
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.