1 00:00:02,170 --> 00:00:09,740 So let's combine our reducers, we got two, burger builder and order. So in the index.js file in our application, 2 00:00:09,760 --> 00:00:12,090 now it's time to combine reducers. 3 00:00:12,100 --> 00:00:18,770 So first of all, let's import combineReducers from the redux package, then I want to import my second 4 00:00:18,800 --> 00:00:30,710 reducer so I'll import my orderReducer from ./storeReducersOrder and now I can combine both. 5 00:00:30,730 --> 00:00:39,020 So what I'll do is I'll creates a new constant here, routeReducer because they are combined into one 6 00:00:39,080 --> 00:00:44,900 reducer as you learned, call combineReducers here and pass a javascript object. 7 00:00:45,220 --> 00:00:53,260 And there, I can now just pass burger builder and assign that burger builder reducer and order and assign 8 00:00:53,350 --> 00:00:54,630 the order reducer, 9 00:00:54,690 --> 00:01:00,460 the two things we import and the root reducer is then what I passed to create store. With that, the whole 10 00:01:00,460 --> 00:01:05,550 application will break because now we have different slices of state, burger builder and order. 11 00:01:05,860 --> 00:01:12,280 So I need to go to my containers and update, in the burger builder container, the bottom where I reach out 12 00:01:12,280 --> 00:01:15,070 to state ingredients total price and error, 13 00:01:15,250 --> 00:01:25,230 this should all be state burger builder ingredients and the same for total price and error. In the checkout 14 00:01:25,270 --> 00:01:31,420 container where I also get the ingredients, that should be state burger builder ingredients, in the 15 00:01:31,420 --> 00:01:35,420 contact data container where I reach out to the ingredients 16 00:01:35,530 --> 00:01:40,070 too, this should also be state burger builder ingredients in state burger builder 17 00:01:40,150 --> 00:01:49,030 total price but the loading here is coming from the orders, so this should be state orders loading to 18 00:01:49,630 --> 00:01:54,340 use, oh just order excuse me, to just order to use that property 19 00:01:54,370 --> 00:02:01,500 so just state order or loading. With that we can save all these files and go back to the application, looks 20 00:02:01,530 --> 00:02:01,850 good, 21 00:02:01,850 --> 00:02:04,270 this still works. If we now continue, 22 00:02:04,440 --> 00:02:08,900 let's see if we can successfully dispatch an action here. 23 00:02:08,940 --> 00:02:13,560 So here I'll enter some test demo data, 24 00:02:13,920 --> 00:02:19,890 just something we can submit, test@test.com, let's click order. 25 00:02:19,890 --> 00:02:22,400 We saw the loading screen, 26 00:02:22,890 --> 00:02:26,630 we get something back from the server, that's looking good, 27 00:02:26,790 --> 00:02:28,080 let's have a look at redux, 28 00:02:28,110 --> 00:02:30,920 I see at least one thing which won't work as expected, 29 00:02:31,170 --> 00:02:36,450 we get purchaseBurgerStart and we saw the spinner for a second, so that worked and purchaseBurgerSuccess 30 00:02:36,450 --> 00:02:44,760 and in success, we see all that the orders were updated, that we added this new object here where 31 00:02:44,760 --> 00:02:49,400 we have our ingredients and then stored some data in it. 32 00:02:49,650 --> 00:02:50,980 If we have a look at the state, 33 00:02:51,030 --> 00:02:52,740 we can expand our orders, 34 00:02:52,830 --> 00:02:57,460 have a look at that order and we see that this order here, 35 00:02:57,520 --> 00:03:05,480 I think I need to make this a bit broader to see all of it has an ID which is not correct, 36 00:03:05,520 --> 00:03:09,600 I should have extracted the name property so that's one thing we need to adjust. 37 00:03:09,840 --> 00:03:13,580 Besides that, all of that seems to be working 38 00:03:13,590 --> 00:03:15,000 rather good, 39 00:03:15,000 --> 00:03:17,460 of course we're not redirected once we're done. 40 00:03:17,670 --> 00:03:22,440 So this id fix and being redirected, that are the things I want to fix, 41 00:03:22,470 --> 00:03:25,800 let's just check quickly if it did work on the backend too 42 00:03:25,800 --> 00:03:29,650 but obviously it did, we wouldn't have gotten an id otherwise. 43 00:03:29,730 --> 00:03:31,400 So that's looking all good, 44 00:03:31,590 --> 00:03:33,030 we got a burger here. 45 00:03:33,390 --> 00:03:35,690 Delivery method wasn't passed on I see, 46 00:03:35,790 --> 00:03:37,760 so that is something we should also fix 47 00:03:37,950 --> 00:03:43,650 but besides that, looking good. So let's fix all these things and let's then see what else we can do in our 48 00:03:43,650 --> 00:03:44,870 application. 49 00:03:44,880 --> 00:03:47,250 Let's quickly fix the issues we found, 50 00:03:47,310 --> 00:03:52,260 one is in the contact data here where we submit the form, 51 00:03:52,260 --> 00:03:58,940 the thing is, if we never adjust the dropdown value then the value is empty 52 00:03:59,220 --> 00:04:00,680 and it shouldn't be, 53 00:04:00,750 --> 00:04:05,760 it should be let's say fastest, by default. 54 00:04:06,060 --> 00:04:09,950 So I just added this to the value property in the delivery method 55 00:04:09,990 --> 00:04:12,530 object in the state of the contact data, 56 00:04:12,720 --> 00:04:17,600 that's one important adjustment to have this work correctly. Now 57 00:04:17,670 --> 00:04:26,130 one other thing is in the reducer in order.js, when we have a success and we get the id, here action order 58 00:04:26,160 --> 00:04:33,360 ID, that's the wrong ID because in the order file in the actions folder where we pass on the ID, I pass 59 00:04:33,360 --> 00:04:35,390 on response data as the ID 60 00:04:35,610 --> 00:04:41,730 but instead, we just saw in the log that its on the name property on the data, that is the ID we want 61 00:04:41,730 --> 00:04:42,610 to store. 62 00:04:43,170 --> 00:04:49,290 But with that, we have this working the only missing thing is that we redirect it, re-route and that is 63 00:04:49,290 --> 00:04:51,280 something I'll do in the next lecture.