1 00:00:00,680 --> 00:00:06,240 Unless section and we were able to successfully test out our Fettes user action creator we're now going 2 00:00:06,240 --> 00:00:10,410 to come back to this action creator and do a little bit of a refactor to it. 3 00:00:10,410 --> 00:00:16,940 At present it's still making use of a promise that is being returned by Axel's get remember anytime 4 00:00:17,010 --> 00:00:19,530 we make a request always returns promise. 5 00:00:19,560 --> 00:00:25,450 We can get a little notification of when that request has been resolved by changing on the dot then. 6 00:00:25,680 --> 00:00:30,740 So at present we're saying after this request has been resolved and we get a response back dispatch 7 00:00:30,730 --> 00:00:33,540 an action containing that response. 8 00:00:33,600 --> 00:00:35,710 So payload of rest right here. 9 00:00:35,940 --> 00:00:40,290 Now the code that we have on the screen at present definitely works without a doubt. 10 00:00:40,410 --> 00:00:44,400 But when you really look at this thing man it is awfully ugly isn't it. 11 00:00:44,400 --> 00:00:45,820 Like that thing is just ugly. 12 00:00:45,840 --> 00:00:47,770 There's just so many lines to it. 13 00:00:47,790 --> 00:00:52,590 It's really tough to look at and get a very succinct understanding or a very quick understanding of 14 00:00:52,590 --> 00:00:53,690 what's going on here. 15 00:00:54,000 --> 00:00:59,990 So we're going to really factor this action creator to use the async await syntax instead. 16 00:01:00,120 --> 00:01:05,860 And simultaneously we're also going to kind of use aero functions in a slightly tricky way. 17 00:01:06,030 --> 00:01:09,250 That's going to also kind of condense down this extra function here. 18 00:01:09,280 --> 00:01:09,970 Right. 19 00:01:10,710 --> 00:01:12,010 So let's get to it. 20 00:01:12,030 --> 00:01:17,320 We're going to do the three factor one step at a time one step at a time. 21 00:01:17,370 --> 00:01:21,900 The first thing we're going to do is we're going to look at the outside aero function. 22 00:01:22,020 --> 00:01:26,150 So the arrow function that is being assigned to the fecche user variable. 23 00:01:26,370 --> 00:01:28,080 So here's the arrow function. 24 00:01:28,080 --> 00:01:34,500 We've got the argument list we've got the arrow and then we've got the inner curly braces inside the 25 00:01:34,500 --> 00:01:35,400 curly braces. 26 00:01:35,400 --> 00:01:40,530 We have a single javascript expression which is to define a function. 27 00:01:40,680 --> 00:01:42,550 So we have got this single expression. 28 00:01:42,780 --> 00:01:45,500 Soon as we define it we then return it. 29 00:01:45,510 --> 00:01:52,020 So the first little refactor we're going to do we're going to exploit a little rule that are that exists 30 00:01:52,110 --> 00:01:54,930 around aero functions with an arrow function. 31 00:01:54,960 --> 00:02:01,200 If you have curly braces and the return statement and the return statement is being used with a single 32 00:02:01,200 --> 00:02:01,830 expression. 33 00:02:01,830 --> 00:02:08,370 So in other words there's like no other code inside if you're like say one plus one equals the variable 34 00:02:08,370 --> 00:02:09,230 two. 35 00:02:09,240 --> 00:02:12,070 So if we had this this would be two separate expressions. 36 00:02:12,150 --> 00:02:13,970 But right now we just have one right. 37 00:02:14,130 --> 00:02:15,580 So we'll just have one expression. 38 00:02:15,630 --> 00:02:23,580 You can remove the curly braces and the return keyword like so. 39 00:02:23,610 --> 00:02:27,980 So this code right here completely equivalent to what we just have. 40 00:02:28,170 --> 00:02:34,010 We still have an arrow function that automatically returns the function that we define inside of here. 41 00:02:34,020 --> 00:02:37,860 So just to prove to you that it still works I'm going to save this code right you're going to save this 42 00:02:37,860 --> 00:02:40,870 file and it will go test it inside the browser again. 43 00:02:41,250 --> 00:02:45,190 So I will go back over or refresh and yes everything still works over here. 44 00:02:45,420 --> 00:02:45,650 OK. 45 00:02:45,660 --> 00:02:47,710 So refactor one good. 46 00:02:48,330 --> 00:02:55,140 Now I'm going to take this function key word that we defined and rather than define a function keyword 47 00:02:55,410 --> 00:02:58,260 we're going to return an arrow function instead. 48 00:02:58,390 --> 00:03:04,710 OK so this is really just purely stylistic no difference between using a function keyword or an arrow 49 00:03:04,710 --> 00:03:07,250 function for this inner one right here. 50 00:03:07,290 --> 00:03:11,940 So rather than function cuarto over the Late thought and then on the other side of the argument list 51 00:03:12,240 --> 00:03:14,630 I'll put down my arrow like so. 52 00:03:15,360 --> 00:03:20,490 So now when I save this well I said I want to save it just yet because my do pretty or kicks in and 53 00:03:20,520 --> 00:03:21,730 refactor everything. 54 00:03:21,900 --> 00:03:26,480 But if you just look at what I have on the screen right now you'll see that I've got the argument list 55 00:03:27,000 --> 00:03:29,270 and then the arrow function body. 56 00:03:29,280 --> 00:03:33,870 Now when we just have a single argument we don't need the dispatch or we don't need the parentheses 57 00:03:33,930 --> 00:03:35,180 around that argument. 58 00:03:35,310 --> 00:03:40,400 So I'm not going to remove the parentheses and then when you look at what I have on the screen now. 59 00:03:40,680 --> 00:03:46,850 Well I can really just move this separate function declaration up to the same line as the previous one. 60 00:03:46,850 --> 00:03:48,420 There's no reason I can't. 61 00:03:48,420 --> 00:03:50,310 So I'm going to take this. 62 00:03:50,310 --> 00:03:55,510 Put it on the line right above it and then do to just what I have on the screen right here. 63 00:03:55,590 --> 00:04:01,850 So I to save this and I get tested inside the browser again just to prove to you that this still works. 64 00:04:01,950 --> 00:04:06,160 So I'm going to go back over a refresh of the page and yet still have the action. 65 00:04:06,270 --> 00:04:08,340 So everything is still working. 66 00:04:08,640 --> 00:04:14,370 Now at this point I want to say yes this code looks a little bit strange but it still is 100 percent 67 00:04:14,370 --> 00:04:16,110 valid javascript. 68 00:04:16,110 --> 00:04:18,140 Now let's do the last refactor here. 69 00:04:18,210 --> 00:04:23,400 Last factor we still are making use of the then statement in here. 70 00:04:23,400 --> 00:04:29,730 So we're still using promises rather than using then and then having this like extra function in here. 71 00:04:29,910 --> 00:04:35,730 I want to use the ace async await syntax inside of this arrow function instead. 72 00:04:36,070 --> 00:04:41,820 So the last step to the key factor we're going to find the function that is currently generating some 73 00:04:41,880 --> 00:04:47,190 async logic or generating a promise will market as being async. 74 00:04:47,490 --> 00:04:53,430 We will then replace the actual promise with the weight keyword and then finish the rest of the refactor 75 00:04:53,490 --> 00:04:57,960 just like we did previously when we first learned about a single weight. 76 00:04:58,020 --> 00:05:03,470 So the function that contains a promise is this one right here. 77 00:05:03,510 --> 00:05:11,040 So right before the argument list I'm going to place the async keyword so I'll say async dispatch like 78 00:05:11,040 --> 00:05:12,160 so. 79 00:05:12,480 --> 00:05:16,910 So async dispatch I know this looks very strange to have the two words in a row. 80 00:05:17,040 --> 00:05:22,170 It might look a little bit more straightforward if I put the parentheses on like so but really no need 81 00:05:22,170 --> 00:05:22,760 for it. 82 00:05:22,770 --> 00:05:23,990 Same thing. 83 00:05:24,780 --> 00:05:30,020 Now inside of the actual body I'm going to find all the different promises and mark them with the a 84 00:05:30,020 --> 00:05:31,180 weight key word. 85 00:05:31,510 --> 00:05:37,080 It's going to first condense this thing down to a single line and then say a weight axial start get 86 00:05:37,980 --> 00:05:45,870 and then I'm going to replace this entire Then statement down here and assign whatever the actual request 87 00:05:45,870 --> 00:05:49,140 gets resolved with with an assignment to a variable. 88 00:05:49,190 --> 00:05:51,800 So say Konst rez equals awaits. 89 00:05:51,910 --> 00:05:53,390 Actually Alstyne gets. 90 00:05:53,520 --> 00:05:59,670 And then the last step I can remove the entire dot then statement and only keep around the actual body 91 00:05:59,670 --> 00:06:02,530 of the function which is the dispatch statement. 92 00:06:02,580 --> 00:06:08,190 So I would move the entire dot then I'll make sure I clean up the extra parentheses on the right hand 93 00:06:08,190 --> 00:06:10,220 side too like so. 94 00:06:10,520 --> 00:06:16,260 And in the very last thing I make sure I indent it correctly and at the end of the day we are left with 95 00:06:16,530 --> 00:06:20,790 just this right here in Seoul save it. 96 00:06:20,880 --> 00:06:22,500 Go back over to the browser. 97 00:06:22,500 --> 00:06:23,450 There's a refresh. 98 00:06:23,460 --> 00:06:27,840 And yes everything is still working the exact same way it was before. 99 00:06:27,870 --> 00:06:29,700 So pretty distinct change right. 100 00:06:29,700 --> 00:06:31,930 Like that's quite the factor. 101 00:06:31,980 --> 00:06:38,010 So to be 100 percent clear everything we're looking at right here 100 percent equivalent to what we 102 00:06:38,010 --> 00:06:38,960 had before. 103 00:06:39,060 --> 00:06:45,840 Like all of this same thing we are still returning a function that makes a request and then only after 104 00:06:45,840 --> 00:06:48,590 the request is completed do we dispatch an action. 105 00:06:48,660 --> 00:06:55,590 Just using a highly modified bit of syntax that really just cleans up the function the entire action 106 00:06:55,590 --> 00:06:56,560 creator. 107 00:06:56,580 --> 00:07:01,860 So I think that personally this is a lot easier to read if you're sitting there thinking Stephen you're 108 00:07:01,860 --> 00:07:02,310 crazy. 109 00:07:02,310 --> 00:07:03,660 This is definitely like. 110 00:07:04,050 --> 00:07:05,100 Absolutely not. 111 00:07:05,100 --> 00:07:06,080 Easier to read. 112 00:07:06,270 --> 00:07:10,100 Well you know what you are entitled to your opinion and I don't disagree with you. 113 00:07:10,200 --> 00:07:15,900 The very first time you look at this compacted syntax you're going to think to yourself This looks weird. 114 00:07:15,930 --> 00:07:17,360 I'm not familiar with it. 115 00:07:17,400 --> 00:07:20,120 It makes no sense to me so I don't want to use it at all. 116 00:07:20,190 --> 00:07:22,560 But I'll tell you what I encourage you to use it. 117 00:07:22,560 --> 00:07:28,380 Just give it a shot and after a little bit of time of working with this compact syntax you will get 118 00:07:28,380 --> 00:07:29,220 used to it. 119 00:07:29,220 --> 00:07:32,060 So if it looks weird it's just because you haven't seen it before. 120 00:07:32,070 --> 00:07:36,870 I encourage you to work with it a little bit and as soon as you do you're going to have a much better 121 00:07:36,870 --> 00:07:38,430 sense of what's going on here. 122 00:07:38,430 --> 00:07:39,290 OK. 123 00:07:40,140 --> 00:07:45,990 Now I want to say just one last like possible refactor we could go like really overboard. 124 00:07:46,320 --> 00:07:51,630 So I'm going to like make a duplicate here and then do a quick refactor just to show you how deep we 125 00:07:51,630 --> 00:07:52,480 can really go. 126 00:07:52,650 --> 00:07:59,190 So I don't really need to assign the response Torez I could just take the entire request and then assign 127 00:07:59,190 --> 00:08:01,970 it to the payload like that right there. 128 00:08:02,250 --> 00:08:06,990 If I do this I did no longer need the actual semi-colon at the end. 129 00:08:07,020 --> 00:08:12,630 I don't need the I'm not returning anything from here and I only have a single expression so I can also 130 00:08:12,840 --> 00:08:19,530 delete the overall curly braces and then when I see that we get a little bit of an error message I probably 131 00:08:19,530 --> 00:08:22,340 made a little typo somewhere here here but you know we'll just let that go. 132 00:08:22,650 --> 00:08:27,510 Anyways the point I'm trying to make is that you can really take this and still like mess around with 133 00:08:27,510 --> 00:08:29,160 it a lot more than we have already. 134 00:08:29,400 --> 00:08:30,950 But you really don't have to. 135 00:08:30,960 --> 00:08:34,520 I encourage you to just say like this is a good starting point right here. 136 00:08:34,530 --> 00:08:36,080 That's all I'm really trying to say. 137 00:08:36,540 --> 00:08:36,910 OK. 138 00:08:36,930 --> 00:08:41,610 So I think that this is enough for all the other action creators were going to write and this course 139 00:08:41,610 --> 00:08:44,520 we're going to end up with something that looks pretty similar to this right here. 140 00:08:44,550 --> 00:08:49,970 So we will definitely get the opportunity to write many more action creators that look just like this. 141 00:08:49,980 --> 00:08:52,030 So with that mind let's take a quick break. 142 00:08:52,050 --> 00:08:54,870 We'll come back to the next section and continue with our application.