1 00:00:02,260 --> 00:00:08,030 To make sure that we can also have orders in this application, we'll repeat something we did before, 2 00:00:08,050 --> 00:00:13,940 we'll work on the orders screen and we'll work on our Redux logic so that we can store orders. 3 00:00:14,020 --> 00:00:15,980 So I'll start by adding a new reducer, 4 00:00:16,060 --> 00:00:22,060 the orders.js file which holds our orders reducer and of course we'll also need an actions file where 5 00:00:22,060 --> 00:00:26,280 we manage our order related actions, the orders.js file as well. 6 00:00:27,010 --> 00:00:33,910 So let's start with the orders.js reducers file here and again as always, we'll want to have some 7 00:00:33,910 --> 00:00:41,020 initial state here which also kind of defines how our data is shaped in there and orders will be really 8 00:00:41,020 --> 00:00:42,640 simple in this application, 9 00:00:42,640 --> 00:00:46,660 it'll be just an array of orders, that's really all we need. 10 00:00:47,390 --> 00:00:53,630 Then we can export a default function here which is our reducer, which of course has a state that's initialized 11 00:00:53,630 --> 00:01:00,830 with the initial state, that receives an action and that of course is all handled by Redux and we return 12 00:01:00,830 --> 00:01:01,520 our state here 13 00:01:01,520 --> 00:01:07,580 but of course typically, we also then want to switch on the action type and handle a couple of different 14 00:01:08,300 --> 00:01:13,350 cases here, so we can already add this switch statement. Now 15 00:01:13,380 --> 00:01:19,130 regarding the cases we want to handle, the actions we want to handle, there is 16 00:01:19,130 --> 00:01:26,500 one action I want to handle right now and that is my add order actions, so add order 17 00:01:26,510 --> 00:01:34,390 also looks like a fitting identifier and then I'll export my add order 18 00:01:34,910 --> 00:01:40,450 action creator here which should receive two things now - 19 00:01:40,550 --> 00:01:47,180 my cart items or the items that are part of the order but these are my cart items the end and of course 20 00:01:47,180 --> 00:01:52,240 the total amount and that's of course all the data we have in the cart in the end, we manage in the cart, 21 00:01:52,270 --> 00:01:52,550 right? 22 00:01:52,550 --> 00:01:58,760 We have a cart total amount and we have the items of the cart and since we order our whole cart, it of 23 00:01:58,760 --> 00:02:03,380 course makes sense that this data ends up in the order. 24 00:02:03,520 --> 00:02:08,900 Now here in the action creator, we therefore return our new action object and this action object has a 25 00:02:08,900 --> 00:02:17,240 type which is add order and then for example an order data key where we merge our cart items, store them 26 00:02:17,240 --> 00:02:23,270 in a cart items property and then amount holds total amount for example. 27 00:02:23,270 --> 00:02:29,660 Now it's up to you whether you pass this in one merged order data property or if you have two or more 28 00:02:30,140 --> 00:02:33,690 properties as part of your action object. 29 00:02:33,720 --> 00:02:37,710 This is the action, back to the reducer, what should happen when we get an order? 30 00:02:38,580 --> 00:02:45,040 Well I want to create a new order object and for this, just as before, I'll work with my own models. 31 00:02:45,090 --> 00:02:52,110 So let's go to the models folder and there, add an orders.js file where we have a class order which I'll 32 00:02:52,110 --> 00:02:52,800 export 33 00:02:52,830 --> 00:02:58,890 so that I again don't forget this and in there, we get a constructor that allows us to create a new order. 34 00:02:58,890 --> 00:03:04,320 Now how should an order look like? An order should have an ID of course, which is not the product 35 00:03:04,320 --> 00:03:04,700 ID 36 00:03:04,770 --> 00:03:10,970 because we can of course order the same product multiple times and therefore, an order is totally detached. 37 00:03:11,040 --> 00:03:13,650 In addition, an order can hold more than one product, 38 00:03:13,650 --> 00:03:16,380 in the end we order our whole cart there. 39 00:03:16,380 --> 00:03:18,570 So order has a standalone ID, 40 00:03:18,750 --> 00:03:26,160 it will get the items, the total amount and an order also needs a date of course because when we make 41 00:03:26,160 --> 00:03:29,430 an order, we want to store that date when it was made. 42 00:03:29,940 --> 00:03:31,500 And then I'll store all that data, 43 00:03:31,500 --> 00:03:42,160 get my ID, get my items here, get the total amount and also get the date. With that 44 00:03:42,170 --> 00:03:49,310 let's go back to the reducer, to the orders reducer and see what we can do with the orders there. In there, 45 00:03:49,340 --> 00:03:53,260 I want to handle the add order case right now which is the only action I have. 46 00:03:53,270 --> 00:04:01,140 So you need to import this action identifier of course and there, I want to create a new order, store it 47 00:04:01,160 --> 00:04:01,820 in a new order 48 00:04:01,820 --> 00:04:07,960 constant with the order model we just created which you therefore also have to import. 49 00:04:08,030 --> 00:04:14,030 Now with the new keyword, we can create a new Javascript object based on that class and there, we need the 50 00:04:14,180 --> 00:04:17,330 ID, the items, the total amount and the created date. 51 00:04:17,330 --> 00:04:23,040 Now we only get the items and the total amount as part of our action here as you can tell. 52 00:04:23,240 --> 00:04:28,630 Now the ID is something we'll later generate dynamically on a server, for the moment, 53 00:04:28,640 --> 00:04:36,530 I'll use a dummy pseudo unique ID with new date to string, date of course is a built-in Javascript 54 00:04:36,560 --> 00:04:42,140 object and this in the end generates an ID which is kind of unique. 55 00:04:42,140 --> 00:04:48,230 Technically, we could create two orders at the exact same timestamp, at the exact same millisecond, though 56 00:04:48,230 --> 00:04:52,340 in our app where we clear the cart after pressing add order or order 57 00:04:52,340 --> 00:04:54,230 now, this will not really be possible. 58 00:04:54,230 --> 00:04:57,470 So this is a good dummy ID for the moment, 59 00:04:57,470 --> 00:04:59,050 it should be a string so that's important 60 00:05:00,110 --> 00:05:06,170 and in addition to that, the items of course, that can be stored. We get this on our action, right, 61 00:05:06,170 --> 00:05:10,770 the action has this order data property and in there, we'll have the items. 62 00:05:11,060 --> 00:05:16,580 So action order data.items gives us the items and for the total amount, we can use 63 00:05:16,580 --> 00:05:17,280 action. 64 00:05:17,330 --> 00:05:20,250 orderData. 65 00:05:20,450 --> 00:05:23,810 and then there, we have this amount property which we can extract, 66 00:05:23,810 --> 00:05:25,650 so there we can use this. 67 00:05:25,850 --> 00:05:31,700 Last but not least for the date, I of course want to generate a timestamp here with new date, 68 00:05:31,700 --> 00:05:37,730 this built-in Javascript constructor, if we execute it like this gives us the current timestamp stored 69 00:05:37,940 --> 00:05:41,060 in a Javascript object at the end. 70 00:05:41,060 --> 00:05:46,700 Now this new order just needs to be added to our orders array, so we return a new state snapshot here 71 00:05:47,000 --> 00:05:48,960 where we copy the old state, again 72 00:05:49,010 --> 00:05:53,650 we don't really have any other state in here, so copying it is redundant 73 00:05:53,750 --> 00:05:55,410 if we replace it anyways 74 00:05:55,460 --> 00:06:01,160 but in case you had a more complex state snapshot here for this slice of your Redux store, you would 75 00:06:01,160 --> 00:06:04,550 want to make sure you copy the other state so that you don't lose it. 76 00:06:04,550 --> 00:06:11,510 That's why I add it here and then I set orders equal to state orders and now call concat on this array 77 00:06:11,510 --> 00:06:17,450 which is a built-in Javascript function that adds a new item to an array and returns a new array that 78 00:06:17,450 --> 00:06:18,530 includes that item. 79 00:06:18,560 --> 00:06:24,040 So the old array stays untouched, the new array is returned and that of course allows us to update this 80 00:06:24,040 --> 00:06:29,450 in an immutable way where we never touch the original data but we set the new state by creating a 81 00:06:29,450 --> 00:06:36,590 brand new array that includes the new object and there I simply concatenate my new order. With that, 82 00:06:36,770 --> 00:06:45,590 we can go to the app.js file and import the orders reducer there from the store folder, the reducers 83 00:06:45,590 --> 00:06:52,040 folder and there, the orders.js file of course and merge that into our root reducer, maybe with an 84 00:06:52,100 --> 00:06:57,750 orders identifier and then pointing at the orders reducer. 85 00:06:57,780 --> 00:07:04,160 Now this should be a available and now we can dispatch actions, namely here our add order action 86 00:07:04,230 --> 00:07:11,740 and of course tap into that states slice and get our orders. Dispatching actions is the first thing I 87 00:07:11,740 --> 00:07:18,220 want to do, I want to do that from inside the cart screen when we press this order now button. 88 00:07:18,220 --> 00:07:19,990 Right now we're not doing anything there, 89 00:07:20,020 --> 00:07:26,790 now the goal is to place an order and also clear our cart. So here in the cart screen, 90 00:07:26,800 --> 00:07:33,270 we already do import use dispatch and we're executing it so that we have the dispatch function. 91 00:07:33,340 --> 00:07:45,490 All we therefore need to do is we need to import everything as order actions from store actions orders 92 00:07:45,520 --> 00:07:50,140 and I'll therefore name this orders actions to be super precise 93 00:07:50,290 --> 00:07:57,450 and now here when we click this button, this order now button, we can execute a function and in this 94 00:07:57,450 --> 00:08:05,500 function, we dispatch a Redux action, the orders action, add order 95 00:08:05,580 --> 00:08:10,500 with this action creator. Now there we need to pass two things - the cart items and the total amount. Of course 96 00:08:10,500 --> 00:08:16,680 both is available here, total amount is stored in the cart total amount constant, cart items is this here, 97 00:08:16,680 --> 00:08:23,580 so we just forward this, we forward cart total amount and that should be the second argument, 98 00:08:23,580 --> 00:08:32,420 so as a first argument, actually the cart items, like this. Now please note that with that of course, I'm 99 00:08:32,430 --> 00:08:37,620 forwarding cart items, I'm the storing cart items which are in the array and not in the format I have 100 00:08:37,620 --> 00:08:40,310 it in my cart Redux store. There, 101 00:08:40,380 --> 00:08:48,130 I do have an object but storing such an array of cart items in an order should actually 102 00:08:48,130 --> 00:08:48,900 be fine, 103 00:08:48,970 --> 00:08:52,500 so no need to kind of get that unchanged 104 00:08:52,510 --> 00:08:53,340 object as well, 105 00:08:53,340 --> 00:08:56,690 I'll stick to that array which I now store. 106 00:08:56,720 --> 00:08:58,460 So now we dispatch this, to view it, 107 00:08:58,460 --> 00:09:00,860 we now need to add an orders screen of course 108 00:09:00,980 --> 00:09:06,140 and for that, I also want to add a menu button and a drawer that allows us to get there as an alternative 109 00:09:06,140 --> 00:09:07,520 to our shop screens here.