1
00:00:02,140 --> 00:00:08,470
Now with the actions reducers set up, at least the basics about it and our store connected to the

2
00:00:08,470 --> 00:00:09,470
application,

3
00:00:09,640 --> 00:00:12,630
let's fill our reducer with some life.

4
00:00:12,940 --> 00:00:17,170
And in the end we have to have the two actions we set up here,

5
00:00:17,320 --> 00:00:20,200
adding ingredients and removing ingredients.

6
00:00:20,290 --> 00:00:26,010
Therefore as always, I'll add my switch statement introducer and switch the action type,

7
00:00:26,080 --> 00:00:29,930
keep in mind you always have to have a type property on your action

8
00:00:29,930 --> 00:00:32,080
this is why we can safely access it here.

9
00:00:32,530 --> 00:00:37,120
Now we get two types we want to handle in our case statements,

10
00:00:37,120 --> 00:00:44,650
the first one is the actionType.ADD_INGREDIENT where we want to return some object which holds the new

11
00:00:44,650 --> 00:00:45,580
state,

12
00:00:45,940 --> 00:00:51,500
the second one is the case where we have our action types and there, remove ingredient

13
00:00:51,730 --> 00:01:02,670
and here too, we want to return some store or some state object. And finally, we always want to return

14
00:01:02,880 --> 00:01:09,850
just state, in case we make it into none of these cases though here in my ID due to linting complains

15
00:01:09,850 --> 00:01:13,630
that we should have a default state, a default handler I mean,

16
00:01:13,630 --> 00:01:18,490
so let's simply add default to our switch statement and return to state here.

17
00:01:18,550 --> 00:01:21,630
This will be reached if none of the cases applies,

18
00:01:21,640 --> 00:01:27,250
again, we don't need break statements because we return in each case anyways, so the code execution won't

19
00:01:27,250 --> 00:01:29,410
continue in this function.

20
00:01:29,410 --> 00:01:34,530
Now to add ingredients, we of course want to add it our ingredients object,

21
00:01:34,540 --> 00:01:36,070
now here we started with null

22
00:01:36,090 --> 00:01:45,010
but keep in mind that the burger builder, we start with null because in componentDidMount, we actually load our ingredients,

23
00:01:45,100 --> 00:01:48,750
our starting ingredients from the internet.

24
00:01:48,760 --> 00:01:55,360
This is something I will really re-add but for now, since we haven't learned how to handle asynchronous

25
00:01:55,360 --> 00:02:03,700
code here, I will ignore this here, will basically comment out the code in componentDidMount and instead

26
00:02:03,700 --> 00:02:09,550
start with my own ingredients set up here in the state. So here, ingredients will not be null

27
00:02:09,610 --> 00:02:10,780
in my reducer

28
00:02:10,930 --> 00:02:21,650
but instead be an object where we have salad 0, bacon 0, cheese 0 and meat 0,

29
00:02:21,660 --> 00:02:24,930
again, this is just a temporary reversal.

30
00:02:25,000 --> 00:02:31,990
Now when we add an ingredient, we of course need to get the information which ingredient that is and

31
00:02:31,990 --> 00:02:38,010
for that given ingredient, we then simply need to add one. So we don't need to get the amount because it's

32
00:02:38,050 --> 00:02:39,370
always plus one

33
00:02:39,520 --> 00:02:42,310
but we need to know which ingredient it is.

34
00:02:42,310 --> 00:02:48,910
So what we we'll do here is first of all, we'll copy the entire old state with the spread operator, so that

35
00:02:48,940 --> 00:02:54,940
when we set new ingredients we also keep any other properties around by distributing them over this

36
00:02:54,940 --> 00:02:57,030
new javascript object first.

37
00:02:57,400 --> 00:02:59,820
But that then is the second thing we want to do

38
00:02:59,860 --> 00:03:06,150
set the ingredients to something new, ingredients should now also be a new javascript object,

39
00:03:06,220 --> 00:03:08,500
immutability, don't reuse the old one,

40
00:03:08,500 --> 00:03:15,000
create a new one, where I first of all distribute all properties of state ingredients.

