1 00:00:02,140 --> 00:00:06,970 This line of code around despatching in action is really long, way longer than I would ever want to 2 00:00:06,970 --> 00:00:09,160 write to, just dispatch one single action. 3 00:00:09,670 --> 00:00:11,980 So let's figure out a way to condense this just a little bit. 4 00:00:12,340 --> 00:00:16,840 To do so, we're going to create a hook that is going to automatically give us access to all of our 5 00:00:16,840 --> 00:00:19,260 different action creators inside of our components. 6 00:00:19,890 --> 00:00:24,520 So to get started inside of my SIRC directory, I will make a new folder called Hooke's. 7 00:00:25,270 --> 00:00:29,260 Inside there, I'm going to make a new file called Use Actions. 8 00:00:29,270 --> 00:00:30,070 Thoughts. 9 00:00:31,200 --> 00:00:37,110 Inside of here, we're going to add in an import for that same U.S dispatch function or that same U.S 10 00:00:37,110 --> 00:00:38,760 dispatch hook that we just made use of. 11 00:00:39,940 --> 00:00:47,770 And we will import that from REACT redux, I'm going to also get BINDE action creators from Redox. 12 00:00:48,690 --> 00:00:53,880 And then finally, I will import that big action that creators object, which technically, just as 13 00:00:53,880 --> 00:00:59,790 one action creator inside of it right now are search repositories, one from up, one directory state. 14 00:01:01,610 --> 00:01:06,080 Then I will define and export a function called use actions. 15 00:01:07,710 --> 00:01:13,230 OK, so here's the general idea, we have used dispatch, the U.S dispatch function is only used to 16 00:01:13,230 --> 00:01:18,590 get access to the dispatch function itself, and that is the function that is a part of our reduc store. 17 00:01:18,600 --> 00:01:22,830 It is what allows us to dispatch an action into all of our different reducers. 18 00:01:23,680 --> 00:01:28,620 The first thing we're going to do is make use of that to get access to our dispatch function. 19 00:01:31,660 --> 00:01:37,390 Next up, BINDE action, the creators, you might recall how this function works from the Redox Library, 20 00:01:38,080 --> 00:01:41,170 this BINDE action creators function is going to be called. 21 00:01:42,990 --> 00:01:49,050 With a first argument of an object containing a bunch of different action, the creators, so that is 22 00:01:49,050 --> 00:01:53,400 our action creators import right here, remember, this is an object technically that has right now 23 00:01:53,400 --> 00:01:57,210 are one action creator of search repositories inside of it. 24 00:01:57,840 --> 00:01:59,250 Then as a second argument. 25 00:02:00,460 --> 00:02:02,380 We provide the dispatch function. 26 00:02:03,370 --> 00:02:09,130 Bind to action is going to give us back an object that contains all the different action creators that 27 00:02:09,130 --> 00:02:14,710 we provided in as the first argument, but now whenever we call these bound action creators, the return 28 00:02:14,710 --> 00:02:18,310 value from them will be automatically taken and provided to dispatch. 29 00:02:19,130 --> 00:02:23,680 So we can kind of imagine that we are getting back an object that kind of looks like this. 30 00:02:23,680 --> 00:02:28,180 We're getting back something that looks like search repositories. 31 00:02:29,850 --> 00:02:33,060 Dispatch search repositories. 32 00:02:34,410 --> 00:02:38,020 Repositories, if I could spell that correctly, depositories. 33 00:02:38,040 --> 00:02:38,570 There we go. 34 00:02:39,710 --> 00:02:42,480 And really just kind of like that part right there. 35 00:02:42,530 --> 00:02:46,910 Not quite exactly that, but you can kind of imagine that is what we are getting back out of BINDE action 36 00:02:46,910 --> 00:02:47,540 creators. 37 00:02:48,480 --> 00:02:52,170 So we are going to return that object from this function. 38 00:02:53,450 --> 00:02:57,320 So that's all we have to add inside of here, so let's save this and then see how we're going to actually 39 00:02:57,320 --> 00:02:58,720 use this inside of a component. 40 00:02:59,330 --> 00:03:01,340 So I will go back over to what repositories list. 41 00:03:02,300 --> 00:03:10,520 I'm going to delete the EU's dispatch in action creator's import and replace it with use actions from 42 00:03:10,520 --> 00:03:14,180 up one directory, Hooke's use actions. 43 00:03:16,440 --> 00:03:18,630 I'll then clean up our dispatch line. 44 00:03:19,600 --> 00:03:24,490 I'm going to instead call let's do the call first, use actions. 45 00:03:25,800 --> 00:03:30,210 And then out of there, I'm going to D structure search repositories. 46 00:03:31,710 --> 00:03:36,540 So this version of search repositories like we just saw is pretty much already bound to that dispatch 47 00:03:36,540 --> 00:03:41,460 function, as soon as we call this, it is equivalent to doing this entire long line of code right there. 48 00:03:42,840 --> 00:03:49,290 Now, inside of our announcement, we can instead only do search repositories and pass term lot easier 49 00:03:49,290 --> 00:03:50,640 to use than what we had before. 50 00:03:52,230 --> 00:03:55,260 OK, so let's save this to a quick test. 51 00:03:56,570 --> 00:04:03,440 If I once again search for react, yep, looks like I am able to successfully reach out to that API 52 00:04:03,440 --> 00:04:05,430 and get a list of all those matching packages. 53 00:04:06,290 --> 00:04:12,110 Now, the last big thing we have to do is somehow reach into our store, get some piece of state, and 54 00:04:12,110 --> 00:04:17,060 then iterate over all the fetched packages we found and print out a line for each of them inside of 55 00:04:17,060 --> 00:04:17,959 our Geass block. 56 00:04:18,470 --> 00:04:20,390 So that very last step in the next video.