1
00:00:00,330 --> 00:00:10,590
Nice work and let's add two more actions, one for removing the item and then also the clothes model

2
00:00:10,590 --> 00:00:10,850
one.

3
00:00:11,130 --> 00:00:17,010
So I remove that control lock, I don't think we need it anymore and we just keep on scrolling.

4
00:00:17,010 --> 00:00:19,590
So we add one for no value.

5
00:00:19,920 --> 00:00:27,930
And I guess let's start by passing in the clothes model function and the way we'll set this up.

6
00:00:28,200 --> 00:00:29,730
Notice we have a submit.

7
00:00:31,020 --> 00:00:39,000
And let's also create a function that will be responsible for closing the model, so CONSED closure

8
00:00:39,290 --> 00:00:45,390
model, it's not going to look for any arguments, however, within the function, but we will dispatch

9
00:00:45,390 --> 00:00:53,670
an action that we haven't set up in our user yet and the type will be close, underscore model.

10
00:00:54,090 --> 00:01:00,570
And the only thing that I would want to do as far as this functionality is again to return all the set

11
00:01:00,570 --> 00:01:04,530
values and then change is model to.

12
00:01:05,460 --> 00:01:16,230
We're going to go if action and that type is equal or close and then underscore, then return again.

13
00:01:16,560 --> 00:01:20,100
Copy all the previous state values, state and line.

14
00:01:20,140 --> 00:01:27,260
Let's go with is model open and let's set it equal to airfoils.

15
00:01:27,810 --> 00:01:34,470
Now the gotcher here is that I would want to call it in the model and I would want to call it after

16
00:01:34,710 --> 00:01:35,550
three seconds.

17
00:01:36,240 --> 00:01:43,380
So what I would want is to pass this close model as a prop down to a model.

18
00:01:44,250 --> 00:01:52,140
So let's go with close model is equal to a close model like show.

19
00:01:52,500 --> 00:01:57,810
And then once we do that in the model, of course we can access it somewhere, say, here, close,

20
00:01:58,680 --> 00:02:00,060
close model.

21
00:02:00,420 --> 00:02:07,680
And in the model, I would want to set up a use effect where like I just said, I want to close it after

22
00:02:07,950 --> 00:02:09,090
three seconds.

23
00:02:09,510 --> 00:02:14,070
So let's go here with usufruct and line in our callback function.

24
00:02:14,410 --> 00:02:19,110
Let's just set up a timeout and let's say we have a callback function.

25
00:02:19,410 --> 00:02:26,070
And I would want to go with close model here and I would want to call it after three seconds.

26
00:02:26,370 --> 00:02:29,230
And that, of course, is three thousand milliseconds.

27
00:02:29,580 --> 00:02:33,510
So once we type something, first of all, that item should be added.

28
00:02:34,080 --> 00:02:35,130
We added the item.

29
00:02:35,370 --> 00:02:41,790
But then after three seconds, notice how we dispatch we dispatch this action up close model.

30
00:02:42,030 --> 00:02:44,460
And of course, model is seven.

31
00:02:44,910 --> 00:02:49,770
And similarly, we could add here a button to our items.

32
00:02:50,610 --> 00:02:56,520
And then remove that item if we click on that button, and for that, of course, again, we'll have

33
00:02:56,520 --> 00:03:03,930
to dispatch an action and of course, we'll have to handle that action in the register right below the

34
00:03:03,940 --> 00:03:04,650
heading for.

35
00:03:05,130 --> 00:03:08,610
Let's go with button on set up on Click right away.

36
00:03:09,180 --> 00:03:12,240
And online in here, let's pass in our Kobuk mansion.

37
00:03:12,540 --> 00:03:20,460
And I would want to dispatch an action now type will be remove item so type and then we go with remove

38
00:03:20,730 --> 00:03:24,980
underscore item and then I would want to add the payload again.

39
00:03:25,110 --> 00:03:25,540
Why?

40
00:03:25,860 --> 00:03:29,370
Well, because I need to be specific which item I would want to remove.

41
00:03:29,700 --> 00:03:35,550
I noticed in this case we're not passing that I.D. Otherwise how do I know which item I would need to

42
00:03:35,550 --> 00:03:35,960
remove.

43
00:03:36,240 --> 00:03:42,820
So I'm going to go with payload and payload in this case is going to be equal to that person and then

44
00:03:42,900 --> 00:03:43,780
dart it.

45
00:03:44,280 --> 00:03:49,290
So once we save, of course, we should be able to see I'm an artist.

46
00:03:49,290 --> 00:03:52,110
And by the way, I should have added the item class.

