1
00:00:00,000 --> 00:00:00,380
Okay.

2
00:00:00,480 --> 00:00:07,200
And before we move on to the next topic, let's also cover how to access data in the component which

3
00:00:07,200 --> 00:00:09,120
is provided by the action.

4
00:00:09,150 --> 00:00:16,260
Now, right away, want to mention that we won't use such approach in this project basically in this

5
00:00:16,260 --> 00:00:16,850
course.

6
00:00:16,860 --> 00:00:19,560
So technically this video is optional.

7
00:00:19,740 --> 00:00:25,010
If you don't want to type along, you don't have to just sit back and relax.

8
00:00:25,020 --> 00:00:30,720
But I thought it's super important for you to know such approach just in case you want to implement

9
00:00:30,720 --> 00:00:33,470
it in your own application.

10
00:00:33,480 --> 00:00:35,640
So effectively, what am I talking about?

11
00:00:35,640 --> 00:00:42,120
Well, if we take a look at our login one, notice how we're not technically accessing any of this data

12
00:00:42,120 --> 00:00:43,230
in the component.

13
00:00:43,230 --> 00:00:50,550
So in here, yes, we return, if we're successful, a redirect and effectively we go to a dashboard

14
00:00:50,550 --> 00:00:51,060
page.

15
00:00:51,060 --> 00:00:55,050
And if there is an error, yes, we do return the error.

16
00:00:55,050 --> 00:01:00,870
But I mean, we just call toast before that and we're pretty much call it a day.

17
00:01:00,960 --> 00:01:04,739
Now, why do we want to access data coming back from the action?

18
00:01:04,739 --> 00:01:09,030
Well, what if you want to do some error checking before you send the request?

19
00:01:09,060 --> 00:01:15,240
Or maybe you just want to display the error in the component, not in the toast.

20
00:01:15,240 --> 00:01:18,750
So for starters, let's go back where we have the action.

21
00:01:18,750 --> 00:01:26,910
And before we make a request back to our server, why don't we make a errors object?

22
00:01:26,910 --> 00:01:33,150
And also, why don't we make a check where if the password length is, for example, less than three,

23
00:01:33,210 --> 00:01:37,650
then we return the errors object with some kind of message.

24
00:01:37,650 --> 00:01:40,770
So right after data I'm going to go with errors.

25
00:01:41,500 --> 00:01:44,110
We're going to set it up as an object.

26
00:01:44,210 --> 00:01:48,040
There's going to be a message property, and for starters, it's just going to be empty.

27
00:01:48,160 --> 00:01:50,400
Then I'll make that check.

28
00:01:50,410 --> 00:01:52,900
Like I said, you can set up whatever check you want.

29
00:01:52,930 --> 00:01:57,860
And of course, this is technically going to be only dummy check, but I'm going to go with data.

30
00:01:57,880 --> 00:02:04,480
Remember, both of those values are located there since run object from entries.

31
00:02:04,510 --> 00:02:06,550
Then I'm looking for password.

32
00:02:06,580 --> 00:02:10,360
More specifically, that's the property which is going to be over there.

33
00:02:10,360 --> 00:02:13,600
And then I just want to simply go with length.

34
00:02:14,610 --> 00:02:17,270
And I'll say if it's less than three.

35
00:02:17,280 --> 00:02:18,550
So what do I want to do?

36
00:02:18,570 --> 00:02:24,030
Well, I have errors, object, and I'll set the message property equal to something.

37
00:02:24,040 --> 00:02:27,060
So in my case I'm going to go with password too short.

38
00:02:27,090 --> 00:02:31,850
Then, of course I want to return and I want to return the errors object.

39
00:02:31,860 --> 00:02:39,690
So notice how we're not going to even make the request if we'll hit this condition now in order to access

40
00:02:39,690 --> 00:02:45,390
the errors object, I want to go up and we're looking for use action data.

41
00:02:45,390 --> 00:02:48,990
So again, the hook name is use action data.

42
00:02:49,020 --> 00:02:56,220
Then we navigate back to our component and effectively we'll have access to the object.

43
00:02:56,250 --> 00:02:59,100
Now I'm going to skip the part where I console.log.