41
00:03:15,390 --> 00:03:23,980
Again doing this to really create a new object, just distributing state here won't do that because it

42
00:03:23,980 --> 00:03:27,080
doesn't create deep clones of objects,

43
00:03:27,100 --> 00:03:31,600
it doesn't go into objects and create new objects for these too,

44
00:03:31,750 --> 00:03:37,930
it simply just copies the surrounding object but ingredients which is object on its own would still

45
00:03:37,930 --> 00:03:45,280
point to that old object while we fix this by spreading out the properties of that old object into a

46
00:03:45,280 --> 00:03:46,990
new object here.

47
00:03:46,990 --> 00:03:53,920
Now with that in this new ingredients object, we want to overwrite the given ingredient which we need

48
00:03:53,920 --> 00:03:56,950
to get as a payload of this action.

49
00:03:57,160 --> 00:04:04,600
Now in ES6, there is this special syntax you can use to dynamically overwrite a property in a given

50
00:04:04,600 --> 00:04:05,890
javascript object,

51
00:04:06,070 --> 00:04:08,080
you can use square brackets, now

52
00:04:08,080 --> 00:04:10,410
this does not create an array here.

53
00:04:10,690 --> 00:04:17,410
Instead here, you can now pass a variable over a something which contains the name you actually want

54
00:04:17,410 --> 00:04:22,840
to use as a property name and I expect to get that property name on my action,

55
00:04:22,900 --> 00:04:30,280
maybe on a ingredient name property. Now ingredient name is something we get as a payload to the action

56
00:04:30,730 --> 00:04:35,190
and then here, we simply distribute all ingredients into our new object,

57
00:04:35,260 --> 00:04:37,780
So this object then holds salad, meat

58
00:04:37,780 --> 00:04:40,480
bacon and cheese and one of these,

59
00:04:40,510 --> 00:04:46,120
which ever that is which we receive as a payload of the action will receive a new value.

60
00:04:46,150 --> 00:04:51,030
We target it with this syntax and then with colon and the new value,

61
00:04:51,070 --> 00:05:00,480
well we set this new value, the new value now simply is state.ingredients then again select the given

62
00:05:00,480 --> 00:05:05,870
ingredient name, so this now factors the old value for that ingredient,

63
00:05:05,870 --> 00:05:11,170
so like 0 or 1 or whatever it was and then we add plus one.

64
00:05:11,180 --> 00:05:17,360
So now here, we get the number of the old ingredients, add one and assign this to this ingredient where

65
00:05:17,360 --> 00:05:20,530
we overwrite the copy we created here.

66
00:05:20,550 --> 00:05:25,670
Now we're returning a new version of the state with the updated ingredients.

67
00:05:26,060 --> 00:05:28,520
So that is how we add an ingredient,

68
00:05:28,550 --> 00:05:30,480
how do we remove one?

69
00:05:30,830 --> 00:05:33,020
Well for removing,

70
00:05:33,020 --> 00:05:39,250
I also want to create a new version of my state where I simply decrement one ingredient by one

71
00:05:39,350 --> 00:05:46,200
and for that, we can of course start by copying that code here from the ADD_INGREDIENT logic,

72
00:05:46,460 --> 00:05:54,980
we still copy the old state and then, I distribute the ingredient properties into this new ingredients object

73
00:05:55,010 --> 00:06:00,830
I take the ingredient I receive as an action payload for this case here too

74
00:06:01,100 --> 00:06:02,860
but now, I don't add one,

75
00:06:02,900 --> 00:06:10,350
I remove one. And with that, we got a reducer which should be able to update our ingredients,

76
00:06:10,400 --> 00:06:13,080
it won't update the price right now,

77
00:06:13,160 --> 00:06:15,060
we'll take care about this later,

78
00:06:15,380 --> 00:06:18,230
but we will update our ingredients here.

79
00:06:18,380 --> 00:06:24,560
Now with that in the next lecture, I obviously want to connect this to my burger builder

80
00:06:24,700 --> 00:06:32,900
so that we use that reducer and these actions to managing the ingredients we add to our burger or remove from

81
00:06:32,900 --> 00:06:33,290
it.