1 00:00:02,200 --> 00:00:04,450 We prepared our folder structure, 2 00:00:04,480 --> 00:00:10,240 let's now create these action creators and I'll start in the burger builder because that's the functionality 3 00:00:10,450 --> 00:00:11,950 we in theory already have 4 00:00:12,070 --> 00:00:14,860 and I want to unbreak my app again. 5 00:00:15,200 --> 00:00:19,750 So in here, I first of all need to import my action types 6 00:00:19,750 --> 00:00:26,860 so in the burger builder file in the actions folder, here I'll navigate to /actionTypes referring 7 00:00:26,950 --> 00:00:33,960 to that javascript files in the actionTypes javascript files. And then I'll export a constant which I'll call 8 00:00:34,060 --> 00:00:35,280 addIngredients 9 00:00:35,440 --> 00:00:41,450 following that pattern of naming my action creators just as the identifiers 10 00:00:41,560 --> 00:00:45,770 but not all caps with underscores but in camel case. 11 00:00:46,220 --> 00:00:48,640 So addIngredient is the action creator 12 00:00:48,640 --> 00:00:51,730 for yes you guessed it, adding an ingredient 13 00:00:51,940 --> 00:00:58,210 and if we inspect the place where we actually dispatch such an action, which is in the burger builder 14 00:00:58,210 --> 00:01:06,370 container, there we will see that if we scroll to the bottom, on ingredient added passes us the name 15 00:01:06,370 --> 00:01:09,320 of the ingredient as a payload. 16 00:01:09,340 --> 00:01:12,320 So we have this extra ingredient named property 17 00:01:12,430 --> 00:01:17,650 and I want to keep that in my action creator or in the action created in the action creator, I should 18 00:01:17,650 --> 00:01:23,790 say, so that the existing code in all the other places, for example the reducer doesn't break. 19 00:01:24,040 --> 00:01:29,650 So we need to set up this ingredient name and we can expect to get that ingredient name as an input 20 00:01:29,770 --> 00:01:32,190 to the action creator for that reason. 21 00:01:32,200 --> 00:01:37,990 So addIngredient is an arrow function where I actually received the name of ingredient which should be 22 00:01:37,990 --> 00:01:47,230 added and where I then will return a javascript object which will have this ingredient name property 23 00:01:47,650 --> 00:01:49,470 where I assigned a name I get, 24 00:01:49,570 --> 00:01:55,780 and of course we have that mandatory type property where I reach out to my actionTypes and pick 25 00:01:55,840 --> 00:02:01,210 addIngredient. And now, I'll simply duplicate this action creator to create a second one, 26 00:02:01,210 --> 00:02:04,000 this one will be called removeIngredient 27 00:02:04,120 --> 00:02:09,880 and here, if we have a look at the burger builder again, we also received the ingredient name of the ingredient 28 00:02:09,880 --> 00:02:18,520 where we want to remove one so I can also, where I should also accept this name here and basically emit 29 00:02:18,610 --> 00:02:26,080 or dispatch return the same action as for addIngredient, just change the identifier, the type to remove 30 00:02:26,080 --> 00:02:31,360 ingredient and that's the burger builder action file finished, 31 00:02:31,360 --> 00:02:35,620 now we can use these action creators. For our app to not break, 32 00:02:35,620 --> 00:02:41,680 we also have to go into the reducers file though and there, we have to update our import path where we 33 00:02:41,680 --> 00:02:43,150 get our actionTypes. 34 00:02:43,150 --> 00:02:44,970 It's no longer /actions, 35 00:02:45,100 --> 00:02:50,800 instead we have to go up one folder into the actions folder and then pick the action types file there, 36 00:02:51,100 --> 00:02:57,360 again as always omitting the file extension. With that, the reducer file is prepared too, 37 00:02:57,640 --> 00:03:03,640 obviously we still need to update our store where we create it, where we point to the reducer because 38 00:03:03,700 --> 00:03:06,200 we moved the reducer into a subfolder. 39 00:03:06,430 --> 00:03:12,120 So in the index.js file, we no longer import reducer from the store folder, 40 00:03:12,280 --> 00:03:17,490 instead there we have to go into the reducers folder and then pick the burger builder. 41 00:03:17,590 --> 00:03:19,480 Soon I'll combine all reducers 42 00:03:19,540 --> 00:03:25,520 but right now I only got one, the burger builder here, so I'll name this burger builder reducer 43 00:03:25,540 --> 00:03:31,000 and for now, that's my only reducer, so I'll pick this and pass it to create store. 44 00:03:31,030 --> 00:03:40,120 Last but not least I have to update my burger builder container where I map my state, here where I dispatch 45 00:03:40,300 --> 00:03:41,140 actions, 46 00:03:41,200 --> 00:03:43,560 I no longer dispatch them directly, 47 00:03:43,600 --> 00:03:49,750 instead I want to use my action creators. So I'll go all the way up to the top where I import my action 48 00:03:49,750 --> 00:03:52,080 types and I no longer do that, 49 00:03:52,100 --> 00:03:57,790 instead I'll import my actions or maybe my burger builder actions 50 00:03:57,880 --> 00:04:02,600 if we want to be super precise about the name, the name of course is up to you, from 51 00:04:02,720 --> 00:04:09,730 and now I'll again navigate into the store folder and there to actions and now I want to have one central file 52 00:04:09,730 --> 00:04:10,890 from which I can import, 53 00:04:11,050 --> 00:04:11,980 so I'll name it 54 00:04:12,070 --> 00:04:13,180 index.js 55 00:04:13,230 --> 00:04:15,130 in the actions folder. 56 00:04:15,460 --> 00:04:18,400 and there, just as shown in the last module, 57 00:04:18,400 --> 00:04:25,720 I want to group my exports. So I'll export everything from ./BurgerBuilder and the same 58 00:04:25,720 --> 00:04:31,920 later on from the order.js file and what I want to export from burger builder is of course 59 00:04:31,960 --> 00:04:37,180 addIngredient and removeIngredient and I just structured it over multiple lines to make it very easy 60 00:04:37,330 --> 00:04:39,820 to read, like this. 61 00:04:39,820 --> 00:04:45,400 So now with that index.js file existent, I can go back to the burger builder container and 62 00:04:45,400 --> 00:04:48,880 adjust my import to point to actions index. 63 00:04:48,880 --> 00:04:53,500 Actually due to our workflow set up here, you can even omit index, 64 00:04:53,500 --> 00:04:55,990 it will automatically pick the index.js file 65 00:04:56,020 --> 00:05:01,460 if you point at a folder, but I'll be very clear and add it, but again index could be omitted here. 66 00:05:02,250 --> 00:05:08,480 With that, I got that burger builder actions object in the burger builder container file and I can 67 00:05:08,480 --> 00:05:16,250 use that at the bottom of the file where we dispatch actions here to dispatch the addIngredient action 68 00:05:16,370 --> 00:05:17,190 and important, 69 00:05:17,300 --> 00:05:21,780 we have to pass on our ingredient name to the function we're calling here 70 00:05:22,190 --> 00:05:26,030 and of course I also want to execute an action here. 71 00:05:26,210 --> 00:05:31,240 So burger builder actions, removeIngredient and pass on the ingredient name here 72 00:05:31,250 --> 00:05:37,010 too. These are the two actions I want to dispatch, with that we can save that file 73 00:05:37,040 --> 00:05:40,990 and if all files have been saved, the application now should work again. 74 00:05:41,300 --> 00:05:44,440 We can actually check this out, in the running application, 75 00:05:44,720 --> 00:05:47,850 if we start adding burgers again, 76 00:05:47,960 --> 00:05:53,280 ingredients excuse me and removing them, we should see that it works just as before 77 00:05:53,390 --> 00:06:00,920 but now of course, with the help of our action creators. So that's the first step, we move towards this action 78 00:06:00,920 --> 00:06:02,210 creators set up, 79 00:06:02,240 --> 00:06:06,970 we of course did this to run asynchronous code though, so that will be the next steps, 80 00:06:07,100 --> 00:06:13,730 adding action creators for orders, so that we ultimately can handle the whole ordering process through redux.