1 00:00:00,540 --> 00:00:02,160 Lecturer: Let's talk a little bit more about 2 00:00:02,160 --> 00:00:04,050 middlewares in Redux. 3 00:00:04,050 --> 00:00:06,090 Middlewares are one of my favorite topics 4 00:00:06,090 --> 00:00:07,800 mostly because I consider middlewares 5 00:00:07,800 --> 00:00:10,650 to be one of the killer features behind Redux. 6 00:00:10,650 --> 00:00:11,880 Before we start talking too much 7 00:00:11,880 --> 00:00:13,530 about exactly what a middleware is, 8 00:00:13,530 --> 00:00:15,660 and what it's doing inside our applications, 9 00:00:15,660 --> 00:00:18,930 let's install our boilerplate package for this section. 10 00:00:18,930 --> 00:00:20,790 So in my browser, I'm going to navigate 11 00:00:20,790 --> 00:00:23,100 to github.com 12 00:00:23,100 --> 00:00:25,000 slash stephengrider 13 00:00:25,920 --> 00:00:30,090 slash reduxsimplestarter 14 00:00:30,090 --> 00:00:33,030 and then once here, I'll clone the repository. 15 00:00:33,030 --> 00:00:34,710 If you don't want to clone it, there are, 16 00:00:34,710 --> 00:00:37,413 of course, directions for just downloading a zip file. 17 00:00:40,110 --> 00:00:42,030 Once I got the link back in my terminal, 18 00:00:42,030 --> 00:00:45,360 I'll run git clone with the path, 19 00:00:45,360 --> 00:00:48,393 and I'm gonna clone this to middleware's directory. 20 00:00:50,760 --> 00:00:53,190 Then I'll change into middlewares 21 00:00:53,190 --> 00:00:56,220 and start my dependencies installing with npm install. 22 00:00:56,220 --> 00:00:58,320 Okay, so we're good to go. 23 00:00:58,320 --> 00:00:59,700 I'm gonna pull a diagram on the screen 24 00:00:59,700 --> 00:01:01,560 to talk a little bit more about middlewares. 25 00:01:01,560 --> 00:01:04,410 Now this diagram's probably gonna look pretty familiar 26 00:01:04,410 --> 00:01:06,180 and hopefully it will. 27 00:01:06,180 --> 00:01:10,830 It's a model of the Redux action to state cycle. 28 00:01:10,830 --> 00:01:12,032 So we start off on the left 29 00:01:12,032 --> 00:01:15,843 top left hand corner here with our React application. 30 00:01:16,756 --> 00:01:20,087 So React is sitting there rendered to the DOM. 31 00:01:20,087 --> 00:01:21,510 Perhaps a user clicks on something, 32 00:01:21,510 --> 00:01:23,250 or maybe some component mounts, 33 00:01:23,250 --> 00:01:28,250 and it calls internally some componentWillMount method, 34 00:01:28,765 --> 00:01:29,760 or whatever might be happening. 35 00:01:29,760 --> 00:01:34,140 Something eventually will call an Action Creator. 36 00:01:34,140 --> 00:01:37,650 Action Creators return Actions. 37 00:01:37,650 --> 00:01:39,060 And then here's where it gets interesting 38 00:01:39,060 --> 00:01:40,740 for our purposes today. 39 00:01:40,740 --> 00:01:44,070 These actions are all sent to middlewares. 40 00:01:44,070 --> 00:01:45,360 Now let's continue on the cycle 41 00:01:45,360 --> 00:01:47,280 and then come back to middlewares. 42 00:01:47,280 --> 00:01:50,340 So after an action goes through our middlewares, 43 00:01:50,340 --> 00:01:52,950 it'll flow into our reducers. 44 00:01:52,950 --> 00:01:55,470 The reducer produces new state 45 00:01:55,470 --> 00:01:58,170 and this new state is sent back to React. 46 00:01:58,170 --> 00:02:01,380 So consider it to be a cycle of sorts. 47 00:02:01,380 --> 00:02:03,180 So again, the point, the portion of this 48 00:02:03,180 --> 00:02:04,260 that we really care about 49 00:02:04,260 --> 00:02:05,640 is the bottom right hand corner here, 50 00:02:05,640 --> 00:02:06,993 the middleware portion. 51 00:02:08,669 --> 00:02:11,520 So middlewares are called with all the actions, 52 00:02:11,520 --> 00:02:13,680 or perhaps a better way to word it would be to say 53 00:02:13,680 --> 00:02:15,990 all of our actions flow through all 54 00:02:15,990 --> 00:02:19,020 of our different middlewares that we might create. 55 00:02:19,020 --> 00:02:20,520 We can have multiple middlewares 56 00:02:20,520 --> 00:02:22,080 within our Redux application. 57 00:02:22,080 --> 00:02:24,720 There's no reasonable limit, I should say. 58 00:02:24,720 --> 00:02:25,830 There's no reasonable limit 59 00:02:25,830 --> 00:02:27,880 to the number of middlewares we can have. 60 00:02:29,494 --> 00:02:31,230 Our middlewares should be written to be not 61 00:02:31,230 --> 00:02:33,723 not mind if they ran in different orders. 62 00:02:34,602 --> 00:02:35,940 So each middleware is its own discreet 63 00:02:35,940 --> 00:02:37,920 kind of unit of functionality 64 00:02:37,920 --> 00:02:39,420 or service to us, 65 00:02:39,420 --> 00:02:41,613 and they all run in order, or sequentially. 66 00:02:42,480 --> 00:02:45,144 After an action flows through all the middlewares, 67 00:02:45,144 --> 00:02:47,970 it pops out at the reducers. 68 00:02:47,970 --> 00:02:52,970 The purpose of the middleware is to log, stop, modify, 69 00:02:53,310 --> 00:02:56,490 or even just not even touch an action. 70 00:02:56,490 --> 00:02:58,410 So middlewares are just something that's sitting here 71 00:02:58,410 --> 00:03:01,830 inside the process between actions and reducers, 72 00:03:01,830 --> 00:03:04,740 and we can use them to accomplish a huge, tremendous, 73 00:03:04,740 --> 00:03:06,576 widely different variety of tasks. 74 00:03:06,576 --> 00:03:10,320 So we're going to pick a very specific task today 75 00:03:10,320 --> 00:03:12,330 for our application that we're gonna build. 76 00:03:12,330 --> 00:03:13,800 But I'm gonna say this now 77 00:03:13,800 --> 00:03:15,720 and I'm gonna say many times again, 78 00:03:15,720 --> 00:03:20,250 we can make middlewares do wildly, wildly different things. 79 00:03:20,250 --> 00:03:21,930 Let's continue in the next section 80 00:03:21,930 --> 00:03:23,520 where we will talk more 81 00:03:23,520 --> 00:03:25,770 about the application that we're gonna build.