1 00:00:00,940 --> 00:00:06,750 Let's move on to our bundles reducer, so back inside of my reducers directory, I find bundles, reducers, 2 00:00:06,760 --> 00:00:07,380 it's. 3 00:00:08,310 --> 00:00:11,020 I'm going to remove the export default of one at the very top. 4 00:00:11,040 --> 00:00:14,670 Remember, we just had that in there to get a little air around, react out, to go away. 5 00:00:15,360 --> 00:00:19,230 Then the very top, we will immediately import produce from IMR. 6 00:00:20,070 --> 00:00:22,290 We'll get action type. 7 00:00:23,090 --> 00:00:25,400 From action types. 8 00:00:29,740 --> 00:00:33,010 And action from actions. 9 00:00:35,540 --> 00:00:39,890 We'll then follow the exact same pattern we have inside of our other reducer, so we'll first define 10 00:00:39,890 --> 00:00:43,950 an interface that describes the structure of the state that we will return from this reducer. 11 00:00:44,370 --> 00:00:49,880 We'll initialize a state object or an initial state object, and we'll define our reducer and export 12 00:00:49,880 --> 00:00:50,040 it. 13 00:00:50,630 --> 00:00:51,710 So first things first. 14 00:00:52,100 --> 00:00:54,710 I'll make an interface called Bundles States. 15 00:00:56,270 --> 00:01:00,430 So we need to think about what structure of state we want to return for this particular reducer. 16 00:01:01,010 --> 00:01:05,090 Well, I think we can follow a very similar pattern to what we did back inside of our cells reducer 17 00:01:05,090 --> 00:01:06,380 for that data property. 18 00:01:06,590 --> 00:01:12,410 Remember, the data property was an object where the keys were the idea of a particular cell and then 19 00:01:12,410 --> 00:01:14,360 the values for each of those was the cell itself. 20 00:01:14,990 --> 00:01:21,620 So we're going to say that our bundle state object is going to be an object, of course, that has a 21 00:01:21,620 --> 00:01:26,090 key, that is a string, and that's going to be the ID of a particular cell. 22 00:01:26,750 --> 00:01:29,120 And then the value is going to be an object. 23 00:01:30,020 --> 00:01:31,850 That has a floating property. 24 00:01:33,330 --> 00:01:39,900 A code property that is going to be a string and an air property that is a string to the loading right 25 00:01:39,900 --> 00:01:44,910 here is going to be used to describe whether or not we are currently bundling the cell, the term loading 26 00:01:44,910 --> 00:01:48,030 maybe not the best because we're not necessarily loading any data. 27 00:01:48,210 --> 00:01:50,730 We're technically processing or bundling. 28 00:01:51,120 --> 00:01:53,370 If you want to use a different name than loading, that is totally fine. 29 00:01:53,370 --> 00:01:57,930 But I think the term loading is can be very easily understood as being we are currently processing something. 30 00:01:58,840 --> 00:02:04,810 So whenever we receive this initial bundle start action, we're going to make sure that we flip loading 31 00:02:04,810 --> 00:02:06,610 to true to say we are currently bundling. 32 00:02:07,150 --> 00:02:10,630 Whenever we complete bundling, we're going to flip loading over to false. 33 00:02:10,900 --> 00:02:14,770 And at that point in time, we should have an actual value to provide for a code and air. 34 00:02:16,350 --> 00:02:21,010 Yes, I think this is a reasonable place to get started now we can define our initial state object, 35 00:02:21,610 --> 00:02:27,880 do initial states, I'm going to annotate it as type bundles states, and then we're going to default 36 00:02:27,880 --> 00:02:32,860 it to be an empty object because initially we have no bundles for any cells whatsoever. 37 00:02:35,740 --> 00:02:38,110 Then after that, we can define our actual producer. 38 00:02:40,800 --> 00:02:46,920 Remember to call produce, that's what's going to allow us to do some direct manipulation or mutation 39 00:02:46,920 --> 00:02:47,820 of our state object. 40 00:02:48,950 --> 00:02:50,600 I'll put in my producer function. 41 00:02:52,020 --> 00:02:59,550 You'll receive state as the first argument, I will annotate that as type bundles state and I will default 42 00:02:59,550 --> 00:03:01,050 it to be initial state. 43 00:03:05,060 --> 00:03:11,420 We can then put in our action as a second argument and I'm going to annotate that as type action, which 44 00:03:11,420 --> 00:03:12,800 we had already imported at the top. 45 00:03:13,910 --> 00:03:18,680 And then finally, remember, this is something we discussed several times, because we are using IMR, 46 00:03:18,680 --> 00:03:23,330 we do not technically have to return a state object, but if we don't return a state object, typescript 47 00:03:23,330 --> 00:03:25,000 is going to get really confused really quickly. 48 00:03:25,250 --> 00:03:30,290 So we are going to add on a return type annotation, even though it is not strictly required because 49 00:03:30,290 --> 00:03:35,900 we are using IMR, it's going to put in a colon bundles state and that's just going to make sure that 50 00:03:35,900 --> 00:03:40,300 in all scenarios, no matter what, we always return an object of type on the state. 51 00:03:40,310 --> 00:03:42,980 And this is really just a clarifying step for typescript. 52 00:03:45,590 --> 00:03:50,420 All right, so then inside of the body of our producer right now, we'll just put in just a little bit 53 00:03:50,420 --> 00:03:51,110 of scaffolding. 54 00:03:52,030 --> 00:03:58,300 So we'll do a switch over action type will add on our case of action type DOT. 55 00:03:59,300 --> 00:04:00,350 Bundle start. 56 00:04:01,360 --> 00:04:03,400 And in that case, I'm going to return state right now. 57 00:04:04,790 --> 00:04:12,170 Action type one will complete in that case will return state again and default, which we do yet again 58 00:04:12,170 --> 00:04:12,860 return state. 59 00:04:15,640 --> 00:04:19,209 Then finally, at the very bottom, I will export default or reduce her. 60 00:04:20,769 --> 00:04:25,090 OK, so that's it for right now, let's take a pause right here, come back to the next video and finish 61 00:04:25,090 --> 00:04:26,950 up are implementation of the reducer.