1
00:00:00,450 --> 00:00:04,170
Once we have covered why would want to use use a reducer.

2
00:00:04,170 --> 00:00:09,840
Next we're gonna start setting up our cart complex because like I previously mentioned I would want

3
00:00:09,840 --> 00:00:16,500
to refactor my cart just to show example how we can work with use reducer and the way it's gonna work.

4
00:00:16,500 --> 00:00:22,290
First of all I'm gonna collapse the use of it because we're still gonna use the same functionality even

5
00:00:22,290 --> 00:00:24,900
after we're done setting up to use their juicer.

6
00:00:24,900 --> 00:00:29,950
Because remember within the use effect with worked with total and cart items.

7
00:00:30,030 --> 00:00:33,920
So we're going to leave these guys the way they are and I'm going to mention why I'm doing that.

8
00:00:34,050 --> 00:00:39,540
But since it's taking up so much space I'm just gonna collapse at first and as you're watching the videos

9
00:00:40,080 --> 00:00:46,110
remember use effect is there but all the functionality has been hidden and then I would want to change

10
00:00:46,110 --> 00:00:51,540
from use state that I'm using right now for my cart to use reducer.

11
00:00:51,780 --> 00:00:58,590
We use a reg user and user user is going to look for two things it's gonna look for reducer function

12
00:00:59,040 --> 00:01:03,630
that's going to operate on the state and the initial state.

13
00:01:03,630 --> 00:01:09,870
Now the initial state is going to stay exactly the same it is since we're already using get cars from

14
00:01:09,870 --> 00:01:12,690
local storage that can stay the way it is.

15
00:01:12,690 --> 00:01:17,970
But for the reducer we're going to have to create a function so for the time being I'm just gonna add

16
00:01:18,000 --> 00:01:24,000
a comma and I'm going to say that there's gonna be a reduced function reduce function and you're going

17
00:01:24,000 --> 00:01:29,760
to see that if I come up with a function here of course if I name it reducer since I'm referencing the

18
00:01:29,760 --> 00:01:35,010
function but as always we can name it whatever you want you're not going to have an error because if

19
00:01:35,010 --> 00:01:37,150
you're going to say right now you're going to get an error.

20
00:01:37,260 --> 00:01:43,380
We're gonna go with const then reducer it's gonna be a function is going to look for two things for

21
00:01:43,380 --> 00:01:47,730
state and action and we're going to cover this in detail as we're working on it.

22
00:01:48,040 --> 00:01:51,380
And it always always needs to return a state.

23
00:01:51,600 --> 00:01:58,080
We're gonna say that everything isn't gonna work as expected but we also need to change where we have

24
00:01:58,080 --> 00:01:58,710
cart.

25
00:01:58,830 --> 00:02:03,310
Now the cart value is going to stay exactly the same because we are using this.

26
00:02:03,390 --> 00:02:08,310
And when I say we're using this I'm not talking about the functions that we have for a move item and

27
00:02:08,310 --> 00:02:15,090
increase amount we're going to rewrite these functions using the use reducer but we are applying this

28
00:02:15,150 --> 00:02:16,420
in the use effect.

29
00:02:16,440 --> 00:02:18,870
That's why I'm going to keep the value here exactly the same.

30
00:02:19,260 --> 00:02:21,650
But essentially this would be your state.

31
00:02:21,840 --> 00:02:23,910
As always you can name it wherever you'd want.

32
00:02:23,910 --> 00:02:30,870
I'm just keeping the name card here because again we're accessing when we work with our total as well

33
00:02:30,870 --> 00:02:38,640
as card times but we're not returning a function in this sense we're turning a function called dispatch.

34
00:02:38,820 --> 00:02:40,740
Again you're going to see it in a second.

35
00:02:40,770 --> 00:02:47,870
So we have our use reducer that we pass in our reduced function and initial state.

36
00:02:47,880 --> 00:02:54,090
Now what I would like to do is set up a reducer and separate file because imagine that all the functionality

