1
00:00:02,250 --> 00:00:07,230
Now that we're handling everything related to ingredients through redux,

2
00:00:07,230 --> 00:00:13,850
we of course should also adjust the other components where we use that ingredient data, namely check

3
00:00:13,860 --> 00:00:21,030
out and contact data, especially checkout and contact data are super great now that we use redux

4
00:00:21,450 --> 00:00:28,260
because thus far, we used query params to pass our ingredients to the checkout component,

5
00:00:28,270 --> 00:00:31,230
this is something we finally can get rid of.

6
00:00:31,410 --> 00:00:38,730
So in the burger builder component where we do pass our ingredients through query params here,

7
00:00:38,730 --> 00:00:42,600
purchaseContinueHandler, we no longer need to do that,

8
00:00:42,750 --> 00:00:45,540
we can simply remove this method.

9
00:00:45,680 --> 00:00:49,360
Instead we need to handle this through redux

10
00:00:49,380 --> 00:00:58,650
now, we probably still want to navigate on but I don't want to pass query params anymore. So I can get

11
00:00:58,650 --> 00:01:06,240
rid of all that query params code here and I can also make this push method a bit shorter now and just

12
00:01:06,240 --> 00:01:13,610
go to /checkout here and we can then simply get the ingredients from the redux store.

13
00:01:13,770 --> 00:01:20,610
So our purchaseContinueHandler lives on in the burger builder but it's much leaner and in the check

14
00:01:20,610 --> 00:01:22,110
out container,

15
00:01:22,110 --> 00:01:29,360
we no longer need to get our ingredients in componentWillMount like this.

16
00:01:29,450 --> 00:01:33,800
Instead we can get rid of componentWillMount here altogether,

17
00:01:33,910 --> 00:01:37,770
we can get rid of our state which only handles ingredients and price,

18
00:01:37,780 --> 00:01:47,180
we got that in redux, and we can now import connect from react-redux again because obviously we want

19
00:01:47,180 --> 00:01:51,800
to connect this container with redux too.

20
00:01:52,310 --> 00:01:58,490
So if we go down to the bottom of the checkout container, I'll again create a constant, mapStateToProps

21
00:01:58,590 --> 00:02:06,260
and there, I still have a function which gets the state and in the end returns a javascript object

22
00:02:06,290 --> 00:02:14,360
where we map well, our state stored in redux store to the props of this container. And there we could

23
00:02:14,360 --> 00:02:16,910
have our ings property too,

24
00:02:16,970 --> 00:02:22,410
you can name it whatever you want though and this should hold state ingredients,

25
00:02:22,430 --> 00:02:24,800
this can not be named whatever you want,

26
00:02:24,800 --> 00:02:28,490
this has to be the property as you name it in your state.

27
00:02:28,490 --> 00:02:35,370
So as in our reducer ingredients and of course we also need the price here,

28
00:02:35,370 --> 00:02:40,380
so let's fetch the price which is state.totalPrice,

29
00:02:40,380 --> 00:02:44,330
that's the property name we use in the reducer.

30
00:02:44,340 --> 00:02:50,310
Now we don't need mapDispatchToProps here because we're not actually dispatching anything in this

31
00:02:50,310 --> 00:02:55,790
container, we just navigate a little bit but we don't do this through redux store, we do this through the

32
00:02:55,800 --> 00:02:56,930
react router

33
00:02:57,120 --> 00:03:00,330
so there is nothing getting dispatched here,

34
00:03:00,330 --> 00:03:05,760
so for now we only need mapStateToProps, I then wrap this with connect

35
00:03:05,970 --> 00:03:15,480
and here, I pass mapStateToProps as the first argument and simply omit the second one since we don't

36
00:03:15,750 --> 00:03:20,670
have a mapDispatchToProps data field we want to pass on.

37
00:03:20,930 --> 00:03:29,030
By the way, if you only had mapDispatchToProps and no mapStateToProps, you simply would set 

38
00:03:29,030 --> 00:03:36,030
mapStateToProps to null and pass mapDispatchToProps because mapDispatchToProps always has to be the

39
00:03:36,030 --> 00:03:39,750
second argument, mapStateToProps has to be the first one.

40
00:03:39,780 --> 00:03:45,570
So the first one is not necessary, simply set it to null, here however the first one is the only one

41
00:03:45,570 --> 00:03:46,770
we're interested,

42
00:03:46,770 --> 00:03:54,540
we're just needing mapStateToProps. With that, we got ingredients and price available through props

43
00:03:54,560 --> 00:03:55,780
in this component,

44
00:03:56,030 --> 00:03:57,050
let's use it.

45
00:03:57,050 --> 00:04:04,880
So there whenever we access this.state.ingredients, this is now this.props.ings,

46
00:04:04,880 --> 00:04:07,880
and when we use the price, well this is now

47
00:04:07,940 --> 00:04:11,230
this.props.price, though

48
00:04:11,360 --> 00:04:17,490
we only really need it down here where we use our little trick for loading the contact data.

49
00:04:17,840 --> 00:04:25,220
Now thanks to our redux store, we no longer need to use the tricks so we don't actually even need the

50
00:04:25,220 --> 00:04:28,940
price here because we don't use it anywhere else in this component.

51
00:04:28,940 --> 00:04:35,930
So let's get rid of this price prop here in mapStateToProps and let's get rid of the render method

52
00:04:35,930 --> 00:04:36,570
here

53
00:04:37,290 --> 00:04:45,920
and instead just set a component we want to load and that should be our contact data components still

