1 00:00:00,790 --> 00:00:03,750 In last video we ran into a real big nasty error message. 2 00:00:03,770 --> 00:00:08,650 After we implemented a network request inside of our action creator called fecche posts. 3 00:00:08,720 --> 00:00:13,190 So in this video we're going to start to dig a part or pull part this error message and really understand 4 00:00:13,190 --> 00:00:14,130 what's going on. 5 00:00:14,240 --> 00:00:19,880 Now as I mentioned at the end of the last video understanding this error message is really key to understand 6 00:00:19,910 --> 00:00:21,840 a lot of stuff in the world of redux. 7 00:00:21,920 --> 00:00:26,180 It's incredibly likely that at some point you might be asked an interview question about what we're 8 00:00:26,180 --> 00:00:28,220 going to discuss around this error message as well. 9 00:00:28,220 --> 00:00:32,630 So we're going to spend a little bit of time to dive into this error message and really help you understand 10 00:00:32,630 --> 00:00:34,010 exactly what's going on. 11 00:00:34,010 --> 00:00:34,250 All right. 12 00:00:34,250 --> 00:00:36,410 So first off a diagram. 13 00:00:36,600 --> 00:00:38,860 So what's wrong with our fecche post action creator. 14 00:00:39,060 --> 00:00:41,800 Well in reality there's not one thing that is wrong with it. 15 00:00:41,850 --> 00:00:44,570 There's actually two things that are wrong. 16 00:00:44,580 --> 00:00:47,030 We're going to first focus on item number one right here. 17 00:00:47,070 --> 00:00:51,330 So item number one this is the first thing that is wrong with our action creator are action creators 18 00:00:51,360 --> 00:00:57,030 and cider redux are supposed to return plain javascript objects that had a type property and optionally 19 00:00:57,060 --> 00:00:58,210 a payload as well. 20 00:00:58,500 --> 00:01:03,840 But at present we are not returning an action from our action creator. 21 00:01:03,840 --> 00:01:08,400 Now when I say that to you when I say we are not returning a plain javascript object you might flip 22 00:01:08,400 --> 00:01:12,990 back over to your code editor and look at the section creator and say Stephen are we looking at the 23 00:01:12,990 --> 00:01:14,430 same action creator. 24 00:01:14,430 --> 00:01:15,620 You might be thinking. 25 00:01:15,780 --> 00:01:17,880 It sure looks like it to me. 26 00:01:17,880 --> 00:01:20,810 It sure looks like we are returning an object with that type property. 27 00:01:21,000 --> 00:01:23,600 Well in fact no we're not. 28 00:01:23,790 --> 00:01:25,850 Even though it really really looks like. 29 00:01:25,860 --> 00:01:30,720 Any time that we call fecche post right here we are going to return a javascript object that is not 30 00:01:30,810 --> 00:01:36,120 the case even though it really really really really looks like it. 31 00:01:36,120 --> 00:01:37,320 So let me tell you why. 32 00:01:37,340 --> 00:01:41,690 Remember we spoke much earlier in this course about how all of the code that we'd write inside of our 33 00:01:41,690 --> 00:01:42,930 code editor is. 34 00:01:42,950 --> 00:01:46,760 Yes 2015 2016 2017 2018 and so on. 35 00:01:46,760 --> 00:01:54,470 Code the code that you and I write gets transpired down to yes 2015 syntax and that yes 20:15 syntax 36 00:01:54,500 --> 00:01:57,900 is what actually gets executed inside the browser. 37 00:01:58,590 --> 00:02:04,570 So even though this function really really looks like it is returning an object with a type property. 38 00:02:04,620 --> 00:02:09,500 In fact after we transported this to yes 20:15 code we are not. 39 00:02:09,510 --> 00:02:10,730 Let me prove that to you. 40 00:02:10,860 --> 00:02:15,360 All right I'm going to remove that comment right here and then I'm going to highlight everything from 41 00:02:15,420 --> 00:02:21,030 Konst that posts down to the bottom of the file some getting just the function right there and I'm going 42 00:02:21,030 --> 00:02:22,310 to copy that. 43 00:02:22,470 --> 00:02:26,760 Then I'm going to flip back over to my browser and I'm going to open up that tool that we looked at 44 00:02:26,760 --> 00:02:30,910 very briefly much earlier called Babel J US DOT IO. 45 00:02:31,260 --> 00:02:33,050 So this is what is actually transpiring. 46 00:02:33,050 --> 00:02:36,740 Our code down to E.S. 2015 code at the top I'm going to find the. 47 00:02:36,750 --> 00:02:42,220 Try it out button and then I'm going to paste my code on the left hand side. 48 00:02:42,220 --> 00:02:43,660 Now this is really important. 49 00:02:43,660 --> 00:02:49,660 Please make sure that you open up the sidebar over here and Nabl every single preset that you see just 50 00:02:49,660 --> 00:02:53,330 turn every single one of them on like so. 51 00:02:53,440 --> 00:02:57,340 All right then I get a clap set sidebar and I'm going to zoom in just a little bit here. 52 00:02:57,400 --> 00:03:03,310 So inside of our code editor you think that this is the code that we are executing but in fact because 53 00:03:03,310 --> 00:03:09,520 we have specifically the async away syntax here the entire function gets expanded to what you see on 54 00:03:09,520 --> 00:03:10,650 the right hand side. 55 00:03:10,720 --> 00:03:13,110 This tremendously large chunk of code. 56 00:03:13,330 --> 00:03:17,450 And again this is all because we are using that async await syntax. 57 00:03:17,470 --> 00:03:23,680 If you remove the async await like so you see that all that stuff goes away and we essentially condense 58 00:03:23,680 --> 00:03:25,960 down to just the function by itself. 59 00:03:25,960 --> 00:03:32,410 So when I say to you that our action creator is not returning a plain javascript object it is because 60 00:03:32,470 --> 00:03:34,590 we have that async await syntax. 61 00:03:34,630 --> 00:03:41,280 That is why our action creator is not working as expected not going to undo that change and bring that 62 00:03:41,280 --> 00:03:41,880 back up. 63 00:03:41,880 --> 00:03:45,710 I want to show you why it's not working as expected on the right hand side. 64 00:03:45,750 --> 00:03:47,030 You can scroll down a little bit. 65 00:03:47,040 --> 00:03:51,750 I know that this is a real mash of code but I just want you to take a glance at something in particular 66 00:03:51,750 --> 00:03:52,870 inside of your. 67 00:03:53,060 --> 00:03:58,930 So inside of your you'll see a switch statement and you'll see that it has cases 0 and Case 2. 68 00:03:58,950 --> 00:04:04,750 Right here there are some other cases but I just want to focus on cases so in case toof right now noticed 69 00:04:04,780 --> 00:04:06,180 around case 0. 70 00:04:06,210 --> 00:04:13,080 We return the results of calling J some placeholder get and then in case 2 we're going to eventually 71 00:04:13,230 --> 00:04:18,900 kind of return something that looks like it eventually kind of returns are objects that we actually 72 00:04:18,900 --> 00:04:23,140 care about the action that we want to eventually send off to all of our different reducers. 73 00:04:23,400 --> 00:04:26,410 So I'm going to kind of imagine taking this code chunk right here. 74 00:04:26,460 --> 00:04:31,620 I'm going to put it into a diagram and help you understand exactly why this is leading us to a bad result 75 00:04:31,710 --> 00:04:35,580 and eventually that your message that we see inside of our browser. 76 00:04:35,750 --> 00:04:36,310 OK. 77 00:04:36,660 --> 00:04:42,210 So the exam is a little bit confusing but it's a diagram of what is going on when we run our application. 78 00:04:42,450 --> 00:04:45,950 I've got a couple of chunks of code inside of each of these boxes. 79 00:04:45,990 --> 00:04:49,500 First off over here we start at the post list component. 80 00:04:49,500 --> 00:04:54,840 We've got that component did mt life cycle method any time that thing is invoked it calls this Propst 81 00:04:54,960 --> 00:04:56,370 fetch posts. 82 00:04:56,570 --> 00:05:02,370 Now behind the scenes this step right here is probably happening in the reactor redux library. 83 00:05:02,370 --> 00:05:07,830 Remember that anytime that we call an action Creator it returns an action and we must take that action 84 00:05:07,890 --> 00:05:11,980 and send it to the dispatch function on our redux store. 85 00:05:12,120 --> 00:05:15,930 And we did that manually back when we were working in that code Penn. instance. 86 00:05:16,020 --> 00:05:20,550 But then in the last application we worked on we introduced reactor redux and we had said that re-act 87 00:05:20,550 --> 00:05:25,560 redux is going to take our action creators when we pass them off to the connect function and kind of 88 00:05:25,560 --> 00:05:26,450 wrap them up. 89 00:05:26,460 --> 00:05:31,620 So any time that they get calls they're going to essentially return the action and immediately for that 90 00:05:31,620 --> 00:05:33,990 automatically into the dispatch function. 91 00:05:33,990 --> 00:05:39,430 So like I said this separate year probably happening somewhere inside the reactor redux library. 92 00:05:39,480 --> 00:05:45,750 So we call our action Krater fetch posts and then whatever that thing returns we immediately dispatch 93 00:05:45,750 --> 00:05:46,680 it. 94 00:05:46,680 --> 00:05:52,560 And so as far as you and I are concerned when we look at just our code editor and we see just this function 95 00:05:52,560 --> 00:05:57,960 right here you and I are probably thinking oh ok you know reactor redux probably calls this function 96 00:05:59,100 --> 00:06:01,040 and then we make a request right here. 97 00:06:01,200 --> 00:06:05,260 And you know a way a keyword does something you know we don't really know. 98 00:06:05,270 --> 00:06:11,370 But it does something and then basically right after that we return an object that is the ideal flow 99 00:06:11,460 --> 00:06:13,600 and that might be what you think is happening. 100 00:06:13,860 --> 00:06:17,140 But in fact it's not based upon what we just saw over here. 101 00:06:17,140 --> 00:06:19,100 Here is what is actually happening. 102 00:06:19,920 --> 00:06:24,030 Now on the right hand side you'll notice I dramatically simplified the code here in just kind of broke 103 00:06:24,030 --> 00:06:26,710 it down to that case 0 and case 1. 104 00:06:26,730 --> 00:06:29,960 And I think it actually was called Case 2 but you get the idea. 105 00:06:30,000 --> 00:06:35,550 So this is what is really occurring behind the scenes component and now it gets called we call fetch 106 00:06:35,550 --> 00:06:41,650 posts that calls this kind of imaginary code chunk right here inside of the reactor redux library our 107 00:06:41,700 --> 00:06:48,870 action creator gets called So this action creator is invoked and then inside of that super super super 108 00:06:48,870 --> 00:06:55,290 nasty code chunk at some point in time we come across that line of code that says return based on placeholder 109 00:06:55,320 --> 00:06:56,880 don't get. 110 00:06:56,880 --> 00:07:03,090 So we return not our action object when this thing is initially called when our action creator gets 111 00:07:03,090 --> 00:07:04,780 called The very first time. 112 00:07:04,800 --> 00:07:08,490 Like initially gets called We do not return the action object. 113 00:07:08,550 --> 00:07:14,880 Instead as you just saw we have some code inside there that's going to return our request object. 114 00:07:14,940 --> 00:07:17,520 That is what gets returned the request. 115 00:07:17,820 --> 00:07:24,570 So we return the request from our action creator and that goes into the store dispatch method. 116 00:07:25,050 --> 00:07:32,220 Then the store looks at what we returned and it says OK is this a plain javascript object with only 117 00:07:32,220 --> 00:07:33,370 a type property. 118 00:07:33,600 --> 00:07:39,990 Well in this case no because we just returned that request object we did not return our action and that's 119 00:07:39,990 --> 00:07:43,100 why we ended up seeing this nasty error message over here. 120 00:07:43,110 --> 00:07:45,170 It says actions must be plain objects. 121 00:07:45,180 --> 00:07:47,560 Use custom middleware for async actions. 122 00:07:47,610 --> 00:07:51,360 So the real thing right here is actions must be plane objects. 123 00:07:51,360 --> 00:07:57,780 We did not return a plane object we returned a request object that probably has a bunch of fancy methods 124 00:07:57,780 --> 00:08:00,720 assigned to it and probably not a type property. 125 00:08:00,720 --> 00:08:04,270 We definitely did not dispatch what we thought we were dispatching. 126 00:08:04,260 --> 00:08:10,310 And again this is all because of the async away syntax that we are using. 127 00:08:11,620 --> 00:08:16,640 OK so that's kind of issue number one with our action creator. 128 00:08:16,790 --> 00:08:21,500 Issue number one is that because we're using the async syntax and that gets transpired down to E.S. 129 00:08:21,500 --> 00:08:22,180 2015. 130 00:08:22,200 --> 00:08:22,750 Or me yes. 131 00:08:22,790 --> 00:08:23,610 5 code. 132 00:08:23,680 --> 00:08:28,000 What actually runs inside of our browser is not what you think actually runs. 133 00:08:28,100 --> 00:08:34,310 And so we currently are running into this issue where we are dispatching a not redux action we are dispatching 134 00:08:34,310 --> 00:08:38,450 some random object that redux definitely doesn't care about. 135 00:08:38,450 --> 00:08:40,590 So now that we understand that part. 136 00:08:40,640 --> 00:08:42,030 Take a quick policy here. 137 00:08:42,050 --> 00:08:43,550 When we come back the next section. 138 00:08:43,820 --> 00:08:45,850 Let's talk about the second issue over here. 139 00:08:45,920 --> 00:08:51,020 That's going to help you understand why some very easy workaround that you might think would work out 140 00:08:51,020 --> 00:08:53,310 is not going to quite work out as well. 141 00:08:53,490 --> 00:08:55,410 Yes a quick pause I'll see you in just a minute.