1
00:00:01,140 --> 00:00:06,060
We've added in a lot of logic on our side, and we've got an action crater to fetch a list of cells

2
00:00:06,300 --> 00:00:09,030
in an action crater to save a list of cells as well.

3
00:00:09,450 --> 00:00:12,750
Now it's time to wire all this stuff up to the back side of our application.

4
00:00:13,200 --> 00:00:18,390
Before we do so, however, I'm going to go back into my state Staats file inside of here.

5
00:00:18,390 --> 00:00:22,470
You might recall that we've got a lot of logic to manually dispatch a couple of different actions.

6
00:00:22,810 --> 00:00:24,680
I don't really want to do any of this stuff anymore.

7
00:00:24,840 --> 00:00:27,810
I don't want to have a default list of cells being displayed on the screen.

8
00:00:27,810 --> 00:00:32,220
Instead, I want to test the save and fetch action creatures we just put together.

9
00:00:33,000 --> 00:00:36,640
I'm going to take all of these different dispatches that I had added in here manually.

10
00:00:36,660 --> 00:00:39,390
There's four in total and I'm going to delete all of them.

11
00:00:41,730 --> 00:00:45,800
By then no longer need the import for action type at the top, so I'm going to clean that up as well.

12
00:00:47,250 --> 00:00:52,080
OK, looks good now we need to go back over to the back side of our application and figure out where

13
00:00:52,080 --> 00:00:54,240
to call vetch cells and save cells.

14
00:00:55,120 --> 00:01:01,240
I'm going to find inside of our components directory the cell list file, remember, cell list is what

15
00:01:01,240 --> 00:01:04,180
is responsible for rendering a list of cells out onto the screen.

16
00:01:04,450 --> 00:01:07,000
It's kind of the main component inside of application right now.

17
00:01:07,310 --> 00:01:13,150
So I think that this component might be somewhat reasonable to add in, are fetching logic to say that

18
00:01:13,150 --> 00:01:18,280
whenever we are about to show our cell list component on the screen, let's call our fetch cells action

19
00:01:18,280 --> 00:01:18,690
creator.

20
00:01:19,450 --> 00:01:23,950
In addition, let's only worry about batch cells, but right now we'll take care of saving our list

21
00:01:23,950 --> 00:01:25,170
of cells in just a moment.

22
00:01:26,280 --> 00:01:31,470
So to get started, I first need to get access to my action crater inside of a component, you might

23
00:01:31,470 --> 00:01:35,340
recall that we had put together a hook called use actions for that.

24
00:01:35,760 --> 00:01:37,290
So let's import that at the top.

25
00:01:46,730 --> 00:01:51,800
Next, I want to make sure that I only call our fat cells action greeter at a very specific time when

26
00:01:51,800 --> 00:01:53,780
this component is first rendered to the screen.

27
00:01:54,260 --> 00:01:57,710
So for that, I'm going to import the effects from react.

28
00:02:02,340 --> 00:02:09,030
Then down inside my component, I'll first get my PETCH cells action creator by using the hook so that

29
00:02:09,030 --> 00:02:12,180
cells will come from use actions.

30
00:02:13,560 --> 00:02:16,250
Well, then set up my hook of use effect.

31
00:02:17,630 --> 00:02:22,160
I only want to call that function exactly one time, so I'll put in a second argument of an empty array

32
00:02:22,790 --> 00:02:23,750
and then inside their.

33
00:02:24,640 --> 00:02:26,020
I will call vetch cels.

34
00:02:27,940 --> 00:02:32,800
OK, so I'm going to go ahead and say this file and then going to go back over to my terminal.

35
00:02:33,630 --> 00:02:37,370
And I'm just going to make sure that between my process running or the eternal window running, the

36
00:02:37,370 --> 00:02:42,770
CLY and the other one running my NPM run start command inside of our project directory, I should not

37
00:02:42,770 --> 00:02:44,420
see any distinct error messages.

38
00:02:44,690 --> 00:02:47,540
I might see a warning or two, but I shouldn't see any errors.

39
00:02:48,140 --> 00:02:50,250
Let's then go back over to the browser and test this out.

