1
00:00:00,910 --> 00:00:04,400
Let's move back over to our local client project inside there.

2
00:00:04,450 --> 00:00:07,990
You might recall we've got a Sarsae directory with a state folder inside of it.

3
00:00:08,300 --> 00:00:11,230
Inside of state is where our entire redox application lives.

4
00:00:11,800 --> 00:00:16,300
So we're going to start to add in a couple of different actions, action types in action, creators

5
00:00:16,510 --> 00:00:19,210
to save cells and batch cells as well.

6
00:00:19,750 --> 00:00:23,080
We're going to first add in the ability to fetch a list of cells from our API.

7
00:00:23,470 --> 00:00:27,400
Let's take a look at a quick diagram very quickly just to understand what we really need to do here.

8
00:00:28,630 --> 00:00:33,580
OK, so this entire diagram is all about fetching a list of cells, the first thing to understand is

9
00:00:33,580 --> 00:00:36,850
that this is a process we only have to do when our application first starts up.

10
00:00:37,270 --> 00:00:42,190
So when a user first goes to localhost four thousand five and loads up the react application site,

11
00:00:42,190 --> 00:00:46,720
the browser, we want to instantly attempt to fetch a list of cells from our API.

12
00:00:47,400 --> 00:00:51,940
So as a part of that process, when we start putting a list of cells, there's a couple of different

13
00:00:51,940 --> 00:00:57,520
actions we're going to want to dispatch first before we take a look at any of these further boxes inside

14
00:00:57,520 --> 00:00:57,790
of here.

15
00:00:57,970 --> 00:01:02,230
Let me just give you a quick reminder about some of the state we have inside of our redox application.

16
00:01:03,430 --> 00:01:08,950
So back over inside my state directory, I'm going to find cells reducer inside of here, we have the

17
00:01:08,950 --> 00:01:11,560
interface describing our cells reduce our piece of state.

18
00:01:11,890 --> 00:01:17,110
And you might recall we had added in a loading flag and an air flag as well.

19
00:01:18,400 --> 00:01:22,870
And we had said that we would make use of these two properties any time that we started to load or fetch

20
00:01:22,870 --> 00:01:25,560
cells, so just keep those in mind for just a moment.

21
00:01:27,570 --> 00:01:32,040
So as soon as we start to make a request to our API, we're going to probably want to immediately dispatch

22
00:01:32,040 --> 00:01:36,780
an action to make sure that we change that loading flag to true inside of ourselves reducer.

23
00:01:37,050 --> 00:01:40,530
Just so our entire application knows, we are currently attempting to load up some data.

24
00:01:41,400 --> 00:01:46,350
We can then make a request to our API and then depending upon the response we get back whether there

25
00:01:46,350 --> 00:01:51,990
is an error or not, we can dispatch a second action, either update the list of cells inside of her

26
00:01:51,990 --> 00:01:54,690
Doozer or set the air property if one occurred.

27
00:01:55,230 --> 00:01:56,760
So in total to fetch cells.

28
00:01:56,970 --> 00:01:59,730
We are talking about three different action types.

29
00:02:00,360 --> 00:02:05,400
One to describe the fact that we are attempting to load up some data, another to describe finishing

30
00:02:05,400 --> 00:02:10,350
loading the data, and then a third to say, hey, we tried to fetch data, but there was an error during

31
00:02:10,350 --> 00:02:11,039
the process.

32
00:02:12,510 --> 00:02:17,060
The last thing I want to mention very quickly around setting the list of cells, remember, our API

33
00:02:17,080 --> 00:02:22,230
is going to return an array of cell objects, but that is not how we actually store this data inside

34
00:02:22,230 --> 00:02:28,170
of our reducer instead of reducer stores, that list of or stores, all the different cells inside of

35
00:02:28,170 --> 00:02:28,950
a data object.

36
00:02:29,310 --> 00:02:31,470
And there's also that order array as well.

37
00:02:31,860 --> 00:02:35,970
So when we get the response back from our API, we're going have to do a little bit of parsing logic

38
00:02:35,970 --> 00:02:41,730
or essentially just take that array and just process it in some way so we can get our order array and

39
00:02:41,730 --> 00:02:43,000
the data object as well.

40
00:02:43,290 --> 00:02:44,820
So just some stuff to keep in mind.

41
00:02:45,980 --> 00:02:50,240
OK, so now that we understand what's going on here, let's start to add in some of these different

42
00:02:50,240 --> 00:02:55,250
action types, actions, action craters, all that stuff, we'll first begin by adding in some different

43
00:02:55,250 --> 00:02:56,060
action types.

44
00:02:56,930 --> 00:02:59,990
So inside of my action types index dots file.

