1
00:00:02,250 --> 00:00:06,730
With the reducer finished for now at least regarding ingredients,

2
00:00:07,080 --> 00:00:11,310
let's connect the burger builder container to our store.

3
00:00:11,400 --> 00:00:16,890
We already set up the store here in the index.js file, pass it to provider and wrapped everything

4
00:00:16,890 --> 00:00:18,060
with provider,

5
00:00:18,270 --> 00:00:22,280
so now it's time to work on the burger builder to receive that data there.

6
00:00:22,680 --> 00:00:24,230
And you learned how that works,

7
00:00:24,240 --> 00:00:26,870
it works with the connect function

8
00:00:26,910 --> 00:00:29,980
we import from react-redux.

9
00:00:30,030 --> 00:00:38,480
So let's import connect from there, from react-redux like this and with that import added, let's wrap

10
00:00:38,570 --> 00:00:40,650
our export with it.

11
00:00:40,730 --> 00:00:47,980
Now to be precise, let's not wrap it with it, let's simply wrap the mapDispatchToProps and mapStateToProps

12
00:00:47,990 --> 00:00:52,860
constants with it and pass the burger builder to it.

13
00:00:53,180 --> 00:01:01,940
But here we face an issue, we already have a higher order component wrapping our export, the withErrorHandler

14
00:01:01,970 --> 00:01:05,070
high order component we set up here.

15
00:01:05,570 --> 00:01:07,500
Well this actually isn't a problem,

16
00:01:07,520 --> 00:01:11,950
you can have as many higher order components in there as you want.

17
00:01:12,170 --> 00:01:18,320
In the end what connect will do is it will just set some props on the component it's wrapping,

18
00:01:18,620 --> 00:01:25,280
so as long as you pass this props on in your own higher order components, this should work fine because

19
00:01:25,290 --> 00:01:32,210
any props set by other higher order components which might wrap this one will still be passed on just

20
00:01:32,210 --> 00:01:32,790
fine,

21
00:01:32,960 --> 00:01:35,690
so this shouldn't pose an issue at all,

22
00:01:35,930 --> 00:01:43,370
so let's see if this works. Let's go back to burger builder and let's create our two constants which define

23
00:01:43,370 --> 00:01:53,840
which props we get into burger builder, mapDispatchToProps and mapStateToProps, I'll reverse the order

24
00:01:53,840 --> 00:02:02,000
because I did so before, so const mapStateToProps. Now mapStateToProps holds a function which

25
00:02:02,000 --> 00:02:08,270
receives the state automatically and which returns a javascript object where we define which property

26
00:02:08,270 --> 00:02:10,540
should hold which slice of the state.

27
00:02:10,880 --> 00:02:19,280
So here, we could create ings for ingredients and assign state.ingredients just like that, to get access

28
00:02:19,280 --> 00:02:26,480
to that ingredients property in our state and dispatch to props now receives a function or holds a

29
00:02:26,480 --> 00:02:30,840
function which receives the dispatch function as an argument

30
00:02:31,250 --> 00:02:35,360
and then also the returns object with props function mappings

31
00:02:35,360 --> 00:02:43,100
in this case and here I want to have two dispatchable props basically or two props which can be

32
00:02:43,100 --> 00:02:44,480
triggered,

33
00:02:44,480 --> 00:02:53,000
I'll have a onIngredientAdded property and this property name, as this one here of course is totally

34
00:02:53,000 --> 00:02:54,130
up to you.

35
00:02:54,620 --> 00:03:02,690
So here onIngredientAdded will hold an anonymous function where I then execute dispatch and pass a javascript

36
00:03:02,690 --> 00:03:09,470
object where the type should now be my ADD_INGREDIENT action type and for that, I'll move all the way up

37
00:03:09,470 --> 00:03:18,020
to the file and import everything as action types from this action types folder which we can find two

38
00:03:18,020 --> 00:03:21,790
levels up in the store folder in the actions.js file,

