1
00:00:00,240 --> 00:00:05,950
Excellent, once we have set up our super nifty form and function, like I previously mentioned.

2
00:00:05,970 --> 00:00:13,740
Now I would want to work on a single product at the moment, if we click on a link, notice we navigate

3
00:00:13,740 --> 00:00:17,860
two products online, whatever is the idea.

4
00:00:18,420 --> 00:00:24,720
And of course, as I'm clicking on different product, I'm still navigating to the same page.

5
00:00:25,080 --> 00:00:30,080
But of course, the URL is a bit different because each product has the unique idea.

6
00:00:30,630 --> 00:00:36,810
And I would want to start by setting up the fetch function in the products because a lot of things are

7
00:00:36,810 --> 00:00:38,040
going to be exactly the same.

8
00:00:38,670 --> 00:00:44,100
Difference, of course, is going to be what we are dispatching because at the moment we're working

9
00:00:44,100 --> 00:00:46,590
with the product, with the whole array.

10
00:00:46,890 --> 00:00:49,560
Now, of course, we'll deal with a single product.

11
00:00:49,920 --> 00:00:56,310
And also, as far as this function, when we're pitching for a single product, we won't invoke it over

12
00:00:56,310 --> 00:00:56,580
here.

13
00:00:57,330 --> 00:01:04,530
So we'll have to pass this down and then we'll have to invoke it when we set up the single page.

14
00:01:04,620 --> 00:01:10,440
So when the user navigates through the single page, then in the user will fetch that single product

15
00:01:10,680 --> 00:01:12,630
and then of course we will display it.

16
00:01:12,990 --> 00:01:19,290
But in this video, I would want to set up my single product because again, it's going to be extremely

17
00:01:19,290 --> 00:01:24,750
similar to the FETCH product and also set up everything in the producer.

18
00:01:25,080 --> 00:01:30,290
And then once we've got that out of the way, then of course we can navigate to the single product.

19
00:01:30,600 --> 00:01:31,940
So I'm going to come up with a name.

20
00:01:31,950 --> 00:01:37,080
It's going to be such a single product, single and then product.

21
00:01:37,350 --> 00:01:42,750
It's also going to be a function will also pass in the URL.

22
00:01:42,990 --> 00:01:44,730
In this case, they will dispatch.

23
00:01:44,730 --> 00:01:48,780
And the actions, of course, are going to be different since it is a single product.

24
00:01:49,110 --> 00:01:55,710
So I get single product Biggin, which is going to set up the loading, then we have success and then

25
00:01:55,710 --> 00:01:56,180
the error.

26
00:01:56,610 --> 00:02:01,650
Now I guess before we set up the function, why don't we also set up the state values?

27
00:02:01,920 --> 00:02:08,820
Then we will go with single underscore product, underscore loading that will be equal to force by default.

28
00:02:09,120 --> 00:02:13,860
Then we're going to go with, you know what, I'm just going to copy and paste because I need to change

29
00:02:13,860 --> 00:02:14,760
these values around.

30
00:02:14,760 --> 00:02:18,150
So I'm going to say product and error.

31
00:02:18,600 --> 00:02:20,580
Now, I will also be false.

32
00:02:20,850 --> 00:02:25,800
And then as far as the single product is just going to be an empty array, meaning sorry, it's going

33
00:02:25,800 --> 00:02:27,740
to be empty object by default.

34
00:02:28,080 --> 00:02:30,090
So those are my three state values.

35
00:02:31,020 --> 00:02:36,980
Then, of course, out of dispatch and in this case, I'm going to go with type and as far as the types,

36
00:02:36,980 --> 00:02:43,280
if we take a look at the actions and that's not over here, I'm actually looking for the actions we'll

37
00:02:43,280 --> 00:02:49,850
see through the actions we have, get single product again, that single product success and get single

38
00:02:49,850 --> 00:02:50,830
product error.

39
00:02:51,170 --> 00:02:58,160
So, of course, we are importing them in the product context as well as the product reducer.

40
00:02:58,460 --> 00:03:03,950
So, of course, now I would want to dispatch when I set up my fetch the loading one.

41
00:03:04,250 --> 00:03:10,920
So we're going to go with get a single product B and so we're going to go with get what?

42
00:03:11,080 --> 00:03:12,700
I'm just typing all over the place here.

43
00:03:13,010 --> 00:03:16,820
I need to go with get and then single product again.

44
00:03:17,270 --> 00:03:21,380
That is what we're dispatching when we start loading.

45
00:03:21,570 --> 00:03:23,890
Then again we're going to go and try catch.

46
00:03:24,200 --> 00:03:28,730
And as far as the error rates right away, this patch, the error one.

47
00:03:29,180 --> 00:03:34,520
So pass in the object here and of course the type will be get single product error.

48
00:03:34,910 --> 00:03:42,200
And in here I'm still going to get my data, so I'm going to sign it to a single product.

