1
00:00:00,050 --> 00:00:00,310
Okay.

2
00:00:00,380 --> 00:00:02,740
And up next, let's discuss loaders.

3
00:00:02,750 --> 00:00:12,140
So just like we have actions, we also have loaders and loaders essentially allow us to provide data

4
00:00:12,140 --> 00:00:14,930
to the route before it renders.

5
00:00:14,930 --> 00:00:21,020
So unlike the typical setup where, for example, we would set up the use effect and then when the component

6
00:00:21,020 --> 00:00:24,200
mounts, that's when we fetch and all that.

7
00:00:24,230 --> 00:00:30,380
In this case, we'll right away provide the data so you can think of it as pre fetching the data, which

8
00:00:30,380 --> 00:00:32,540
is obviously super, super cool.

9
00:00:32,540 --> 00:00:40,520
And we'll start with the very basic setup and then of course we'll work on the actual setup in the dashboard

10
00:00:40,550 --> 00:00:40,940
layout.

11
00:00:41,090 --> 00:00:44,060
So for starters, here's what I want to do.

12
00:00:44,090 --> 00:00:51,830
We're going to navigate to App JS and I can tell you right away that the setup is almost the same.

13
00:00:52,070 --> 00:00:57,290
The only thing we need to keep in mind that of course the property is going to be different Now why

14
00:00:57,290 --> 00:00:58,190
am I telling you that?

15
00:00:58,190 --> 00:00:58,880
Because.

16
00:00:59,620 --> 00:01:06,010
I want you to understand that of course you can set up the functionality in here as well in the app,

17
00:01:06,730 --> 00:01:13,780
but just like with actions, I'll set it up in the actual page, in the dashboard layout page and I'll

18
00:01:13,780 --> 00:01:18,620
just export from the page and set it here equal to a property.

19
00:01:18,640 --> 00:01:22,960
So instead of action, we're looking for loader.

20
00:01:22,960 --> 00:01:26,110
And again, if you want, you can set up the function over here.

21
00:01:26,110 --> 00:01:28,990
But in my case I'll actually do it in the page.

22
00:01:29,620 --> 00:01:35,290
So let me navigate back and I'm going to do it below or above.

23
00:01:35,630 --> 00:01:36,970
Doesn't really matter.

24
00:01:37,450 --> 00:01:38,920
The create context.

25
00:01:39,160 --> 00:01:39,940
Same deal.

26
00:01:39,970 --> 00:01:43,900
I'm not going to be particularly original and I'm going to call this lower.

27
00:01:45,820 --> 00:01:48,880
And this is going to be our function.

28
00:01:49,060 --> 00:01:49,900
Same deal.

29
00:01:49,900 --> 00:01:53,530
We want to always, always return something from this function.

30
00:01:53,950 --> 00:01:56,350
And for now, I'm just going to say hello, world.

31
00:01:56,740 --> 00:01:57,610
Let's save it.

32
00:01:57,610 --> 00:02:02,890
Since we're exporting, we want to go back to App JS and we want to import.

33
00:02:02,890 --> 00:02:09,580
In this case, of course it's a loader, so we're going to go here with Loader as and then let's call

34
00:02:09,580 --> 00:02:11,200
it dashboard loader.

35
00:02:13,740 --> 00:02:15,690
And now we just need to look for the page.

36
00:02:15,840 --> 00:02:24,660
So from then pages and more specifically dashboard layout, let's scroll down, let's look for our loader

37
00:02:25,020 --> 00:02:28,080
and we're going to go with the dashboard loader.

38
00:02:28,470 --> 00:02:35,490
And what's really awesome, whatever we return from this function is going to be right away available

39
00:02:35,490 --> 00:02:37,560
in our component.

40
00:02:37,560 --> 00:02:39,870
So again, we're not setting up the use effect.

41
00:02:39,900 --> 00:02:43,950
This is not going to be available only after the component renders.

42
00:02:43,980 --> 00:02:48,300
No, pretty much immediately we'll have access to this data.

43
00:02:48,300 --> 00:02:52,140
So we'll fetch it here and we'll make it available in the component.

44
00:02:52,170 --> 00:02:53,970
Now how we can make it available?

45
00:02:53,970 --> 00:02:59,310
Well, we need to use the use loader data hook and you're not.

46
00:03:00,120 --> 00:03:01,110
Again, same deal.

47
00:03:01,230 --> 00:03:06,780
I'll just import the redirect and use loader data to save on typing.

48
00:03:07,290 --> 00:03:11,100
Basically, we already have the outlet, so we grab this hook.

49
00:03:11,780 --> 00:03:13,790
And now let me showcase this.

50
00:03:13,910 --> 00:03:16,010
So for now, I'm just going to call this data.

51
00:03:16,890 --> 00:03:19,290
And we're going to go with user loader data.

52
00:03:19,410 --> 00:03:23,570
We will invoke it and we're going to log it.

53
00:03:24,300 --> 00:03:25,710
So I'll get over here.

54
00:03:25,950 --> 00:03:27,300
And now notice.

55
00:03:27,940 --> 00:03:28,990
The moment pretty much.

56
00:03:29,020 --> 00:03:30,100
I refresh.

57
00:03:30,280 --> 00:03:32,590
I'll have access to this Hello world.

58
00:03:32,800 --> 00:03:40,060
And of course, eventually we can set up some awesome functionality where we can fetch the jobs, we

59
00:03:40,060 --> 00:03:41,530
can fetch the user.

60
00:03:41,530 --> 00:03:45,040
If there is an error, we can do something.

61
00:03:45,040 --> 00:03:51,040
We can either redirect the user or we can just showcase the error message and all that cool stuff.

62
00:03:51,040 --> 00:04:02,230
Again, super super useful function a loader one which allows us to get the data before the component

63
00:04:02,260 --> 00:04:04,330
even renders.

64
00:04:04,330 --> 00:04:06,250
And same deal as with action.

65
00:04:06,250 --> 00:04:11,590
You always, always, always want to return something from this function if you're just going to go

66
00:04:11,590 --> 00:04:12,550
with nothing.

67
00:04:12,760 --> 00:04:15,310
Same deal you have this something went wrong.

68
00:04:15,310 --> 00:04:20,350
And if you take a look at the error message, they basically confirm what I was just saying.

69
00:04:20,350 --> 00:04:26,980
And with this in place now, we can set up a request to get the current user in the dashboard layout

70
00:04:26,980 --> 00:04:27,580
page.