40
00:02:50,780 --> 00:02:55,280
I do want you to know that we are going to get a very small error the first time we run this, but let's

41
00:02:55,280 --> 00:02:56,150
just see what happens.

42
00:02:56,690 --> 00:03:01,880
OK, so when I refresh at localhost four thousand five, I no longer see a starting list of cells appear

43
00:03:01,880 --> 00:03:02,420
on the screen.

44
00:03:02,780 --> 00:03:08,130
And if I open up my network request log, I will see a 404 coming from our cells request.

45
00:03:08,720 --> 00:03:12,460
So this is the request that we were issuing when we are attempting to fetch our list of cells.

46
00:03:12,890 --> 00:03:17,360
So it looks like if we click on that thing, we kind of are getting a response back from our Express

47
00:03:17,360 --> 00:03:17,920
API.

48
00:03:18,110 --> 00:03:22,130
I can kind of tell that based upon the formatting of this error message right here, but we're definitely

49
00:03:22,130 --> 00:03:25,820
not successfully accessing that request handler we had put together.

50
00:03:26,340 --> 00:03:29,060
So this is the very small bug that I put.

51
00:03:29,060 --> 00:03:31,430
I introduced into our application by mistake.

52
00:03:31,430 --> 00:03:32,240
I apologize.

53
00:03:32,600 --> 00:03:36,320
Let me just tell you very quickly what the error is if you go back over to our ED.

54
00:03:37,820 --> 00:03:42,050
And go into our local API index Dotts file.

55
00:03:43,030 --> 00:03:49,030
Inside of here, we had first set up all the stuff around the proxy and then set up our our cells router.

56
00:03:49,810 --> 00:03:54,430
So the issue here is that for every single incoming request, it will always be automatically peroxide.

57
00:03:54,790 --> 00:03:55,840
And that's not what we want.

58
00:03:56,110 --> 00:04:01,930
We first want to attempt at least attempt to make use of some of the different root handlers we put

59
00:04:01,930 --> 00:04:03,310
together inside of our cells router.

60
00:04:03,550 --> 00:04:08,020
And if none of those different root handlers match the URL and the method of the incoming request,

61
00:04:08,350 --> 00:04:11,190
then we want to fall back to making use of our proxy middleware.

62
00:04:11,860 --> 00:04:18,100
So to make sure that's the case, we just have to move the obtuse statement above all of this use proxy

63
00:04:18,100 --> 00:04:18,450
stuff.

64
00:04:19,560 --> 00:04:23,670
Now, whenever a request comes in, we're going to first try to match it inside that router and if it

65
00:04:23,670 --> 00:04:25,920
doesn't match, then we'll follow through to our middleware.

66
00:04:26,670 --> 00:04:27,300
That was a bug.

67
00:04:28,730 --> 00:04:33,020
All right, so let's save that and then we just have to very quickly restart our Seelie the back over

68
00:04:33,020 --> 00:04:36,180
at the terminal, I'm going to restart that node index.

69
00:04:36,180 --> 00:04:37,460
Just serve command.

70
00:04:38,430 --> 00:04:41,910
And now we should be able to go back over to our application refresh.

71
00:04:42,920 --> 00:04:46,550
And then see a status code of 200 from the list of cells.

72
00:04:48,040 --> 00:04:52,540
So, of course, right now we don't have any cells whatsoever, but we at least are successfully loading

73
00:04:52,540 --> 00:04:53,470
up some data now.

74
00:04:53,800 --> 00:04:58,060
We are loading up a list of cells and hopefully passing it correctly inside of our reducer.

75
00:04:59,150 --> 00:05:00,200
This definitely looks good.

76
00:05:00,440 --> 00:05:05,570
It's now the last thing to do is make sure that any time user changes something inside of a cell or

77
00:05:05,570 --> 00:05:10,940
adds a cell or reorders them or anything like that, we need to attempt to save that list of cells to

78
00:05:10,940 --> 00:05:11,780
our API as well.

79
00:05:12,320 --> 00:05:13,800
So let's take care of that in just a moment.