44
00:02:59,100 --> 00:03:01,620
If you want to do that, please do so.

45
00:03:01,620 --> 00:03:03,810
But in my case I'm just going to go with const.

46
00:03:04,290 --> 00:03:08,010
I'll set it equal to an errors, then we'll go use action data.

47
00:03:08,010 --> 00:03:13,560
Please keep in mind that initially of course it's going to be undefined, so this will only have some

48
00:03:13,560 --> 00:03:17,950
kind of value if we hit this condition once we submit the form.

49
00:03:18,130 --> 00:03:25,120
And then let's keep on moving and let's imagine that right after I don't know the heading for.

50
00:03:25,120 --> 00:03:28,030
I want to set up some kind of paragraph over here.

51
00:03:28,300 --> 00:03:30,850
And essentially there's going to be a condition.

52
00:03:30,850 --> 00:03:36,640
I'll say over here, if the errors message has some kind of value, well then display it in the paragraph.

53
00:03:36,640 --> 00:03:40,210
So in here, let's go with optional chaining dot and then message.

54
00:03:40,210 --> 00:03:44,500
And if it has some kind of value, then we want to go with paragraph.

55
00:03:44,680 --> 00:03:50,200
Then let's add a style over here and we're going to go with color red again.

56
00:03:50,200 --> 00:03:52,420
I'll remove all of this code once we're done.

57
00:03:52,630 --> 00:03:56,290
And then basically we want to display the errors.

58
00:03:57,190 --> 00:03:58,450
And message.

59
00:03:58,570 --> 00:03:59,870
Let's save it.

60
00:03:59,890 --> 00:04:02,050
Let's navigate to a browser.

61
00:04:02,810 --> 00:04:05,090
Going to provide some kind of value here.

62
00:04:05,800 --> 00:04:10,000
And I'm going to provide only two characters since that is less than three.

63
00:04:10,030 --> 00:04:13,810
Once we submit notice, now we have password to short.

64
00:04:13,960 --> 00:04:17,500
Again, if you want to log what's happening, please do so.

65
00:04:17,500 --> 00:04:26,020
But effectively we have this errors that we set up in the action and even before we send the request,

66
00:04:26,200 --> 00:04:28,330
we return from the action.

67
00:04:28,330 --> 00:04:30,100
Remember, we always, always want to return.

68
00:04:30,100 --> 00:04:34,690
And then in order to access that, well, we just need to use use action data again.

69
00:04:34,690 --> 00:04:41,740
Initially it's going to be undefined when the component mounts, but once we submit the form and if

70
00:04:41,740 --> 00:04:47,350
there is an error, if we return it, then yes, we'll access it and then we can do something about

71
00:04:47,350 --> 00:04:47,650
it.

72
00:04:47,680 --> 00:04:51,700
Now also we can do the same thing when we make the request again.

73
00:04:51,700 --> 00:04:55,030
At the moment we're just pretty much displaying the toast.

74
00:04:55,060 --> 00:04:56,950
However, we can change this around.

75
00:04:57,160 --> 00:05:02,470
I can go with, okay, let's comment this one out so we're not going to use the toast.

76
00:05:02,470 --> 00:05:10,060
Instead, remember, we have the errors object in there, we have the message, and now I will pretty

77
00:05:10,060 --> 00:05:14,290
much set it equal to whatever is coming back from the server.

78
00:05:14,290 --> 00:05:16,560
So this logic doesn't change.

79
00:05:16,570 --> 00:05:20,020
The only difference is, of course, that now we're returning errors.

80
00:05:20,020 --> 00:05:28,420
So if I navigate back right now and let's say if I add more characters but my password still doesn't

81
00:05:28,420 --> 00:05:33,580
match whatever I have in the database, now of course I'm going to have invalid credentials.

82
00:05:33,580 --> 00:05:36,280
So this is coming back from the back end.

83
00:05:36,310 --> 00:05:38,260
This is coming back from my server.

84
00:05:38,260 --> 00:05:40,990
So this is how we can access the data.

85
00:05:41,750 --> 00:05:43,580
From the action.

86
00:05:43,580 --> 00:05:47,660
Again, the hook we're looking for is use action data.