49
00:03:42,560 --> 00:03:47,480
So let's go with CONSED and then response is equal to await.

50
00:03:48,020 --> 00:03:53,200
And of course we'll use axios and get will pass in the URL.

51
00:03:53,720 --> 00:04:02,030
So the one that's coming in as an argument online will create a new variable cost and then single product

52
00:04:02,030 --> 00:04:05,720
is equal to to the data supports that data.

53
00:04:05,750 --> 00:04:11,210
And in this case, I'm not going to cancel anything because again, it's extremely similar to what we

54
00:04:11,210 --> 00:04:11,810
did before.

55
00:04:12,260 --> 00:04:15,920
And I find it that there's going to be too much repetition.

56
00:04:16,220 --> 00:04:20,090
And in this case, I'm going to go with this patch despatching an action.

57
00:04:20,300 --> 00:04:22,880
And of course, this is going to be get single product success.

58
00:04:23,180 --> 00:04:31,560
And as far as the payload I want to pass and my single product, the variable that I just set up.

59
00:04:31,910 --> 00:04:41,000
So once we have this one now, of course, I would want to navigate to my product reducer and take care

60
00:04:41,000 --> 00:04:43,460
of all of these reactions.

61
00:04:43,460 --> 00:04:47,090
So let me find my producer products producer.

62
00:04:47,510 --> 00:04:50,270
I'm done with an so that was the last one.

63
00:04:50,570 --> 00:04:56,180
And we're going to go with get single product, begin and end here.

64
00:04:56,180 --> 00:04:58,250
And I say if and then action.

65
00:04:59,190 --> 00:05:04,350
Action and type is equal to get single product, not success.

66
00:05:04,620 --> 00:05:06,750
All right, we're going to go with B again.

67
00:05:06,960 --> 00:05:09,180
If that is the case, I would want to do two things.

68
00:05:09,180 --> 00:05:13,530
I would want to return to state, first, not state, and then in the state.

69
00:05:13,530 --> 00:05:19,740
I would want to change to I would want to set loading the true and accurate force, because we need

70
00:05:19,740 --> 00:05:26,120
to keep in mind that it's a bit different for single product, because there might be a case where you

71
00:05:26,450 --> 00:05:31,890
for one product and you get there, but you're not going to get the same error for different product.

72
00:05:32,190 --> 00:05:37,690
So that's why you need to take care of the fact that if there is already error, I would want to start

73
00:05:37,710 --> 00:05:38,970
false by default.

74
00:05:38,970 --> 00:05:42,870
And then, of course, if there is actual error, then yes, I'll handle that.

75
00:05:43,110 --> 00:05:48,280
So what I'm trying to say, unlike the previous one where we had just holding true.

76
00:05:48,540 --> 00:05:52,610
I also want to set by default that error to be false.

77
00:05:52,830 --> 00:05:58,550
So we're going to go with a single product and then loading to be true since we start watching.

78
00:05:58,800 --> 00:06:06,390
But just in case there's some old error that's still sticking around, I'm going to go with product,

79
00:06:06,390 --> 00:06:10,870
single product and then underscore error is equal to false.

80
00:06:11,220 --> 00:06:13,200
So that going to be my loading one.

81
00:06:13,620 --> 00:06:17,250
Then, of course, I also have action, action.

82
00:06:17,250 --> 00:06:21,870
And then that type equal to get single product success.

83
00:06:22,410 --> 00:06:24,870
So we have this type of action.

84
00:06:25,170 --> 00:06:29,880
And in this case, again, we're returning a state that we return on state properties.

85
00:06:30,240 --> 00:06:34,740
Then single product loading is going to be false course.

86
00:06:35,130 --> 00:06:43,680
And also I would want to set my single product equal to action single and then on this core product

87
00:06:43,680 --> 00:06:47,640
is equal to my action and mine payroll because remember.

88
00:06:49,100 --> 00:06:56,060
In the context we passed it and correct, we've got this one, we get single product success and as

89
00:06:56,060 --> 00:07:01,820
a pilot we passed in this single product and I'm going to navigate back over here.

90
00:07:02,090 --> 00:07:08,120
And the last one I would want to handle, of course, is the area where I would want to flip it, where

91
00:07:08,120 --> 00:07:12,530
the loading will be false and then the error is going to be true.

92
00:07:12,890 --> 00:07:17,370
Now, in order to speed this up, I think I can just copy this one and change the value.

93
00:07:17,750 --> 00:07:19,820
So this is going to be error here.

94
00:07:20,330 --> 00:07:26,120
So error so and then as far as the state, like I said, I'll flip the values.

95
00:07:26,810 --> 00:07:32,090
Loading will be false if there is an error and the error will be true.

96
00:07:32,250 --> 00:07:34,490
OK, so so of course I can say it.

97
00:07:34,940 --> 00:07:40,610
And next video, we'll start working in this single product page.