1 00:00:01,100 --> 00:00:04,660 Last video we discussed what is going wrong with our fenceposts action creator. 2 00:00:04,680 --> 00:00:07,830 So now that we've got a better idea of what's happening here we're going to start to discuss how we're 3 00:00:07,830 --> 00:00:09,100 going to fix this problem. 4 00:00:09,510 --> 00:00:14,580 Now first a quick little piece of terminology up to this point in this course we have been writing what 5 00:00:14,580 --> 00:00:21,210 we refer to as synchronous action creators a synchronous or sync action creator is one that when we 6 00:00:21,210 --> 00:00:26,910 call it it immediately returns an action object with all the relevant data attached that object and 7 00:00:26,910 --> 00:00:29,620 it's ready to be processed by our reducers. 8 00:00:29,820 --> 00:00:35,640 We are now starting to venture into the world of asynchronous action creators a asynchronous or async 9 00:00:35,670 --> 00:00:41,040 action creator is one that is going to require a little bit of time before it is ready to eventually 10 00:00:41,040 --> 00:00:43,650 dispatch an action by definition. 11 00:00:43,650 --> 00:00:48,360 Any time that you have an action creator that makes a network request it is always going to qualify 12 00:00:48,360 --> 00:00:51,060 as an async action creator. 13 00:00:51,060 --> 00:00:56,490 If you want to have asynchronous action creators inside of a redux application you have to install something 14 00:00:56,490 --> 00:01:01,990 called a middleware that is going to allow you to deal with these asynchronous action creators. 15 00:01:02,130 --> 00:01:06,450 And if you recall one of the error messages that we saw inside of our application made reference to 16 00:01:06,750 --> 00:01:08,110 something called middleware. 17 00:01:08,190 --> 00:01:11,850 And it said if you want to deal with async action creators you have to use a middleware. 18 00:01:12,150 --> 00:01:15,090 So that begs the question what is a middleware. 19 00:01:15,450 --> 00:01:20,150 Well as you recall a little bit ago we installed a dependency called redux thunk. 20 00:01:20,160 --> 00:01:24,800 This is a middleware that's going to help us deal with this asynchronous action creator. 21 00:01:24,850 --> 00:01:28,620 Now before we just run off and start making use of Reducto thunk I want to make sure that you have a 22 00:01:28,650 --> 00:01:31,060 good idea of exactly what a middleware is. 23 00:01:31,200 --> 00:01:35,070 So for the rest of this video we're going to have a quick little aside and we're going to discuss exactly 24 00:01:35,130 --> 00:01:38,140 what a middleware is inside of the world of redux. 25 00:01:39,420 --> 00:01:39,710 All right. 26 00:01:39,720 --> 00:01:44,830 So first off same diagram we've looked at before with one tiny little change on it. 27 00:01:44,850 --> 00:01:47,700 So we still are going to be calling action creators. 28 00:01:47,730 --> 00:01:49,240 That's going to return in action. 29 00:01:49,260 --> 00:01:50,700 That's going to be dispatched. 30 00:01:50,850 --> 00:01:55,860 But now when we dispatched an action rather than sending it directly off to all of our reducers we're 31 00:01:55,860 --> 00:02:00,780 going to say that action is going to be sent through all of the different middleware is inside of our 32 00:02:00,780 --> 00:02:03,660 application inside a single redux app. 33 00:02:03,680 --> 00:02:09,590 We can have as many or as few middleware as we want for the most part in the projects you and I are 34 00:02:09,590 --> 00:02:14,180 going to be working on we are going to have at most one or two middleware is hooked up to our redux 35 00:02:14,180 --> 00:02:15,140 store. 36 00:02:15,290 --> 00:02:18,970 Let me tell you a little bit more about middleware is in detail. 37 00:02:19,000 --> 00:02:19,210 All right. 38 00:02:19,210 --> 00:02:24,730 So first off a middleware is a plain javascript function that is going to be called with every single 39 00:02:24,730 --> 00:02:31,300 action that you dispatch inside of that function a middleware has the opportunity to stop an action 40 00:02:31,300 --> 00:02:32,440 from being dispatch. 41 00:02:32,470 --> 00:02:38,920 So prevent it from going to any of your reducers middleware can modify an action or it can otherwise 42 00:02:38,920 --> 00:02:44,860 just kind of mess around in with an action in any way shape or form you can imagine a very simple example 43 00:02:44,860 --> 00:02:49,860 would be to create a middleware that simply cancel locks every action that you dispatch. 44 00:02:49,870 --> 00:02:54,250 So any time you dispatch an action you might have a middleware that is going to simply cancel log it. 45 00:02:54,250 --> 00:02:58,610 So you can see that oh hey an action just got dispatched. 46 00:02:58,660 --> 00:03:02,920 There are a tremendous number of open source middleware that you can install as dependencies into your 47 00:03:02,920 --> 00:03:03,860 project. 48 00:03:03,880 --> 00:03:09,290 Now you are not limited to only making use of open source middleware or installing them as dependencies. 49 00:03:09,370 --> 00:03:14,520 We can very easily write our own custom middleware and use them inside of our own redux store. 50 00:03:16,080 --> 00:03:21,060 One of the most popular uses of middleware is for dealing with these asynchronous action creators. 51 00:03:21,060 --> 00:03:26,100 In fact probably the most popular middleware out of all of the ones that exist in the world is redux 52 00:03:26,100 --> 00:03:31,440 thunk and like we said redux thunked is about helping you deal with asynchronous action creators. 53 00:03:31,530 --> 00:03:37,170 There are many other types of action or me many other types of middleware but again many of them are 54 00:03:37,170 --> 00:03:40,750 going to be focused around helping you deal with these async action creators. 55 00:03:41,930 --> 00:03:44,760 So thats just a little bit on middleware in redux. 56 00:03:44,840 --> 00:03:45,800 Now take a quick pause. 57 00:03:45,800 --> 00:03:49,990 When we come back the next section we're going to start talking about exactly what redux thunked does. 58 00:03:50,000 --> 00:03:51,830 So quick break and I'll see you in just a minute.