47
00:03:52,110 --> 00:03:54,510
First of all, it's going to look a little bit better.

48
00:03:55,290 --> 00:04:00,410
And then also I would want to add some kind of text here.

49
00:04:00,540 --> 00:04:09,360
So let's say and of course, let me try to say item and then once we have there is an item now that

50
00:04:09,360 --> 00:04:15,620
is our motto, OK, it is then after three seconds and now would want to handle that remove item.

51
00:04:15,630 --> 00:04:18,030
So if I click right now, what do you think is going to happen?

52
00:04:18,360 --> 00:04:20,070
Well, we're not handling it right.

53
00:04:20,280 --> 00:04:22,080
So we should have this error.

54
00:04:22,440 --> 00:04:28,470
And this is awesome because at least it tells us, hey, listen, you are dispatching an action that

55
00:04:28,470 --> 00:04:30,960
you're not handling in the register.

56
00:04:31,110 --> 00:04:40,740
So I go, what if action and that type is equal to remove item and move and move item?

57
00:04:41,100 --> 00:04:48,570
So within my condition, I'm going to come up with new variable new people that is equal to state people.

58
00:04:49,000 --> 00:04:51,270
And I would want to use filter.

59
00:04:52,160 --> 00:04:58,490
I'm going to access each and every item as far as the premiere of person, and then I'll say person

60
00:04:58,490 --> 00:05:03,730
I.D., there's not much to a action and then payload.

61
00:05:03,980 --> 00:05:05,780
So that is the case, then.

62
00:05:05,780 --> 00:05:09,110
I wouldn't want to turn this particular item.

63
00:05:09,350 --> 00:05:11,480
And now, of course, I just need to paternalist state.

64
00:05:12,080 --> 00:05:15,770
So I'll say here, return and find new object.

65
00:05:16,220 --> 00:05:23,120
So we'll go with the DOT and the state online where we have the people that is going to be equal to

66
00:05:23,120 --> 00:05:25,060
a new people.

67
00:05:25,100 --> 00:05:25,510
All right.

68
00:05:26,390 --> 00:05:27,070
We say it.

69
00:05:27,410 --> 00:05:30,640
And what should happen once we click the button?

70
00:05:30,980 --> 00:05:37,200
The model shows up for three seconds and it says, hey, please enter the value.

71
00:05:37,580 --> 00:05:45,650
Now, if we successfully add that item example, say a random item, then once we added it displays

72
00:05:45,650 --> 00:05:48,670
random item and of course, we can remove it as well.

73
00:05:49,250 --> 00:05:59,450
So that's how we can set up our state using user juicer where notice how it adds way more structure.

74
00:05:59,840 --> 00:06:05,720
And the last thing that I would want to showcase is that normally, since reducers are going to have

75
00:06:05,720 --> 00:06:10,180
a lot of functionality, you do move them to a separate file.

76
00:06:10,400 --> 00:06:19,000
So in a setup, I would want you to create a producer, J.S. then take everything as far as the function.

77
00:06:19,550 --> 00:06:25,910
So register it out like show and line in the register, copy and paste.

78
00:06:26,240 --> 00:06:27,940
Now, of course, we would want to export.

79
00:06:27,950 --> 00:06:31,100
Now, if you want to export this as default, you can definitely do it.

80
00:06:31,370 --> 00:06:39,590
Marcus, I will export this as a named export and here we go with import than produce.

81
00:06:40,100 --> 00:06:45,500
And then of course, we are importing this from, um, the reducer.

82
00:06:45,920 --> 00:06:49,400
And now our functionality should still work.

83
00:06:49,700 --> 00:06:53,920
But I just need to make sure it is a producer like so.

84
00:06:54,290 --> 00:06:59,110
And now of course I can keep on working with my form and everything will work.

85
00:06:59,300 --> 00:07:07,400
And now notice how much cleaner and more structured is our application where we have the producer that

86
00:07:07,430 --> 00:07:13,900
just deals with our data and each and every time we want to do something, which is dispatch the section

87
00:07:13,910 --> 00:07:21,470
again, like I have said this before, of course it has way bigger use case as your application gets

88
00:07:21,470 --> 00:07:24,320
bigger or you get more people on a team.

89
00:07:24,620 --> 00:07:30,410
And if you'll go right now to the projects and start working on the Use Register project, you will

90
00:07:30,410 --> 00:07:35,090
see user juicer and a more complex setup.

91
00:07:35,270 --> 00:07:42,140
And of course, like I keep on saying, it is going to be a better use case for use reducer.