1 00:00:02,230 --> 00:00:06,430 Time to see redux in action in a real project. 2 00:00:06,520 --> 00:00:08,980 So I'm back in the burger builder in the state 3 00:00:08,980 --> 00:00:10,560 we last left it at, 4 00:00:10,780 --> 00:00:17,620 and now let's see where we can add some redux magic to it to make state management a bit easier. For 5 00:00:17,620 --> 00:00:18,210 that, 6 00:00:18,370 --> 00:00:25,060 in this first lecture, I want to analyze our existing project to find out which kind of state we might 7 00:00:25,060 --> 00:00:26,180 want to manage 8 00:00:26,220 --> 00:00:33,970 through redux. So let's dive into our containers because thankfully, we already have a structure where all 9 00:00:33,970 --> 00:00:41,080 state management takes place in containers and therefore we don't need to dig through all the components, 10 00:00:41,080 --> 00:00:44,060 it's really just state we manage in containers 11 00:00:44,140 --> 00:00:47,310 we probably want to manage to relax in the future. 12 00:00:47,320 --> 00:00:49,310 Let's start with the burger builder. 13 00:00:49,450 --> 00:00:55,900 If we inspect the state in this burger builder class here, we see that we got the ingredients of the 14 00:00:55,900 --> 00:01:01,990 burger we're currently building, price and then a couple of state fields 15 00:01:01,990 --> 00:01:09,640 regarding the current status we have when it comes to purchasing that burger, for example purchasing 16 00:01:09,910 --> 00:01:17,380 is a state we use if we scroll down to the render method, we use to conditionally show or hide that modal. 17 00:01:17,500 --> 00:01:20,710 So here state.purchasing is used for that 18 00:01:20,890 --> 00:01:30,370 with that orderSummary. Loading is used to display a spinner and error is also used here to render different 19 00:01:30,370 --> 00:01:31,250 content. 20 00:01:31,480 --> 00:01:39,490 So if we have a look at our state, we could argue that purchasing, loading and error are kind of 21 00:01:39,610 --> 00:01:41,570 local UI state, 22 00:01:41,770 --> 00:01:47,620 we use them here to determine whether we show a modal, whether we show an error message. 23 00:01:47,620 --> 00:01:52,870 We could of course also manage that through redux and I won't say that this would be bad, 24 00:01:52,870 --> 00:01:58,270 not at all, you can definitely manage everything through redux but there also might not be a necessity 25 00:01:58,270 --> 00:01:59,310 to do so. 26 00:01:59,620 --> 00:02:05,410 So what's definitely interesting to manage redux though is the ingredients and the total price of the 27 00:02:05,410 --> 00:02:07,360 burger, purchasable, 28 00:02:07,390 --> 00:02:15,040 if we have a look at where we use that, we can see that if we scroll down we passed purchasable to our 29 00:02:15,040 --> 00:02:19,920 build controls and there to unlock the order button. 30 00:02:20,050 --> 00:02:25,350 So if we inspect the burger build controls component and see what we do with the purchasable props 31 00:02:25,350 --> 00:02:28,230 there, we use it to switch the button here, 32 00:02:28,240 --> 00:02:32,930 the order now button from disabled to enabled and the other way around. 33 00:02:32,950 --> 00:02:36,000 So this also is more the UI state, 34 00:02:36,010 --> 00:02:39,070 we change something on the UI, 35 00:02:39,070 --> 00:02:45,100 it might not be super important for us to manage that through redux, though 36 00:02:45,160 --> 00:02:52,820 of course you could also say purchasable, the value it takes depends in the end on the burger we configured. 37 00:02:52,960 --> 00:02:55,600 So we'll have to see where we add this, 38 00:02:56,050 --> 00:02:57,680 definitely a redux case, 39 00:02:57,700 --> 00:03:00,180 our ingredients and the total price though. 40 00:03:00,610 --> 00:03:01,890 Let's have a look at checkout, 41 00:03:01,920 --> 00:03:08,560 if you go to the check out component, there if we scroll up, we quickly see that we also have ingredients 42 00:03:08,560 --> 00:03:09,710 and price here, 43 00:03:09,880 --> 00:03:16,260 this already a strong case for using redux because here, we have that issue of passing the ingredients through 44 00:03:16,300 --> 00:03:19,910 query params and that would be awesome if we can get rid of that. 45 00:03:20,020 --> 00:03:25,990 It would also be awesome if we in the render method of the checkout component could change the way we 46 00:03:25,990 --> 00:03:33,220 render this route so that we don't have to use this way just to get the ingredients to contact data, instead 47 00:03:33,310 --> 00:03:40,210 once we do actually manage the ingredients state in our redux store, we can just render this component here 48 00:03:40,450 --> 00:03:48,520 and in contact data, we can connect this through the connect higher order component to the redux store 49 00:03:48,520 --> 00:03:50,210 so that we get the ingredients here 50 00:03:50,220 --> 00:03:56,500 too because in the contact data component, if we have a look at the state, we of course got our order form, 51 00:03:56,560 --> 00:04:02,090 all these controls and I want to leave them here because that again is local UI state, 52 00:04:02,260 --> 00:04:07,290 we don't really need information about our form here anywhere else in the application 53 00:04:07,690 --> 00:04:13,780 but we also of course do take advantage of the ingredients which we get through props, so we don't see 54 00:04:13,780 --> 00:04:15,230 them in the state here. 55 00:04:15,310 --> 00:04:22,180 So in the contact data, the state is really just all the UI state here handling the form but we get some 56 00:04:22,180 --> 00:04:28,260 props here which we in the future might directly get from the redux store instead of passing them here 57 00:04:28,330 --> 00:04:35,010 with this workaround we're currently using in the checkout container. Now in the orders component, there 58 00:04:35,020 --> 00:04:42,220 we also have the orders in the state, now the orders are actually fetched from the server and we haven't 59 00:04:42,310 --> 00:04:49,240 learned how to fetch data from a server, how to handle asynchronous actions as HTTP requests of course 60 00:04:49,270 --> 00:04:51,630 are together with redux, 61 00:04:51,670 --> 00:04:58,390 so orders is something I'll take a look at later once we had a closer look into how to handle asynchronous 62 00:04:58,390 --> 00:05:00,110 code in redux too. 63 00:05:00,130 --> 00:05:07,820 For now, let's focus on synchronous code and over the next lectures, let's implement redux, move our state to it and 64 00:05:07,820 --> 00:05:10,190 connect our containers to redux. 65 00:05:10,370 --> 00:05:16,160 Definitely feel free to move on on your own and then solve it together with me over the next lectures 66 00:05:16,280 --> 00:05:23,000 but if you don't feel as comfortable yet, try your best, go as far as you know how to do things and then 67 00:05:23,000 --> 00:05:24,640 we'll build this together.