54
00:04:46,080 --> 00:04:55,020
but now not included as a jsx component but just by pointing to it on the component property of the route.

55
00:04:55,020 --> 00:05:01,860
With that we also need to adjust our contact data of course because in there as you know, we also use

56
00:05:01,860 --> 00:05:07,010
the ingredients which we get on props and the price. Prior to redux,

57
00:05:07,020 --> 00:05:09,960
we got it with this little trick we just removed,

58
00:05:09,990 --> 00:05:15,560
now we can simply connect this container here to redux as well.

59
00:05:15,600 --> 00:05:27,330
So for that, in the contact data container, let's also import connect from react-redux and all the way

60
00:05:27,330 --> 00:05:36,130
at the bottom, let's create mapStateToProps here tOo, assign the function which receives the state

61
00:05:36,190 --> 00:05:42,880
and return our object where we map the relevant state we need in this component to props and there, I

62
00:05:42,880 --> 00:05:49,280
want to get my audience on state.ingredients and my price on state.totalPrice

63
00:05:49,360 --> 00:05:53,380
was the name. And then as before,

64
00:05:53,410 --> 00:05:56,090
let's wrap this with connect, pass

65
00:05:56,110 --> 00:06:02,940
mapStateToProps and omit the second argument because we're not dispatching anything here either

66
00:06:03,130 --> 00:06:08,850
and then pass connect data to the function returnd by the connect function.

67
00:06:10,140 --> 00:06:16,320
Now of course, we need to update this component too, wherever we use the this.props.ingredients,

68
00:06:16,320 --> 00:06:23,220
we can now use this.props.ings, of course the quickest possible update would be to simply use ingredients

69
00:06:23,220 --> 00:06:26,370
here as a prop name because that's the name we already use

70
00:06:26,550 --> 00:06:32,200
but to avoid confusion with these ingredients we get from the state, I chose to use a different name.

71
00:06:32,310 --> 00:06:33,880
So now in the contact data,

72
00:06:33,900 --> 00:06:39,260
let's update everything which uses these props. We got the order form,

73
00:06:39,390 --> 00:06:45,750
it definitely doesn't require updating and it takes up most of the place in this file.

74
00:06:45,930 --> 00:06:47,650
The order handler here,

75
00:06:47,700 --> 00:06:48,610
let's have a look,

76
00:06:48,630 --> 00:06:54,730
we take a lot of information from our form and here we pass on props.ingredients,

77
00:06:54,750 --> 00:06:56,120
this should be props.ings,

78
00:06:56,130 --> 00:07:05,360
props.price still is correct because we still map that to a price property in mapStateToProps.

79
00:07:05,820 --> 00:07:07,350
So we don't need to replace this,

80
00:07:07,350 --> 00:07:12,420
it will already refer to a redux store though, just as we do for the ingredients,

81
00:07:12,690 --> 00:07:16,320
so let's continue. Everything else here looks good to me

82
00:07:17,540 --> 00:07:20,930
and all our input validation looks good to me,

83
00:07:20,930 --> 00:07:28,600
the inputChangedHandler also shouldn't be related to our ingredients or the price at all

84
00:07:28,640 --> 00:07:31,220
and in the render method here,

85
00:07:31,340 --> 00:07:40,060
we also simply just take care about our form where we don't really care about any ingredients or the

86
00:07:40,070 --> 00:07:42,770
price, so that's all just form related,

87
00:07:42,770 --> 00:07:46,330
that's the reason why this container is as big as it is.

88
00:07:46,760 --> 00:07:50,390
So the information we need should be there,

89
00:07:50,630 --> 00:07:54,680
let's now try everything out and let's see if it works as it should work.

90
00:07:54,680 --> 00:07:56,660
Make sure to save all files,

91
00:07:56,660 --> 00:07:58,390
go back to your application,

92
00:07:59,230 --> 00:08:01,570
build an example burger here,

93
00:08:01,810 --> 00:08:02,110
click

94
00:08:02,110 --> 00:08:03,360
order now,

95
00:08:03,700 --> 00:08:04,940
the summary looks good.

96
00:08:05,020 --> 00:08:06,640
Let's click continue,

97
00:08:06,680 --> 00:08:08,170
that looks good too,

98
00:08:08,370 --> 00:08:10,010
let's click continue,

99
00:08:10,240 --> 00:08:14,230
let's enter some dummy data here,

100
00:08:17,130 --> 00:08:19,220
so this all works fine.

101
00:08:19,510 --> 00:08:24,480
Click order and we were redirected here,

102
00:08:24,610 --> 00:08:29,340
let's now also check firebase, there in your database

103
00:08:29,410 --> 00:08:31,010
on orders,

104
00:08:31,180 --> 00:08:35,420
you should see the order you just placed,

105
00:08:35,420 --> 00:08:41,590
this is the order. So that all works, we're passing around our redux state successfully, now

106
00:08:41,590 --> 00:08:45,570
without any fancy tricks, really taking advantage of redux

107
00:08:45,580 --> 00:08:50,170
and this also hopefully shows where redux shines.

108
00:08:50,170 --> 00:08:55,500
This is not a super huge application but it is a bit more advanced than just having a To-Do list

109
00:08:55,570 --> 00:08:59,360
and here, we really make it much easier to ourselves

110
00:08:59,620 --> 00:09:06,380
if we use redux. We have a predictable data flow and we make passing data around in our application

111
00:09:06,400 --> 00:09:08,550
super super simple.