1
00:00:02,230 --> 00:00:04,030
So we created the action creator,

2
00:00:04,060 --> 00:00:08,830
let's now connect it to our contact data container.

3
00:00:08,830 --> 00:00:11,150
There we have the orderHandler method

4
00:00:11,260 --> 00:00:13,570
and I will leave it here because I still need it,

5
00:00:13,570 --> 00:00:20,020
it should be executed when we clicked the order button. But I no longer want to handle loading here so

6
00:00:20,020 --> 00:00:28,500
I will remove setState loading there and I no longer want to actually do the order here,

7
00:00:28,510 --> 00:00:34,150
I already stripped out the code to reach out to axios. What I do want to do,

8
00:00:34,420 --> 00:00:35,690
I want to leave the axios

9
00:00:35,700 --> 00:00:37,760
imput here, import here

10
00:00:37,900 --> 00:00:40,900
and I actually didn't do something else before,

11
00:00:40,900 --> 00:00:49,450
I want to import withErrorHandler, that higher order component from my higher order component folder,

12
00:00:49,660 --> 00:00:54,550
I don't need to do that it's not related to redux but I want to make sure that I do use it here

13
00:00:54,550 --> 00:01:00,700
too just as I use it in the burger builder at the bottom, it's getting wrapped by the connect middleware

14
00:01:00,980 --> 00:01:03,990
and I want to have this error dropdown here too.

15
00:01:04,090 --> 00:01:11,390
So in contact data at the very bottom where I export everything, I'll wrap contact data with one additional

16
00:01:11,390 --> 00:01:17,510
higher order component, my withErrorHandler higher order component where I don't only pass contact data

17
00:01:17,680 --> 00:01:20,660
but also axios, that's just a tiny thing.

18
00:01:20,720 --> 00:01:28,400
The main thing is that I want to connect my container here to the new actions I created and for that,

19
00:01:28,610 --> 00:01:32,230
I need to connect myself to the dispatchable actions,

20
00:01:32,270 --> 00:01:37,610
so I'll add a constant mapDispatchToProps, we didn't have that before

21
00:01:38,390 --> 00:01:46,540
and here, I now have one property I want to create, onOrderBurger or any name you like. There,

22
00:01:46,550 --> 00:01:54,080
I'll execute an anonymous function where I in the end dispatch my action creator, the action creator

23
00:01:54,080 --> 00:01:57,470
I added in the order file, purchaseBurgerStart.

24
00:01:57,470 --> 00:01:59,170
That is the action creator

25
00:01:59,420 --> 00:02:07,520
I want to import in my index.js file in the actions folder so that I can reach it from other files

26
00:02:08,280 --> 00:02:12,510
and that other file I want to reach it from is the contact data container,

27
00:02:12,590 --> 00:02:21,450
there, I'll now import it. So I'll import everything as actions from

28
00:02:21,610 --> 00:02:27,050
and now I'll move all the way up to store actions there

29
00:02:27,100 --> 00:02:28,760
in the index.js file.

30
00:02:29,210 --> 00:02:33,110
And with that, I can dispatch at the bottom of the contact data container,

31
00:02:33,230 --> 00:02:41,290
I can dispatch actions and then here, it's purchaseBurgerStart. Now I do expect to get an argument

32
00:02:41,290 --> 00:02:41,920
here,

33
00:02:42,100 --> 00:02:44,200
the order data,

34
00:02:44,500 --> 00:02:51,100
so I get it into my anonymous function and I pass it on to that action creator because I do actually

35
00:02:51,100 --> 00:02:56,380
expect that data here in the action creator. Now in contact data,

36
00:02:56,390 --> 00:02:58,600
I of course also want to use this property.

37
00:02:58,810 --> 00:03:04,880
So onOrderBurger should be called in the orderBurgerHandler,

38
00:03:05,320 --> 00:03:11,540
let's scroll up to the orderHandler and there, we prepare the order data,

39
00:03:12,010 --> 00:03:17,140
now we can execute this.props,

40
00:03:17,140 --> 00:03:23,600
remember we always receive our dispatch actions here as props, onOrderBurger

41
00:03:23,830 --> 00:03:26,260
and there I want to pass my order

42
00:03:26,380 --> 00:03:32,890
and this contains the ingredients, the price and here, order data is simply the detailed order data the user entered

43
00:03:32,890 --> 00:03:34,420
into the form.

44
00:03:34,630 --> 00:03:41,350
With that, we are able to dispatch this on a click but there are a couple of things which won't work as

45
00:03:41,350 --> 00:03:42,640
expected anymore.

46
00:03:42,640 --> 00:03:51,520
For example, in the render method of the contact data component here, we check if we are loading to eventually

47
00:03:51,520 --> 00:03:54,680
display a spinner if we are instead of the form.

48
00:03:54,970 --> 00:03:56,310
Now we are loading

49
00:03:56,380 --> 00:04:01,880
if we clicked the order button. We need to handle that loading state in our redux store

50
00:04:01,890 --> 00:04:10,120
therefore, because we put the whole process of ordering into redux. To be able to do, so we need to work

51
00:04:10,120 --> 00:04:12,660
on the reducer which is pretty empty right now.

52
00:04:12,700 --> 00:04:14,110
So that's the next goal,

53
00:04:14,110 --> 00:04:16,090
let's work on that order reducer.