39
00:03:21,790 --> 00:03:24,440
this is where the action types are stored.

40
00:03:24,440 --> 00:03:26,600
So now, this is what I'll sign here,

41
00:03:26,600 --> 00:03:29,960
type is actionTypes.ADD_INGREDIENT.

42
00:03:30,440 --> 00:03:37,820
And now if we have a look at the reducer and probably you also remember, add ingredient, just like remove

43
00:03:37,820 --> 00:03:40,790
ingredient requires a payload.

44
00:03:40,850 --> 00:03:45,070
We use the ingredient name there and we access it on the action

45
00:03:45,260 --> 00:03:49,470
so we need to pass the ingredient name along with the type.

46
00:03:49,480 --> 00:03:57,730
So back in the burger builder here, the type is one thing but I'll also set up my ingredient name action

47
00:03:57,760 --> 00:03:59,950
property and ingredient name

48
00:03:59,950 --> 00:04:06,480
now is something I expect to get here in this function so I'll simply name it ingName here,

49
00:04:06,490 --> 00:04:12,880
you can name this argument whatever you want of course and then I'll assign it here as a value. I'll then

50
00:04:12,910 --> 00:04:21,490
duplicate this property and add my on ingredient removed property where it also needs the ingredient

51
00:04:21,490 --> 00:04:22,110
name

52
00:04:22,210 --> 00:04:30,520
but then here, I dispatch the remove ingredient action but still pass my ingredient name on.

53
00:04:30,520 --> 00:04:37,630
Now with these two constants, mapStateToProps and mapDispatchToProps set up, we can connect

54
00:04:37,630 --> 00:04:39,860
our component to redux.

55
00:04:40,210 --> 00:04:47,470
So let's add connect, we already imported it and let's pass mapStateToProps and mapDispatchToProps

56
00:04:47,470 --> 00:04:55,120
as arguments and then let's pass this entire withErrorHandler call here as an argument to the

57
00:04:55,120 --> 00:04:59,470
function, this connect function call returns us. With this set up

58
00:04:59,470 --> 00:05:05,100
now, we have our burger builder container connected to the store,

59
00:05:05,320 --> 00:05:12,430
let's now use all these props we make available in the burger burger, like ings. Everywhere, where

60
00:05:12,430 --> 00:05:16,480
we use ingredients, we now want to use ings

61
00:05:16,750 --> 00:05:22,120
and I will remove ingredients from here to make it really clear that we're not using the local state

62
00:05:22,120 --> 00:05:26,800
for ingredients anymore for the price we will, right now at least.

63
00:05:26,800 --> 00:05:33,940
So let's fix this or let's set this up, add ingredient and remove ingredient handler,

64
00:05:33,940 --> 00:05:36,890
we should be able to entirely remove that

65
00:05:36,910 --> 00:05:41,760
but I will leave it here since we later picked a total price updated code from there

66
00:05:41,890 --> 00:05:44,000
but we don't want to execute them anymore.

67
00:05:44,290 --> 00:05:51,390
Instead if we scroll down to the render method, wherever we access this.state.ingredients, we want to

68
00:05:51,400 --> 00:05:54,240
use this.props.ings instead,

69
00:05:54,490 --> 00:05:57,450
this property we set up in mapStateToProps

70
00:05:57,520 --> 00:06:05,580
here. So this is what we want to use in our render method, this.props.ings instead of state

71
00:06:05,610 --> 00:06:09,270
ingredients. State error and so on

72
00:06:09,300 --> 00:06:11,270
will stay untouched for now

73
00:06:11,580 --> 00:06:16,920
but here for example, state ingredients this is state, this.props.ings

74
00:06:17,300 --> 00:06:20,280
and then here our burger where we pass the ingredients,

75
00:06:20,280 --> 00:06:21,050
guess what,

76
00:06:21,120 --> 00:06:23,430
it's this.props.ings

77
00:06:23,930 --> 00:06:25,410
and so on.

