1
00:00:00,350 --> 00:00:06,750
And before we recap how you use reducer works I would want to set up my actions as variables and you're

2
00:00:06,750 --> 00:00:09,290
probably wondering well what's the use for that.

3
00:00:09,560 --> 00:00:16,740
Well let's take a look at the example where I am adding to a cart but since it is a string it is very

4
00:00:16,740 --> 00:00:17,910
easy for me to mess up.

5
00:00:18,360 --> 00:00:22,520
I could say Add To Cart number is going to add the extra t..

6
00:00:22,560 --> 00:00:25,260
Now what happens right now within the reducer.

7
00:00:25,260 --> 00:00:27,110
What type I'm looking for.

8
00:00:27,120 --> 00:00:33,300
Well I believe the type that I was looking for was had to cart correct but within the cart.

9
00:00:33,300 --> 00:00:38,710
In fact I'm passing in the action with a type of add to cart with duties.

10
00:00:38,710 --> 00:00:41,860
Now what do you think is my functionality going to work or not.

11
00:00:42,000 --> 00:00:43,560
So I'm going to go to details.

12
00:00:43,560 --> 00:00:48,840
I'm gonna try to add it to the cart and notice how I navigate there but I haven't added the item and

13
00:00:48,840 --> 00:00:50,130
I can clearly see that.

14
00:00:50,220 --> 00:00:53,560
Now just to test it out let's go with this guy.

15
00:00:53,790 --> 00:00:56,960
Let's try to add it to the cart and the item is not there.

16
00:00:57,000 --> 00:01:00,650
Now what the item is not there because the times do not match.

17
00:01:00,690 --> 00:01:07,410
So we have one type within the cart context and then within a reducer we're looking for completely different

18
00:01:07,410 --> 00:01:11,120
string and in order to avoid this type of bug.

19
00:01:11,280 --> 00:01:16,130
The common convention is setting up our actions as variables and the way it's gonna work.

20
00:01:16,140 --> 00:01:21,210
We're going to have our actions j ust file and again the reason why I would want to set this up in a

21
00:01:21,210 --> 00:01:26,760
separate file because you technically could set everything up here but you're gonna have to export it

22
00:01:27,030 --> 00:01:29,310
and imported within the juicer anyway.

23
00:01:29,310 --> 00:01:35,610
And also the same how we could set up producer within our cart context while just going to populate

24
00:01:35,610 --> 00:01:38,850
Of course this file and that's going to be harder for you to manage.

25
00:01:38,880 --> 00:01:44,460
That's the reason why again common convention is setting up your actions and your action type in a separate

26
00:01:44,460 --> 00:01:45,070
file.

27
00:01:45,120 --> 00:01:49,950
So I'm gonna go with export and then we're gonna go with all the actions that we have.

28
00:01:49,980 --> 00:01:55,680
So we have one for remove and the variables we set equal to a string.

29
00:01:55,740 --> 00:01:57,470
So we go here with the remote.

30
00:01:57,540 --> 00:02:04,440
And in this case if let's say within the cart I'm going to import it some goat import and then of course

31
00:02:04,440 --> 00:02:11,670
I'm looking for my actions file and from the actions I'm looking for a more variable from and then it's

32
00:02:11,670 --> 00:02:12,920
coming from actions.

33
00:02:12,930 --> 00:02:21,360
So in this case if let's say I access the wrong variable if I say not remove but I don't know removes

34
00:02:21,650 --> 00:02:26,910
you can see right away that JavaScript or react is going to complain or it's gonna say well you don't

35
00:02:26,910 --> 00:02:28,620
have this variable.

36
00:02:28,680 --> 00:02:30,400
So what are you trying to access.

37
00:02:30,420 --> 00:02:34,840
So instead this way we can always check whether we are getting the proper one.

38
00:02:34,920 --> 00:02:40,980
And of course in this case it says import I think I messed it up a bit where import remove should be

39
00:02:40,980 --> 00:02:41,480
on top.

40
00:02:41,490 --> 00:02:47,170
And once I do that everything works like I said the same thing we're gonna have to do within reducer.

41
00:02:47,220 --> 00:02:54,300
So we have our juicer function then we're gonna copy and paste and instead of using the string we're

42
00:02:54,300 --> 00:03:01,380
going to use our remove variable again that variable is gonna hold the same string but is easier to

43
00:03:01,380 --> 00:03:03,190
fix it if it is in one place.

44
00:03:03,300 --> 00:03:06,840
And now I'm just gonna copy and paste all the actions that we have.

45
00:03:06,840 --> 00:03:10,190
We have increased decrease we have add to cart and clear cart.

46
00:03:10,620 --> 00:03:19,520
So we're gonna go with increase increase that is of course gonna be equal to our string increase and

47
00:03:19,520 --> 00:03:21,520
then we have decrease.

48
00:03:21,560 --> 00:03:30,110
So maybe I'm gonna go to variables here meaning two cursors we're gonna go with decrease the crease.

49
00:03:30,110 --> 00:03:36,650
Now I messed up here a bit bear with me and of course I had it in the wrong place.

50
00:03:36,880 --> 00:03:42,300
So let me add here destroying then and we're gonna have add to cart.

51
00:03:42,430 --> 00:03:51,220
So again let me select two cursors let me remove and I'm gonna go add and then underscore to guard again

52
00:03:51,280 --> 00:03:54,660
this is just a preference you can definitely write it as one name.

53
00:03:54,760 --> 00:03:58,900
And then lastly we also have same for Clear card.

54
00:03:58,900 --> 00:04:06,850
So let me use two cursors Let's delete it and let's go with Clear card and now of course within the

55
00:04:06,850 --> 00:04:10,390
reducer as well as the card we need to import them.

56
00:04:10,480 --> 00:04:17,240
So the same how we access remove we need to have the increase and not increase sir.

57
00:04:17,380 --> 00:04:25,470
Sorry it's not an increase certs increase and then also we have decrease then add to cart.

58
00:04:25,600 --> 00:04:32,410
And lastly we also have declare card Clear card and then I'm gonna change all my string values to my

59
00:04:32,410 --> 00:04:40,210
variables one by one we're going to go with increase design we're going to go with decrease of course

60
00:04:40,900 --> 00:04:45,700
add to cart and Clear card and cars.

61
00:04:45,800 --> 00:04:52,110
And then lastly we have clear cars and the same thing we need to do right now within the car.

62
00:04:52,670 --> 00:04:58,910
So instead of just getting the remove I'm going to copy and paste since both of them are sitting within

63
00:04:58,910 --> 00:05:00,190
the same file.

64
00:05:00,200 --> 00:05:04,050
I'm sorry same folder and I'm just gonna speed things up a bit.

65
00:05:04,070 --> 00:05:09,500
We're going to copy and paste and then again we're looking for instead of increase we're looking for

66
00:05:09,500 --> 00:05:14,960
a variable increase variable then the same is gonna work for remove.

67
00:05:15,260 --> 00:05:19,850
And you already get the point then we have decrease.

68
00:05:20,030 --> 00:05:21,960
And lastly again we have increase.

69
00:05:22,220 --> 00:05:23,390
And then add to cart.

70
00:05:23,650 --> 00:05:32,850
So we increase and then add cart add to cart and then somewhere in the bottom we have clear cart.

71
00:05:33,720 --> 00:05:36,030
So we're going to go with clear cart.

72
00:05:36,030 --> 00:05:42,810
I think I'm going to delete the actual old functionality just so it doesn't take up space and the next

73
00:05:42,810 --> 00:05:47,070
video again we're going to repeat why and how we used user juicer.