1 00:00:02,200 --> 00:00:06,300 So we get an always spinning fetching process here 2 00:00:06,520 --> 00:00:14,300 as you can see if you inspect the console, we don't have any errors but we also never get our ingredients 3 00:00:14,570 --> 00:00:20,170 which makes sense because setIngredients which is dispatched once we got the ingredients is never handled 4 00:00:20,170 --> 00:00:21,120 in our reducer, 5 00:00:21,200 --> 00:00:22,640 so time to change this, 6 00:00:22,670 --> 00:00:24,970 the same is true for FETCH_INGREDIENTS_FAILED 7 00:00:25,250 --> 00:00:31,680 So in the burger builder file in the reducers folder, I know when to handle these two new cases. 8 00:00:31,700 --> 00:00:40,010 So first of all, I'll add a case for actionTypes.SET_INGREDIENTS, this is executed whenever we got ingredients 9 00:00:40,010 --> 00:00:41,940 from the server. There 10 00:00:41,960 --> 00:00:45,950 I want to return a new state and I'll copy the old state first 11 00:00:45,950 --> 00:00:51,570 for that reason and then I need to set my ingredients. Here, 12 00:00:51,620 --> 00:01:00,350 ingredients should be set to action.ingredients and I know that I receive these ingredients because 13 00:01:00,350 --> 00:01:06,860 in the burger builder action file where we have setIngredients, I do pass this ingredients property. 14 00:01:06,860 --> 00:01:13,300 So now I initialize where I set my ingredients and theoretically, we could execute this action or dispatch 15 00:01:13,300 --> 00:01:14,770 this action whatever we want, 16 00:01:14,870 --> 00:01:22,100 so we could also execute this, set this with any set of ingredients with any javascript object representing 17 00:01:22,130 --> 00:01:26,420 our ingredients at any point of time we want, for example to reset the current people 18 00:01:26,430 --> 00:01:28,180 burger. Here however, 19 00:01:28,220 --> 00:01:30,900 I just want to use it to initialize our ingredients. 20 00:01:31,370 --> 00:01:34,350 Now with that, I call setIngredients, 21 00:01:34,370 --> 00:01:41,750 I then also want to handle the other case that the fetching of ingredients failed, there 22 00:01:41,750 --> 00:01:49,880 I will also return new state where I copy the old state and then I of course also need to set my error 23 00:01:49,880 --> 00:01:53,340 here and I want to set it to true, so error 24 00:01:53,480 --> 00:01:54,550 true. 25 00:01:55,100 --> 00:02:01,910 Now one important thing, when we call set ingredients here, I want to set my error to false to reset it 26 00:02:02,060 --> 00:02:04,040 in case we had an error earlier 27 00:02:04,130 --> 00:02:06,950 and now don't have it anymore, so I'll set my error to 28 00:02:07,060 --> 00:02:08,090 false here. 29 00:02:08,090 --> 00:02:11,790 So with that, we added our reducer logic, 30 00:02:11,810 --> 00:02:14,040 now we needed to connect our container, 31 00:02:14,360 --> 00:02:19,760 so I'll head over to the burger builder file and there, at the bottom of this container, 32 00:02:19,790 --> 00:02:26,140 we no longer only need the ingredients, we also need to get information about a potential error. 33 00:02:26,390 --> 00:02:29,770 So here I want to get my error from state 34 00:02:30,020 --> 00:02:32,930 and now there, the error property. 35 00:02:33,080 --> 00:02:36,830 Keep in mind, thus far we have no different slices of state, 36 00:02:36,830 --> 00:02:38,330 we only have one reducer, 37 00:02:38,330 --> 00:02:40,090 we're not combining any. 38 00:02:40,370 --> 00:02:43,270 So with that I have my error, 39 00:02:43,520 --> 00:02:50,040 now one other thing we have is we never dispatch our initIngredients action, 40 00:02:50,120 --> 00:02:52,400 this one which actually reaches out to the web, 41 00:02:52,610 --> 00:02:54,200 we never dispatch this 42 00:02:54,200 --> 00:02:56,570 so this will never get initialized. 43 00:02:56,630 --> 00:03:01,530 So I also want to be able to dispatch that from the burger builder 44 00:03:01,580 --> 00:03:05,910 So I'll add a new property here to mapDispatchToProps, 45 00:03:05,980 --> 00:03:07,850 I'll name it 46 00:03:07,850 --> 00:03:17,430 onInitIngredients and I'll dispatch my burger builder actions here and I need to add the burger builder actions 47 00:03:17,430 --> 00:03:20,820 to the index.js file where I bundled them. Here, 48 00:03:20,910 --> 00:03:22,630 I need to add 49 00:03:22,650 --> 00:03:24,280 initIngredients. 50 00:03:24,330 --> 00:03:31,170 So now, I can reach that from my burger builder container file, initIngredients and execute it. 51 00:03:31,170 --> 00:03:37,880 Now the last step is to call onInitIngredients in our componentDidMount method here, 52 00:03:38,190 --> 00:03:46,790 so there I will now execute this.props.onInitIngredients, like this and this should execute this, dispatch 53 00:03:46,790 --> 00:03:51,180 this action and hopefully successfully fetch our ingredients. 54 00:03:51,180 --> 00:03:57,570 Last but not least, we did add this error property to map it to our error state, 55 00:03:57,570 --> 00:04:05,170 now of course I also need to use it and I can simply search for all occurrences of state.error 56 00:04:05,300 --> 00:04:09,580 in my file here, these are the places where I need to use, 57 00:04:09,600 --> 00:04:11,350 well except for mapStateToProps, 58 00:04:11,420 --> 00:04:17,780 so this place here is the place where I now need to call this.props.error because now we're receiving 59 00:04:17,780 --> 00:04:19,440 this as props. With that, 60 00:04:19,440 --> 00:04:24,950 let's save all files and if we go back to our application, let's have a look if we got any errors if 61 00:04:24,950 --> 00:04:27,160 we reload the app, 62 00:04:27,400 --> 00:04:28,770 that looks good to me, 63 00:04:28,770 --> 00:04:30,610 we got a burger here. 64 00:04:30,840 --> 00:04:37,830 Let's now have a look at the redux dev tools, we see setIngredients was executed and did set up our 65 00:04:37,830 --> 00:04:45,090 ingredients and now we can start adding ingredients again and we can also enter the order process here, 66 00:04:45,240 --> 00:04:47,020 this is all working fine. 67 00:04:47,070 --> 00:04:49,580 Last I want to check if error handling works, 68 00:04:49,730 --> 00:04:56,680 so let me head over to my burger builder action creator and let's mess up this URL here, 69 00:04:56,940 --> 00:04:57,890 let's save it 70 00:04:58,710 --> 00:05:02,240 and this also still works as it should. 71 00:05:02,250 --> 00:05:03,230 So this is great, 72 00:05:03,240 --> 00:05:08,550 we can see error handling with our higher order components still works due to us using one and the same 73 00:05:08,550 --> 00:05:09,670 axios instance 74 00:05:09,720 --> 00:05:13,990 and now we can move on to the other places where we need to use asynchronous code. 75 00:05:14,040 --> 00:05:16,950 The next place of course is when we want to order a burger.