1 00:00:01,030 --> 00:00:05,760 Let's have a quick discussion around how we're going to design the redock side of our project now and 2 00:00:05,770 --> 00:00:09,100 of course, naturally makes sense for us to have a quick discussion about design. 3 00:00:09,550 --> 00:00:13,840 But on a normal application that you're working on, on your own, you might decide, you know what, 4 00:00:13,840 --> 00:00:14,680 I know what I'm doing. 5 00:00:14,680 --> 00:00:16,300 I'm just going to start writing code right away. 6 00:00:16,900 --> 00:00:21,790 Whenever you start working on a script project with Redox, I cannot recommend enough. 7 00:00:22,060 --> 00:00:26,700 You just sit down for a couple minutes and really think about the design of your product store. 8 00:00:26,740 --> 00:00:30,370 So think about the different reducers, the information they're going to hold, some of the different 9 00:00:30,370 --> 00:00:33,270 action creators and actions you're going to need to create as well. 10 00:00:33,760 --> 00:00:36,880 The more time you spend up front, the better your code is going to be. 11 00:00:36,880 --> 00:00:40,090 And I really guarantee that when you start making use of typescript. 12 00:00:40,570 --> 00:00:44,890 So that means we're going to take a look at a couple of diagrams and understand how we're going to approach 13 00:00:44,890 --> 00:00:46,620 the design of our Reduc store. 14 00:00:47,470 --> 00:00:51,790 The first thing we really need to do is understand the data that we're going to eventually fetch from 15 00:00:51,790 --> 00:00:52,990 that NPM API. 16 00:00:53,620 --> 00:00:59,440 So this is the general URL that we're going to make a request to to do some kind of search for all packages 17 00:00:59,440 --> 00:01:00,350 with some kind of keyword. 18 00:01:00,670 --> 00:01:03,820 In this case, I've got a hardcoded search keyword in here of react. 19 00:01:04,180 --> 00:01:09,640 So we're going to change react right there to whatever term or whatever string a user enters into that 20 00:01:09,640 --> 00:01:10,390 little search bar. 21 00:01:10,720 --> 00:01:17,290 So it might instead be a user looking for packages around Redox or something around bootstrap or whatever 22 00:01:17,290 --> 00:01:17,590 else. 23 00:01:19,850 --> 00:01:23,440 I'm going to take this full URL, I'm going to visit it inside my browser, and we're going to take 24 00:01:23,440 --> 00:01:26,230 a look at what data we have to really work with from this API. 25 00:01:27,810 --> 00:01:29,540 OK, so here we go. 26 00:01:31,140 --> 00:01:36,230 So here's the response we get back from NPM, you'll notice we get a top level object right here. 27 00:01:36,590 --> 00:01:42,620 Inside of it is a object's property and then objects is an array of objects in each of those objects 28 00:01:42,620 --> 00:01:44,200 has a package property. 29 00:01:44,690 --> 00:01:48,300 This package property has information about some search results. 30 00:01:48,650 --> 00:01:52,760 So in this case, the very first package I see is not unsurprisingly react. 31 00:01:53,430 --> 00:01:54,800 I can then scroll down a little bit. 32 00:01:54,860 --> 00:01:56,230 Next one is react, Dom. 33 00:01:57,340 --> 00:02:00,220 A little bit more, yes, lint plug and react, you get the idea. 34 00:02:00,900 --> 00:02:05,380 So it looks like we get these different package objects and inside there is all the information we're 35 00:02:05,380 --> 00:02:07,990 going to eventually want to use to print some stuff on the screen. 36 00:02:09,000 --> 00:02:13,800 So that means firstly I want to do is just clarify one little piece of terminology that we're going 37 00:02:13,800 --> 00:02:15,060 to use inside of our project. 38 00:02:15,780 --> 00:02:20,940 Without a doubt, when we make a request to NPM, we are definitely fetching something called packages. 39 00:02:20,940 --> 00:02:22,770 And he could see that very clearly in the response. 40 00:02:22,780 --> 00:02:23,550 We were just looking at. 41 00:02:24,040 --> 00:02:28,200 However, a little bit of a gotcha or a little bit of a catch here for you and I. 42 00:02:28,590 --> 00:02:31,920 The word package is a reserved keyword in typescript. 43 00:02:32,280 --> 00:02:37,980 So reserved keywords such as very similar to like how for an A for loop is or import and so on. 44 00:02:38,130 --> 00:02:42,350 So if you just write out package inside of a typescript file, that has a very special meaning. 45 00:02:42,900 --> 00:02:46,830 The reason I mention this is that if you're fetching a list of packages, we might eventually want to 46 00:02:46,830 --> 00:02:51,120 have some variable inside of our project called something like package, or we might want to have an 47 00:02:51,120 --> 00:02:54,000 interface called package or something like that. 48 00:02:55,290 --> 00:02:59,730 And very quickly, we would start to run into some errors coming from TypeScript, as it says, hey, 49 00:02:59,730 --> 00:03:01,710 you're using some kind of reserve keyword right here. 50 00:03:02,110 --> 00:03:06,870 So rather than calling these things packages inside of our project, we're going to refer to them as 51 00:03:06,870 --> 00:03:09,740 repositories, not technically accurate. 52 00:03:09,990 --> 00:03:10,530 I know. 53 00:03:10,530 --> 00:03:11,190 Absolutely. 54 00:03:11,370 --> 00:03:13,380 But regardless, we're going to call these things. 55 00:03:13,380 --> 00:03:18,870 We are fetching repositories throughout our entire project rather than calling them a package or anything 56 00:03:18,870 --> 00:03:19,400 like that. 57 00:03:19,440 --> 00:03:21,540 So just a little clarifying note here. 58 00:03:22,400 --> 00:03:27,980 OK, so now at that moment, let's think about how we can design our Redux store, so I came up with 59 00:03:27,980 --> 00:03:30,610 this approach and this is a pretty standard approach. 60 00:03:30,620 --> 00:03:32,950 Nothing too crazy here when it comes to redux. 61 00:03:33,350 --> 00:03:38,480 I think that inside of our Redock store, we should have one kind of slice or piece of state called 62 00:03:38,480 --> 00:03:39,410 repositories. 63 00:03:40,040 --> 00:03:46,700 So this repositories piece of state will be produced by maybe a repositories reducer and this reducer 64 00:03:47,060 --> 00:03:49,220 will maintain three different properties inside of it. 65 00:03:49,530 --> 00:03:53,720 So we'll have a data property and that's going to be our list of repositories that we get back from. 66 00:03:53,720 --> 00:03:56,210 NPM will have a loading flag. 67 00:03:56,390 --> 00:03:59,830 So that'll be a boolean indicating whether or not we are currently making request. 68 00:04:00,320 --> 00:04:05,480 And then finally, an air property that will be some kind of string if we ever run into some kind of 69 00:04:05,480 --> 00:04:08,240 error as we make a request over to the NPM API. 70 00:04:08,990 --> 00:04:13,430 So I could but you could guess where we would use each of these inside the actual UI of our project. 71 00:04:13,760 --> 00:04:16,640 If we are currently loading, we could show a spinner or something like that. 72 00:04:16,820 --> 00:04:19,940 If we get an error, property or error message will show that on the screen. 73 00:04:20,149 --> 00:04:24,530 Otherwise, we'll take our list of repositories that we have fetched, render them out as a list and 74 00:04:24,530 --> 00:04:26,900 show the user all these different repository names. 75 00:04:27,800 --> 00:04:31,820 So I think that the reducers side of things not too crazy, pretty straightforward. 76 00:04:33,140 --> 00:04:37,340 So now we need to think about our different action creators and the different actions that we're going 77 00:04:37,340 --> 00:04:39,050 to send into this reducer as well. 78 00:04:39,620 --> 00:04:45,050 I think that we probably only need one single action creator, something called maybe search repositories 79 00:04:45,050 --> 00:04:50,120 or something like that, and will pass in as an argument to the section creator, the search term that 80 00:04:50,120 --> 00:04:51,500 we want to use for our search. 81 00:04:51,830 --> 00:04:52,930 So I'm calling it name here. 82 00:04:52,940 --> 00:04:55,850 Maybe we will eventually call it term or whatever you want to call it. 83 00:04:57,360 --> 00:05:04,120 This action creator is going to eventually dispatch one of a variety of different actions, so are action 84 00:05:04,170 --> 00:05:08,700 creator can produce an action and remember, send that off to our store to be processed by all of our 85 00:05:08,700 --> 00:05:11,340 different reducers of search repositories. 86 00:05:11,640 --> 00:05:15,840 So that action is going to indicate that we have made a request and it is currently pending. 87 00:05:16,860 --> 00:05:21,300 Search repository success will indicate, as you guess, we successfully made the request, we've now 88 00:05:21,300 --> 00:05:26,640 got a list of search results and then search repositories er will be if we ever run into an ER during 89 00:05:26,640 --> 00:05:27,750 that request that we're making. 90 00:05:28,710 --> 00:05:32,860 And then to support each of these actions, which remember are objects that have a tight property and 91 00:05:32,860 --> 00:05:38,010 the paler property, we need some different action types so that we can correctly identify these different 92 00:05:38,010 --> 00:05:39,430 actions instead of reducer. 93 00:05:40,020 --> 00:05:43,860 So our different action types, which are always going to be strings, will be something like search 94 00:05:43,860 --> 00:05:46,500 repositories, search repository success, search repositories. 95 00:05:46,500 --> 00:05:48,180 Er, nothing too crazy here. 96 00:05:48,330 --> 00:05:50,070 Very standard action types. 97 00:05:51,220 --> 00:05:55,260 So these are pretty much all the different things we need to create on the right side of our application, 98 00:05:55,270 --> 00:05:56,550 we got to create that action crater. 99 00:05:56,860 --> 00:05:59,560 We got to have these three different possible actions. 100 00:06:00,040 --> 00:06:05,050 We need to create three different action types and then one single reducer. 101 00:06:06,710 --> 00:06:10,880 Now, lastly, I want to mention about all this design stuff is just how we're going to structure the 102 00:06:10,880 --> 00:06:13,060 different files and folders inside of our project. 103 00:06:13,610 --> 00:06:18,800 So here's one way that we might decide to implement all this stuff inside of our Sarsae directory. 104 00:06:18,830 --> 00:06:21,020 We might eventually have some kind of components folder. 105 00:06:21,140 --> 00:06:22,520 Very standard, very typical. 106 00:06:22,850 --> 00:06:28,120 Inside there, we might have an app component and maybe our entire search thing is called like repositories 107 00:06:28,130 --> 00:06:29,390 list or something like that. 108 00:06:29,990 --> 00:06:34,340 We then might have a separate folder for all of our redock stuff and inside there would be our reducers, 109 00:06:34,340 --> 00:06:37,220 action creators, middleware or whatever else we need to create. 110 00:06:37,970 --> 00:06:43,940 Now, in a typical Redox and React project, you sometimes see a lot of different import statements 111 00:06:44,150 --> 00:06:47,480 reaching into this redox folder and trying to get. 112 00:06:48,890 --> 00:06:55,430 At all these different stores or CBD store that we create and trying to get at the different action 113 00:06:55,430 --> 00:07:00,200 creators and stuff like that, so we eventually might have inside of our app component an important 114 00:07:00,200 --> 00:07:01,750 statement that tries to get our reduc store. 115 00:07:02,060 --> 00:07:06,230 We might have inside of a repositories list something to fetch in different action creators. 116 00:07:06,590 --> 00:07:10,100 Maybe the repositories list needs something else. 117 00:07:10,370 --> 00:07:13,340 Maybe the app component needs to get an action creator as well. 118 00:07:13,340 --> 00:07:13,910 Who knows? 119 00:07:14,150 --> 00:07:18,020 The point is, in this diagram that I'm really trying to make here is that in a typical project that 120 00:07:18,020 --> 00:07:22,520 you see with Redbox, there are a lot of different import statements that reach from our components 121 00:07:22,520 --> 00:07:28,280 folder into many different places inside of our redox directory or wherever we are placing our reduc 122 00:07:28,280 --> 00:07:28,700 stuff. 123 00:07:29,300 --> 00:07:33,830 I really recommend you avoid this approach when you start making use of typescript. 124 00:07:34,100 --> 00:07:40,910 Instead, I really recommend that you instead create a single location or kind of a single entry point 125 00:07:41,120 --> 00:07:45,470 that's going to give access to all the redock stuff to the rest of your project. 126 00:07:46,080 --> 00:07:52,070 So we're going to create a single index dots file inside of some Redhawks directory or some folder where 127 00:07:52,070 --> 00:07:53,630 we're going to hold all of our reduc stuff. 128 00:07:54,350 --> 00:07:58,270 We're then going to import all of our different action creators, all of our different middleware as 129 00:07:58,600 --> 00:07:59,990 all of our different action types. 130 00:08:00,170 --> 00:08:05,730 We're going to import everything into this indexed Ortez file and then re-export it from that file. 131 00:08:06,380 --> 00:08:10,820 So if any of our components ever need anything from the redux side of things, they're not going to 132 00:08:10,820 --> 00:08:15,170 reach into our redox folder and try to get at all these different files. 133 00:08:15,170 --> 00:08:19,050 Instead, we're going to get everything from this index file. 134 00:08:19,280 --> 00:08:24,130 So this is really our communication point from our redock side, the application to the outside world. 135 00:08:24,650 --> 00:08:29,450 And again, you're going to see a very quickly that this dramatically simplifies a lot of things. 136 00:08:29,450 --> 00:08:34,039 And it means that we're not going to have a total spaghetti mess of imports and exports where we've 137 00:08:34,039 --> 00:08:37,309 got just tons and tons of different files in communication with each other. 138 00:08:37,620 --> 00:08:41,179 So this really is a strategy that's going to dramatically simplify things. 139 00:08:41,179 --> 00:08:43,909 And I really recommend you take this approach on your own projects. 140 00:08:45,380 --> 00:08:50,120 All right, so long enough video here, long discussion, let's take a pause and then start putting 141 00:08:50,120 --> 00:08:52,510 this design into action in just a moment.