1
00:00:02,220 --> 00:00:09,100
So let's start working on the state for actually ordering a burger, right now if we have a look at our

2
00:00:09,100 --> 00:00:09,980
containers,

3
00:00:10,030 --> 00:00:13,550
we handle that inside our contact data container.

4
00:00:13,630 --> 00:00:20,500
There we have the orderHandler method which is essentially executed when we submit this form we create in

5
00:00:20,500 --> 00:00:28,630
this container here, and in this orderHandler we send the HTTP request, we set the state to loading initially

6
00:00:28,630 --> 00:00:34,470
to show a spinner then we set it to false once we're done and then we navigate away.

7
00:00:34,750 --> 00:00:37,120
We can do all of that in that container,

8
00:00:37,120 --> 00:00:43,480
this is not per se wrong or anything like that but we can also outsource it to action creators and

9
00:00:43,490 --> 00:00:47,320
redux and as so often, this is a choice that's left up to you.

10
00:00:47,590 --> 00:00:53,950
But since you in theory could have an application where you also want to be able to submit this request

11
00:00:53,950 --> 00:01:00,310
from other pages too, maybe putting it into a central place like the redux world is is a good idea,

12
00:01:00,310 --> 00:01:01,910
so that is what we're going to do.

13
00:01:01,930 --> 00:01:09,670
We're going to move that submit logic out of this contact data container into an action creator. Speaking

14
00:01:09,670 --> 00:01:11,820
of that, for these changes,

15
00:01:11,950 --> 00:01:14,180
I want to adjust my structure here

16
00:01:14,290 --> 00:01:15,670
in the store folder.

17
00:01:15,880 --> 00:01:24,040
I'l create an actions subfolder and I'll create a reducers subfolder and I'll move my actions.js file into

18
00:01:24,040 --> 00:01:27,880
the actions folder and the reducer.js file into the reducers folder and

19
00:01:27,880 --> 00:01:32,800
this of course will break the app for now since our import paths will be off.

20
00:01:32,800 --> 00:01:39,730
I'll also rename the actions file to actionTypes because I want to have a set up shown as at the end

21
00:01:39,730 --> 00:01:46,330
of last module, I want to have an actionTypes file where I simply export these identifiers and then

22
00:01:46,330 --> 00:01:50,310
I'll create separate files for my different action creators.

23
00:01:50,320 --> 00:01:56,350
That's actually the first thing I'll do here, I'll add an order.js file here which should hold the action

24
00:01:56,350 --> 00:01:59,460
creators for submitting an order.

25
00:01:59,950 --> 00:02:04,380
I also want to create a new reducer file,

26
00:02:04,390 --> 00:02:05,340
I'll name it

27
00:02:05,350 --> 00:02:14,500
order.js too and I'll rename the first reducer to burger builder since it holds code relevant to building

28
00:02:14,510 --> 00:02:16,050
the burger only,

29
00:02:16,150 --> 00:02:19,720
not just the ingredients but in theory to the whole building process

30
00:02:19,720 --> 00:02:22,460
if we were to add more functionalities to it.

31
00:02:22,810 --> 00:02:26,230
Again with that, our application will of course be broken.

32
00:02:26,230 --> 00:02:33,400
I'll also add another file to the actions folder, the burgerBuilder.js file where I want to create

33
00:02:33,460 --> 00:02:40,180
the action creators for building a burger and there, I'll only have synchronous action creators for adding

34
00:02:40,180 --> 00:02:46,240
and removing ingredients but still I want to keep that action creator pattern throughout my application

35
00:02:46,240 --> 00:02:52,720
here even though for synchronous action creators, it's not really necessary but it is a consistent approach I'm

36
00:02:52,870 --> 00:02:54,190
taking here.

37
00:02:54,190 --> 00:03:02,950
So with that, let's start working on all these action creators before we then start implementing the store handling

38
00:03:03,160 --> 00:03:04,420
for orders.