37
00:02:54,090 --> 00:02:59,340
that we have right now whether that's adding to the cart or clearing the cart is going to be in this

38
00:02:59,400 --> 00:03:01,060
one single producer.

39
00:03:01,470 --> 00:03:06,690
So you'd want to save up some space and in fact set up functionality in one place because it's just

40
00:03:06,690 --> 00:03:08,740
going to make it easier to manage.

41
00:03:08,790 --> 00:03:14,550
So we're going to cut this out like so then we're going to open up the sidebar and we're going to create

42
00:03:14,550 --> 00:03:16,140
two new files.

43
00:03:16,290 --> 00:03:22,260
We're going to go with a reducer dot J.S. that's gonna be step number one we're going to copy and paste

44
00:03:22,770 --> 00:03:25,310
of course and we need to export this.

45
00:03:25,410 --> 00:03:29,130
So in this case I'm going to go with export default.

46
00:03:29,130 --> 00:03:31,250
Now I can just omit the name of course.

47
00:03:32,010 --> 00:03:33,300
Let's delete that.

48
00:03:33,300 --> 00:03:34,080
We're going to save it.

49
00:03:34,080 --> 00:03:36,120
Of course we're exporting right now.

50
00:03:36,240 --> 00:03:41,970
That also I would want to create a actions file where we're going to go with actions.

51
00:03:42,040 --> 00:03:42,520
J.

52
00:03:42,530 --> 00:03:45,080
Yes for now it's gonna be empty.

53
00:03:45,240 --> 00:03:52,780
And then within the cart since I don't have the reducer right now reducer has been deleted from my car.

54
00:03:52,790 --> 00:03:56,960
Jess I need to import it because otherwise I'm going to have a bug.

55
00:03:57,180 --> 00:04:04,470
Someone go the reducer since it is a default export I can name it whatever I want from and then I'm

56
00:04:04,470 --> 00:04:06,200
looking for a user file.

57
00:04:06,300 --> 00:04:10,740
We're going to save it then of course set cart is not defined.

58
00:04:10,740 --> 00:04:11,510
OK.

59
00:04:11,580 --> 00:04:14,970
Why it's not the final one because now we're using this patch.

60
00:04:14,970 --> 00:04:20,790
Please keep in mind we're going to use very very similar functionality in our reducer.

61
00:04:20,850 --> 00:04:23,730
So I don't want you to delete anything.

62
00:04:23,880 --> 00:04:25,690
I just want you to comment this out.

63
00:04:25,830 --> 00:04:31,750
And then one by one we're gonna set up these functions using the reducer so we're not going to use Southcott

64
00:04:31,920 --> 00:04:32,510
anymore.

65
00:04:32,580 --> 00:04:34,230
We are going to dispatch.

66
00:04:34,230 --> 00:04:36,570
So technically you could delete that cart.

67
00:04:36,600 --> 00:04:41,650
But for the time being I'm just going to comment everything out just so we don't have the errors.

68
00:04:41,740 --> 00:04:45,960
But at the same time so we don't have to rewrite the code comment.

69
00:04:46,020 --> 00:04:48,320
Everything within the function.

70
00:04:48,360 --> 00:04:50,220
So everything within the function body.

71
00:04:50,230 --> 00:04:52,170
Let me just comment out.

72
00:04:52,170 --> 00:04:54,330
So everything works we don't have the bugs.

73
00:04:54,390 --> 00:04:57,480
And then one by one we're going to work on these functions.

74
00:04:57,480 --> 00:05:02,890
Last thing Seth card also we're going gonna say it and again please keep in mind the reason why we had

75
00:05:02,890 --> 00:05:08,310
bugs because there is no anymore set car there is dispatch.

76
00:05:08,350 --> 00:05:13,570
And of course since we were using all the time said card that's the reason why the application was yelling

77
00:05:13,570 --> 00:05:14,190
at us.

78
00:05:14,290 --> 00:05:20,950
We are done with our initial setup and now we're to start working on remove item functionality.