1
00:00:01,250 --> 00:00:05,600
Inside of our own cement function, we now want to take this term piece of state right here and use

2
00:00:05,600 --> 00:00:09,230
it to call our action creator of search repositories.

3
00:00:09,570 --> 00:00:11,240
So that's how we're going to focus on in this video.

4
00:00:11,660 --> 00:00:15,800
We're going to first focus on how we just do this with a kind of normal JavaScript approach.

5
00:00:15,920 --> 00:00:19,160
And then, as usual, we'll take a look at some ways to improve it with some typescript.

6
00:00:19,700 --> 00:00:27,170
I'm going to first get started by adding in an important statement at the very top of use dispatch from.

7
00:00:28,590 --> 00:00:33,800
React redux now, if you are not familiar with this hook right here, this is a hook coming from the,

8
00:00:33,810 --> 00:00:38,520
you guessed it, React Redux library, it gives us access to the dispatch function directly inside of

9
00:00:38,520 --> 00:00:43,020
a component so we can use this function to manually dispatch an action creator.

10
00:00:43,530 --> 00:00:46,460
So just importing used dispatch by itself isn't enough.

11
00:00:46,680 --> 00:00:52,530
We also have to also import our action grader to remember we have already exported all of our different

12
00:00:52,530 --> 00:00:55,230
action graders from the states index file.

13
00:00:55,740 --> 00:01:01,890
We exported something inside of here called action creators so we can import action creators into repositories

14
00:01:01,890 --> 00:01:05,640
list and that will give us access to all the different action creators we have created.

15
00:01:07,330 --> 00:01:09,730
So back inside of our components, I will import.

16
00:01:10,680 --> 00:01:12,150
Action creators.

17
00:01:13,050 --> 00:01:16,380
From up one directory, St..

18
00:01:18,410 --> 00:01:23,180
Then inside of our component, we're going to first use the EU's dispatch hook to get a reference to

19
00:01:23,180 --> 00:01:24,500
the dispatch function.

20
00:01:25,040 --> 00:01:30,080
So for that, we will say dispatch is use dispatch like so.

21
00:01:30,990 --> 00:01:36,870
So, again, this is the same kind of dispatch function that we have access to inside of redox functions

22
00:01:37,290 --> 00:01:41,460
so we can call dispatch and provide whatever action krater we want to eventually invoke.

23
00:01:42,480 --> 00:01:49,890
So I will do a dispatch, I'm going to pass into that action creators, Dotts search repositories and

24
00:01:49,890 --> 00:01:50,790
then pass Interm.

25
00:01:50,910 --> 00:01:55,410
And I want to point out right away how crazy this line of code looks.

26
00:01:55,950 --> 00:02:00,170
This is just way just a lot of code to just dispatch in action.

27
00:02:00,750 --> 00:02:02,850
So this is probably going to work just fine.

28
00:02:03,060 --> 00:02:07,830
But again, I just want to point out, this doesn't look great and surely we can probably think of some

29
00:02:07,830 --> 00:02:11,910
way to somehow condense this and make it just a little bit more convenient to eventually call some kind

30
00:02:11,910 --> 00:02:12,900
of action creator.

31
00:02:13,110 --> 00:02:15,960
And yeah, don't worry, we're definitely going to do that first.

32
00:02:15,960 --> 00:02:17,160
However, let's just say this.

33
00:02:17,420 --> 00:02:21,840
Make sure that we can actually call this action creator, make sure we can see some network request

34
00:02:21,840 --> 00:02:26,190
going off to the API, make sure that we get back some information and make sure that we do not get

35
00:02:26,190 --> 00:02:27,570
any kind of big error messages.

36
00:02:29,240 --> 00:02:34,700
So I'm going to refresh the page, I'll search for react, I'm going to also pull up in my network request

37
00:02:34,700 --> 00:02:35,000
tab.

38
00:02:36,930 --> 00:02:42,870
And I can very easily see, yup, there's my request right there off to NPM, and presumably I'm going

39
00:02:42,870 --> 00:02:46,950
to get back some response that has a bunch of all the phone packages inside of it.

40
00:02:47,550 --> 00:02:49,230
So I would say that definitely looks pretty good.

41
00:02:49,410 --> 00:02:51,690
It looks like we are able to call the action creator.

42
00:02:52,260 --> 00:02:55,820
But as I mentioned, yeah, this code is almost laughable.

43
00:02:55,830 --> 00:02:56,730
It's just not great.

44
00:02:57,070 --> 00:03:01,320
So we definitely need to somehow improve this little bit and make sure that is just a little bit more

45
00:03:01,320 --> 00:03:04,050
convenient to actually call one of our action creators.