1 00:00:01,250 --> 00:00:05,689 All right, my friends, that's it for this project, so I want to wrap up on it very quickly, a couple 2 00:00:05,689 --> 00:00:09,380 of big items I really want to point out around some kind of awkward points when we start working with 3 00:00:09,380 --> 00:00:11,060 Redux in typescript together. 4 00:00:11,450 --> 00:00:13,360 And some of this is not from Redux directly. 5 00:00:13,370 --> 00:00:15,710 Instead, it might be from the React Redux Library. 6 00:00:16,400 --> 00:00:21,770 The first thing I want to point out is that we did a really kind of precise job of segmenting off a 7 00:00:21,770 --> 00:00:26,510 lot of different things inside of separate directories, whereas previous redox projects you might have 8 00:00:26,510 --> 00:00:31,490 worked on with just JavaScript, sometimes combined stuff like action types, action creators and actions 9 00:00:31,490 --> 00:00:32,630 all into one single file. 10 00:00:33,530 --> 00:00:38,150 So we created all these separate directories just to make sure it was really crystal clear what was 11 00:00:38,150 --> 00:00:40,320 important, what what was exporting what and so on. 12 00:00:40,940 --> 00:00:46,430 We also made sure that whenever we needed to get access to some redox related stuff from our REACT application, 13 00:00:46,670 --> 00:00:51,410 we made sure that we imported all that stuff from the root index file inside that state directory. 14 00:00:52,010 --> 00:00:55,630 So that was here's the state directory index that's right here. 15 00:00:55,970 --> 00:01:00,280 We did not import anything directly from files or folders inside of state. 16 00:01:00,290 --> 00:01:04,170 Instead, all of our imports for redox related stuff were coming from index. 17 00:01:04,250 --> 00:01:04,940 Yes, right here. 18 00:01:06,830 --> 00:01:11,000 Next up, we saw that communicating some type information over to our components could be a little bit 19 00:01:11,000 --> 00:01:14,340 challenging, and that's where I kind of ranted for just a little bit. 20 00:01:14,480 --> 00:01:19,160 I apologize for that rant to just a little bit around how we had to write out just that extra little 21 00:01:19,160 --> 00:01:23,390 bit of code to communicate some type information about the structure of data inside of a redock store, 22 00:01:23,390 --> 00:01:24,760 over to react redux. 23 00:01:25,070 --> 00:01:26,720 There's not much more to say than that. 24 00:01:26,900 --> 00:01:27,440 Pretty much. 25 00:01:27,440 --> 00:01:31,610 If you want to make use of TypeScript and react redux together and use that, you select your hook. 26 00:01:32,150 --> 00:01:34,520 Pretty much you're going to want to create a file that looks like this right here. 27 00:01:36,430 --> 00:01:40,510 And then finally, last thing I want to mention, we didn't really go too much into depth or too much 28 00:01:40,510 --> 00:01:43,870 in depth on some the type definition filed for and react redux. 29 00:01:44,140 --> 00:01:49,450 But if you start going into those type definition files, in some cases, they're kind of like this 30 00:01:49,450 --> 00:01:54,460 type stuff, just a little bit overengineered to reading those type definition files is sometimes a 31 00:01:54,460 --> 00:01:55,430 little bit challenging. 32 00:01:56,170 --> 00:01:58,870 One thing that we kind of sidestep here in particular. 33 00:01:58,920 --> 00:02:05,590 I want to point out, was inside of our Action Creators Index file, we made use of an import directly 34 00:02:05,590 --> 00:02:06,340 from Redock. 35 00:02:06,360 --> 00:02:09,100 So we imported the dispatch type from Redux. 36 00:02:09,340 --> 00:02:12,400 And we use that to apply a type to the dispatch function right here. 37 00:02:13,750 --> 00:02:17,230 Another way that we could have accomplished this was by importing. 38 00:02:19,010 --> 00:02:23,930 Redux thunk, I'm going to write that out like so and then do a command click on Redux Thunk and will 39 00:02:23,930 --> 00:02:26,840 take us to the type definition file for Redux Thunk. 40 00:02:27,290 --> 00:02:32,600 So inside of here are a couple of different types to describe action creators that we might write out 41 00:02:32,600 --> 00:02:33,740 using Redux Thunk. 42 00:02:34,070 --> 00:02:39,490 So these are pretty much types that we would apply to like search repositories itself are going to be 43 00:02:39,490 --> 00:02:39,980 honest with you. 44 00:02:39,980 --> 00:02:46,310 Understanding what these types are doing is really challenging and debatably maybe just a little bit 45 00:02:46,310 --> 00:02:47,900 overengineered, you might say. 46 00:02:48,590 --> 00:02:49,090 Kind of. 47 00:02:49,400 --> 00:02:53,670 So using the redux type definition files is kind of challenging. 48 00:02:54,080 --> 00:02:59,840 So a workaround is to either just say I'm going to annotate everything is any not really recommended. 49 00:03:00,200 --> 00:03:04,460 So you can either try to kind of break things down into smaller types, which is what we really did 50 00:03:04,460 --> 00:03:06,320 by importing dispatch from Redox. 51 00:03:06,470 --> 00:03:11,480 Or alternatively, it is also technically possible to write out our own types to describe a lot of things 52 00:03:11,480 --> 00:03:12,350 that are going on here. 53 00:03:13,950 --> 00:03:18,000 So that's it, just some high level items I want to mention very quickly around this project. 54 00:03:18,810 --> 00:03:21,120 That's pretty much it for Redox and TypeScript. 55 00:03:21,330 --> 00:03:23,870 Let's take a pause right here and move on in just a moment.