1
00:00:00,710 --> 00:00:04,640
The next big thing we're going to take care of is making this action creature that will make a request

2
00:00:04,640 --> 00:00:05,900
off to the NPM API.

3
00:00:06,180 --> 00:00:10,910
So we're going to call this thing search repositories and we're going to pass to it some search term.

4
00:00:10,910 --> 00:00:12,050
That's going to be a string.

5
00:00:12,900 --> 00:00:15,380
So let's get to it back inside of my code.

6
00:00:15,830 --> 00:00:17,090
I'm going to find my state directory.

7
00:00:17,310 --> 00:00:19,160
I'm going to make a new folder inside there.

8
00:00:19,370 --> 00:00:21,890
And I will call this action creators.

9
00:00:22,880 --> 00:00:26,240
And then inside there, I will make an index file.

10
00:00:26,570 --> 00:00:30,530
Now, once again, we're going to write our action crater directly inside this file.

11
00:00:30,710 --> 00:00:35,420
But if we started to grow our application in size, I could very easily create another file inside this

12
00:00:35,420 --> 00:00:40,850
directory, not something like repository action creator or something like that, something that kind

13
00:00:40,850 --> 00:00:44,780
of indicates what's inside there and then start to create all these different action craters we want

14
00:00:44,780 --> 00:00:47,240
to have inside of separate files inside that directory.

15
00:00:47,510 --> 00:00:52,580
So we don't necessarily have to create all of our actuators inside of index, not just in this case,

16
00:00:52,580 --> 00:00:56,180
because we've only got one kind of makes sense to just write it out directly inside of your.

17
00:00:57,610 --> 00:01:03,130
OK, then inside of index starts at the very top, I'm going to import a couple of different things

18
00:01:03,130 --> 00:01:03,730
to get started.

19
00:01:04,120 --> 00:01:09,040
First, I'm going to get Axios from Axios because we're going to use that to actually make our network

20
00:01:09,040 --> 00:01:09,550
request.

21
00:01:10,500 --> 00:01:11,820
And then going to import.

22
00:01:13,210 --> 00:01:19,330
Action types we're seeing is just action type is what we call it from up on directory action types.

23
00:01:23,590 --> 00:01:25,930
Action from up on directory.

24
00:01:29,660 --> 00:01:34,340
So then inside of here, we're going to write out our action creator, we are going to be making use

25
00:01:34,340 --> 00:01:39,020
of Redux Thunk in order to write out an asynchronous action creator, because, of course, we do have

26
00:01:39,020 --> 00:01:40,310
to make a network request.

27
00:01:41,130 --> 00:01:42,800
So I'm going to write out search.

28
00:01:43,850 --> 00:01:49,190
Repositories, that's the name of our action creator, it's going to take some kind of search term.

29
00:01:50,730 --> 00:01:54,390
I'm going to annotate that as a string, so that's going to be the name of the library that we are searching

30
00:01:54,390 --> 00:01:54,700
for.

31
00:01:54,720 --> 00:02:01,050
So react, react, whatever else then, because we are making use of redux thunk, I'm going to return

32
00:02:01,320 --> 00:02:02,550
an async function.

33
00:02:04,620 --> 00:02:09,930
That will be coupled with the dispatch function, and for right now, I'm going to annotate dispatch

34
00:02:10,110 --> 00:02:12,580
as any remember dispatch right here.

35
00:02:12,630 --> 00:02:19,020
This is how we manually dispatch actions directly into the store and get those all processed by our

36
00:02:19,020 --> 00:02:19,530
reducer.

37
00:02:20,320 --> 00:02:24,710
Now, inside of this function, we can write out as much async a weight logic as we want.

38
00:02:24,720 --> 00:02:26,490
We can use as much async code.

39
00:02:26,640 --> 00:02:31,620
And then eventually when we get some kind of response or possibly air from the NPM API, we can manually

40
00:02:31,620 --> 00:02:33,000
dispatch some kind of action.

41
00:02:34,760 --> 00:02:40,700
Now, inside of here, the first thing I want to do inside of this function is make sure that we immediately

42
00:02:40,700 --> 00:02:43,340
dispatch an action of type.

43
00:02:44,390 --> 00:02:48,650
Or I guess satisfying the interface search repositories action, because, again, this is going to

44
00:02:48,650 --> 00:02:54,020
be the thing that indicates to our reducer that we are about to make a request to go and find some list

45
00:02:54,020 --> 00:02:55,760
of repositories from NPM.

46
00:02:56,090 --> 00:03:01,040
And this is what's going to turn our loading flag over to true and hopefully eventually will update

47
00:03:01,040 --> 00:03:03,890
our UI to say, hey, we're currently making request.

48
00:03:05,690 --> 00:03:09,530
So in here, I'm going to immediately dispatch an action.

49
00:03:12,690 --> 00:03:15,960
Action type dot search repositories.

50
00:03:18,900 --> 00:03:23,730
After that, we can then start to make our actual request, I'm going to wrap up this request inside

51
00:03:23,730 --> 00:03:25,530
of a try catch block.

52
00:03:25,920 --> 00:03:30,660
So if anything goes wrong with the request itself will end up in the cash statement down here.

53
00:03:30,780 --> 00:03:34,770
And we can dispatch another action to indicate that something just went wrong with our request.

54
00:03:35,250 --> 00:03:36,440
Let's handle that case first.

55
00:03:36,480 --> 00:03:38,640
Let's handle the case or something going wrong.

56
00:03:39,230 --> 00:03:45,450
So down here, if anything goes wrong, I want to dispatch an action and that action should satisfy

57
00:03:45,450 --> 00:03:48,090
the interface of search repositories.

58
00:03:48,090 --> 00:03:54,180
Er so it should have a type of that right there in the payload describing exactly what just went wrong.

59
00:03:55,190 --> 00:03:56,530
It's all put in dispatch.

60
00:03:57,810 --> 00:04:02,160
Type of action type Zorch repositories, er.

61
00:04:03,260 --> 00:04:09,510
And then my payload is going to be the air message property, so that air object right there.

62
00:04:09,530 --> 00:04:11,860
All air objects in JavaScript have a message property.

63
00:04:12,020 --> 00:04:13,940
We're going to take that and provide it as a payload.

64
00:04:14,250 --> 00:04:16,600
That's can be a string describing what just went wrong.

65
00:04:18,040 --> 00:04:19,620
OK, so this is a really good start.

66
00:04:19,740 --> 00:04:24,520
It's now we'll take a very quick pause and then start to write out our actual request logic inside of

67
00:04:24,520 --> 00:04:26,290
our tribe block in just a moment.