78
00:06:25,640 --> 00:06:32,300
Now I will first of all replace all ingredients before I work on the ingredient added and remove props here

79
00:06:32,360 --> 00:06:34,260
so let me go on, here

80
00:06:34,260 --> 00:06:40,700
also this is this.props.ings and that should be it.

81
00:06:40,700 --> 00:06:44,990
Now let's work on the add ingredient and remove ingredient handlers,

82
00:06:45,320 --> 00:06:46,980
we don't call that anymore

83
00:06:47,090 --> 00:06:57,770
instead we execute this.props on ingredient added and this.props on ingredient removed but both functions

84
00:06:57,770 --> 00:06:59,330
at the end need an argument.

85
00:06:59,570 --> 00:07:06,290
If we scroll down to our mapDispatchToProps constant, we see that the functions stored in these

86
00:07:06,290 --> 00:07:09,540
props or passed onto these props,

87
00:07:09,740 --> 00:07:15,250
both take the ingredient name as an argument. To pass this on here,

88
00:07:15,260 --> 00:07:18,540
let's first of all have a look at our build controls component,

89
00:07:18,650 --> 00:07:24,620
if we scroll to our components and we open the build controls folder and go into the build controls component,

90
00:07:25,190 --> 00:07:33,550
we see that we already pass control type here as an argument to the ingredient added and removed props

91
00:07:33,560 --> 00:07:34,230
methods,

92
00:07:34,280 --> 00:07:40,490
so to the method which gets passed through these props and that happens to be the method we just set

93
00:07:40,490 --> 00:07:41,730
up here.

94
00:07:42,260 --> 00:07:48,830
Now that just means we have to check if control type is exactly what we're looking for and it is because

95
00:07:48,860 --> 00:07:53,860
control type is this part here type salad, bacon, cheese and meat

96
00:07:54,020 --> 00:08:01,850
an that has the same format as the names we use as properties in our reducer code and of course, we

97
00:08:01,850 --> 00:08:05,330
should make sure that this is equal.

98
00:08:05,330 --> 00:08:11,600
You could of course go so far and refactor your application to take the ingredient state, the property

99
00:08:11,600 --> 00:08:16,600
names here to create your controls in the burger builder, in the build controls

100
00:08:16,750 --> 00:08:23,510
component here. But we'll leave it as it is and we're just making sure that we're passing the correct value

101
00:08:23,810 --> 00:08:30,010
to our action dispatchers and we do. So save all the files then

102
00:08:30,310 --> 00:08:31,930
and now let's try this out.

103
00:08:32,030 --> 00:08:39,560
Back in our running application, let's add some ingredients to that burger, like salad, bacon, cheese

104
00:08:39,890 --> 00:08:42,950
or meat and this is all working fine.

105
00:08:43,280 --> 00:08:51,230
Now obviously, the price is not updating here because what we have here is that we don't change the price

106
00:08:51,230 --> 00:08:53,630
state at any point of time anymore but

107
00:08:53,790 --> 00:08:55,960
we'll take care about this soon.

108
00:08:56,000 --> 00:08:57,740
The rest is working though,

109
00:08:58,050 --> 00:09:02,290
well the order now button also isn't becoming active.

110
00:09:03,120 --> 00:09:05,750
Let's have a look at that order now button then,

111
00:09:05,880 --> 00:09:11,970
the reason why it's not becoming active is that in the end, it's controlled through this purchasable property

112
00:09:11,970 --> 00:09:12,740
here,

113
00:09:12,900 --> 00:09:18,000
we had a look at this earlier in this module. So the order now button price,

114
00:09:18,000 --> 00:09:23,580
these are two things we'll have to work on, the ingredients on their own though are already working great

115
00:09:23,630 --> 00:09:24,990
in the burger builder.

116
00:09:25,170 --> 00:09:30,510
Let's continue this road and let's also make sure that the order now button works and that we update

117
00:09:30,510 --> 00:09:31,230
the price.