1
00:00:02,180 --> 00:00:08,810
In our application we can update the price that's fine, we can update the ingredients but the order now burton never

2
00:00:08,810 --> 00:00:10,160
gets unlocked,

3
00:00:11,000 --> 00:00:18,420
The reason for this is that the property determining whether this is unlocked or not is the purchasable

4
00:00:18,440 --> 00:00:21,700
property we're setting on the build controls,

5
00:00:21,980 --> 00:00:25,120
we can verify that by simply diving into build controls,

6
00:00:25,150 --> 00:00:27,730
there we see the button is disabled

7
00:00:27,830 --> 00:00:31,310
if props.purchasable is false.

8
00:00:31,580 --> 00:00:37,750
So what we need to do is update the purchasable prop whenever our ingredients change.

9
00:00:38,690 --> 00:00:45,990
In the burger builder, we thus far managed purchasable in the state,

10
00:00:46,040 --> 00:00:47,710
now we can remove it from there,

11
00:00:47,720 --> 00:00:54,200
I don't want to manage it here anymore and therefore I can also remove the update purchase state method.

12
00:00:54,740 --> 00:00:55,520
Though,

13
00:00:55,520 --> 00:01:00,890
for now I want to leave it here because we have that nice logic for determining when to update this

14
00:01:00,890 --> 00:01:03,910
here. We now have two options,

15
00:01:03,950 --> 00:01:11,760
we could leave the method and simply adjust it a tiny bit to return the result of our boolean check

16
00:01:11,760 --> 00:01:12,550
here,

17
00:01:13,250 --> 00:01:21,850
so of sum greater 0 and we still calculate the sum here with ingredients we pass to update purchase

18
00:01:21,860 --> 00:01:23,540
state.

19
00:01:23,540 --> 00:01:26,410
We could then go down to our render method

20
00:01:27,170 --> 00:01:34,640
and there where we passed purchasable, we could simply not reach out to our state purchasable property

21
00:01:34,640 --> 00:01:36,370
because we don't have that anymore

22
00:01:36,680 --> 00:01:46,200
but to our update purchase state method which now simply returns true or false and return the result

23
00:01:46,200 --> 00:01:47,860
of this function call,

24
00:01:47,970 --> 00:01:51,340
so we could call this update purchase state here,

25
00:01:51,360 --> 00:01:56,570
here we need to execute this because we want to execute this whenever this gets re-rendered so that

26
00:01:56,580 --> 00:02:02,510
we fetch the updated result and there, we now need to pass our ingredients as an argument,

27
00:02:02,640 --> 00:02:05,840
we can simply pass this.props.ings.

28
00:02:06,180 --> 00:02:13,590
Alternatively of course, we could also get our ingredients through this property here directly update

29
00:02:13,590 --> 00:02:18,330
purchase state by not expecting an argument but accessing this.props.ings

30
00:02:18,450 --> 00:02:24,070
here, it's in the same class after all. If we do this and save everything,

31
00:02:24,090 --> 00:02:32,550
now you see the button gets enabled and disabled again because now, we constantly get the information whether

32
00:02:32,580 --> 00:02:34,720
purchasable is true or false

33
00:02:34,770 --> 00:02:38,160
through this method. This is one way of doing this and

34
00:02:38,170 --> 00:02:42,870
it's absolutely fine because you could consider this local UI state,

35
00:02:42,900 --> 00:02:48,390
you could of course also say no this is something I want to manage in my redux state

36
00:02:48,390 --> 00:02:55,020
and you always have edge cases like this and often times there is no clear right or wrong, use whichever feels

37
00:02:55,110 --> 00:02:58,890
easier to you, which makes your application better to you.

38
00:02:59,130 --> 00:03:07,470
So you could of course also manage the purchasable state in your, well through your reducer by adding something

39
00:03:07,470 --> 00:03:14,730
like purchasable and then also update this whenever the ingredients change.

40
00:03:14,740 --> 00:03:20,000
Now I'll stick to the approach I just showed by having the update purchase state method in the burger

41
00:03:20,000 --> 00:03:23,400
builder and calling it from our jsx render method

42
00:03:23,650 --> 00:03:27,820
but I wanted to bring to our attention that you can use both.

43
00:03:27,820 --> 00:03:35,170
With that though, we do a lot about our ingredients and you see our state shrank a lot,

44
00:03:35,170 --> 00:03:38,320
we now only have purchasing, loading and error in there

45
00:03:38,320 --> 00:03:45,730
and as mentioned at the beginning of this module, these are all states or state properties relevant

46
00:03:45,730 --> 00:03:52,700
for our UI state only, should we display a modal, should we display an error message,

47
00:03:52,720 --> 00:03:56,890
nothing we necessarily need to manage through our global redux store,

48
00:03:56,890 --> 00:03:59,080
so that is why I will leave them here.

49
00:03:59,290 --> 00:04:02,440
They can co-exist together with redux,

50
00:04:02,440 --> 00:04:05,950
you can put everything into redux but you don't have to.