1
00:00:01,030 --> 00:00:07,300
Let's put together our cells action krater inside of our Action Creatures Index Ortez file inside of

2
00:00:07,300 --> 00:00:08,330
here at the very top.

3
00:00:08,650 --> 00:00:13,180
I'm going to import Axios right away, which we're going to use to make our network request.

4
00:00:14,190 --> 00:00:19,590
I'm also going to find my import statement from the sell file, and once again, I'm going to also import

5
00:00:19,590 --> 00:00:23,070
the cell interface because I suspect we're probably going to need it inside of your.

6
00:00:24,330 --> 00:00:25,890
I'll then go down to the bottom, the file.

7
00:00:28,320 --> 00:00:33,720
And we will add in a new action creator that we will call simply vetch cels.

8
00:00:35,660 --> 00:00:39,200
Because we're going to be making a network request inside of your we're definitely going to want to

9
00:00:39,200 --> 00:00:43,540
use Redux Thunk, it's going to make sure that Petch sells, is going to return a function.

10
00:00:44,270 --> 00:00:48,370
And remember, that inner function is going to be called with our dispatch function.

11
00:00:48,710 --> 00:00:53,990
So I will list out that argument of dispatch and I will annotate its type as dispatch.

12
00:00:54,880 --> 00:00:59,560
Action and remember this whole thing we went through right here, we spoke about that at great length,

13
00:00:59,830 --> 00:01:04,450
that type invitation is what's going to make sure that we can only call dispatch with a properly typed

14
00:01:04,450 --> 00:01:05,440
action object.

15
00:01:08,440 --> 00:01:14,140
I'm also going to mark this function right here as async, because we're going to make a network request

16
00:01:14,140 --> 00:01:14,680
inside their.

17
00:01:16,350 --> 00:01:21,060
And then finally, we can start to write out our actual request logic again, the first thing we probably

18
00:01:21,060 --> 00:01:24,810
want to do is dispatch an action to say, hey, we are about to make a request here.

19
00:01:25,410 --> 00:01:27,750
We created an action type specifically for that.

20
00:01:27,750 --> 00:01:28,770
So I'm going to dispatch.

21
00:01:29,760 --> 00:01:36,120
And action with a type of action type thought that sells.

22
00:01:38,240 --> 00:01:41,930
Again, only purpose of this one is to flip that loading flag over to true.

23
00:01:43,310 --> 00:01:45,490
Well, then put down a try catch statement.

24
00:01:45,980 --> 00:01:47,770
We're going to make our request from inside of here.

25
00:01:47,930 --> 00:01:51,680
So if anything goes wrong with the request, we can capture the error that occurred in dispatch.

26
00:01:51,680 --> 00:01:53,600
Another action describing that fact.

27
00:01:54,860 --> 00:01:59,300
Inside the try, let's first make a request, we'll do a request.

28
00:01:59,990 --> 00:02:07,700
I'm going to d structure off the data property off of a weight axios Moorgate cels.

29
00:02:10,759 --> 00:02:14,620
Now, remember, once again, this data thing right here, the state of property, that is the response

30
00:02:14,620 --> 00:02:20,110
we get back from our API and as we just saw inside the request handler we put together, we are sending

31
00:02:20,110 --> 00:02:22,990
back an array with all of our cell objects inside of it.

32
00:02:23,380 --> 00:02:26,920
So data right there, that should be an array of cell objects.

33
00:02:27,430 --> 00:02:29,830
Let's try to just annotate this thing in that fashion.

34
00:02:29,950 --> 00:02:31,540
I'm going to say that data is.

35
00:02:33,230 --> 00:02:34,700
A cell array.

36
00:02:36,270 --> 00:02:39,290
Now, if I mouseover data, I'm told, yep, that is an array of cells.

37
00:02:41,060 --> 00:02:45,590
Now we can use that data property to dispatch an action that we will do a dispatch.

38
00:02:47,300 --> 00:02:51,680
With a type of action type dot that sells complete.

39
00:02:54,710 --> 00:02:56,180
And our payload in this case.

40
00:02:57,220 --> 00:02:58,930
Will be that data array.

41
00:03:01,860 --> 00:03:07,380
Hey, that looks pretty good now we can just handle the case, we're going to leave the case just really

42
00:03:07,380 --> 00:03:08,550
simple and straightforward here.

43
00:03:08,800 --> 00:03:13,380
So we're just going to dispatch the appropriate action type and we'll just put on whatever message came

44
00:03:13,380 --> 00:03:14,430
across inside the air.

45
00:03:14,430 --> 00:03:22,410
So we'll essentially just do this batch with a type of action type that sells air with a payload of

46
00:03:22,830 --> 00:03:24,270
our message.

47
00:03:25,460 --> 00:03:29,840
If anything goes wrong with, say, our network connection, error message is probably going to be something

48
00:03:29,840 --> 00:03:31,520
like a network request failed.

49
00:03:31,790 --> 00:03:35,080
So it's not a very descriptive error message, but it's good enough right now.

50
00:03:37,110 --> 00:03:39,450
OK, so that looks pretty good for our action creator.

51
00:03:40,430 --> 00:03:44,690
Now, the last thing we have to do is go back over to our cells reducer and make sure that we handle

52
00:03:44,870 --> 00:03:46,700
these three different action types.

53
00:03:47,180 --> 00:03:48,910
Let's take care of that step in just a moment.