45
00:03:01,870 --> 00:03:03,100
I'm going to add in first.

46
00:03:05,870 --> 00:03:06,560
Cels.

47
00:03:09,590 --> 00:03:12,080
Batch sells complete.

48
00:03:15,440 --> 00:03:17,930
And finally, vetch sells air.

49
00:03:21,280 --> 00:03:25,810
These are my three different action types, and I bet you could guess what each of them does that sells

50
00:03:25,810 --> 00:03:29,590
in particular is going to describe the fact that we're attempting to fetch a list of cells.

51
00:03:29,870 --> 00:03:34,390
Does that kind of initial action that we're going to use to flip that loading flag over to Drew?

52
00:03:36,190 --> 00:03:42,010
Let's save this next up, we'll go over to our actions inducts file and we'll define a couple of different

53
00:03:42,010 --> 00:03:44,980
action interfaces to go along with these three different action types.

54
00:03:46,420 --> 00:03:49,120
So here's my actions index file.

55
00:03:50,080 --> 00:03:56,050
At the very top, you might recall that we had to find a cell types interface or was an enum, I forget

56
00:03:56,050 --> 00:03:59,050
it was just a plain type inside the cell file.

57
00:03:59,470 --> 00:04:02,510
And inside there, we had also defined a cell interface as well.

58
00:04:02,920 --> 00:04:04,650
We're going to need that interface in just a moment.

59
00:04:04,750 --> 00:04:10,090
So I'm going to update the import statement right here right away to get cell and cell types.

60
00:04:12,070 --> 00:04:14,050
OK, let's then go down to the very bottom of the file.

61
00:04:15,630 --> 00:04:22,140
And right above our expert for type action, we're going to add in an expert or an interface of.

62
00:04:23,020 --> 00:04:24,220
Batch sells.

63
00:04:28,310 --> 00:04:32,150
And we'll fill out the implementation on each of these in just a moment, or really the type definition,

64
00:04:32,450 --> 00:04:34,160
let's first write out the three interfaces.

65
00:04:34,760 --> 00:04:38,540
The next one will be Fetch Sells, Complete Action.

66
00:04:41,800 --> 00:04:45,250
And then Fetch sells air action.

67
00:04:47,360 --> 00:04:51,770
All right, let's go through each of these, the first off on the first one, probably want to type

68
00:04:51,770 --> 00:04:55,280
of action type dots, you guessed it, that sells.

69
00:04:56,600 --> 00:04:58,610
We don't really need any payload in that case.

70
00:04:59,630 --> 00:05:05,630
On the next one, we'll do a type of action type dot that sells complete this one, we probably want

71
00:05:05,630 --> 00:05:09,640
a payload and the payload will probably be whatever response we just got back from the API.

72
00:05:10,010 --> 00:05:12,560
So in this case will probably be our array of cells.

73
00:05:12,980 --> 00:05:18,740
We'll say that the payload is going to be cell array and that's why we just imported the cell interface

74
00:05:18,740 --> 00:05:19,640
at the top of this file.

75
00:05:21,680 --> 00:05:25,250
And then finally, Batch sells air action for this one.

76
00:05:26,730 --> 00:05:27,750
We'll put in our type.

77
00:05:31,800 --> 00:05:32,940
And a payload.

78
00:05:34,170 --> 00:05:38,610
And we're going to have our payload be just a string, just an error message saying, hey, here's what

79
00:05:38,610 --> 00:05:39,120
went wrong.

80
00:05:39,570 --> 00:05:41,160
I'm going to say payload of string.

81
00:05:43,460 --> 00:05:48,770
All right, so there are three different action interfaces we now need to make sure that we combine

82
00:05:48,770 --> 00:05:51,740
all three of these with our overall action type of the very bottom.

83
00:05:52,280 --> 00:05:58,060
It's going to make sure we clean up the semicolon right there and then add on and or I can Glenarden

84
00:05:58,160 --> 00:06:00,200
or know what that really technically means.

85
00:06:00,200 --> 00:06:01,400
But you can kind of think of it that way.

86
00:06:01,670 --> 00:06:02,990
We'll do fat cells action.

87
00:06:03,210 --> 00:06:08,360
I'm just going to copy paste these down just to save some time that cells complete action.

88
00:06:09,820 --> 00:06:12,220
And Fetch sells Aarakshan.

89
00:06:13,350 --> 00:06:13,970
There we go.

90
00:06:15,790 --> 00:06:17,980
OK, so we're off to a pretty good start now.

91
00:06:18,000 --> 00:06:22,390
We'll take a pause right here, come back in just a moment and start putting together our fat cells

92
00:06:22,390 --> 00:06:23,290
action creator.