1 00:00:00,090 --> 00:00:04,050 All right, up next, we have used producer. 2 00:00:05,480 --> 00:00:15,360 Now use their hook is used whenever we have a more complicated setup as far as the state. 3 00:00:15,980 --> 00:00:19,670 So you can definitely use it with simple examples. 4 00:00:20,180 --> 00:00:26,600 But tell me honestly, if you have like a to do list or something like that, I think you're using just 5 00:00:26,600 --> 00:00:29,850 regular use that is good enough. 6 00:00:29,870 --> 00:00:39,140 However, as your app gets more complicated, it definitely is a good practice to use the juicer because 7 00:00:39,140 --> 00:00:44,840 essentially it will add more structure to your state. 8 00:00:45,620 --> 00:00:50,930 So you won't be able to add just willy nilly how you'd want and change the state. 9 00:00:51,410 --> 00:00:57,760 It will have to go through certain steps and that is very, very useful when you work in it. 10 00:00:57,980 --> 00:01:04,140 Again, if you have a simple to do, I don't see a big use case for that. 11 00:01:04,370 --> 00:01:06,980 How has your app gets complicated then? 12 00:01:06,980 --> 00:01:15,230 Of course, I definitely would suggest using user just because it will just add more structure to the 13 00:01:15,230 --> 00:01:18,780 initial setup that you have in the state. 14 00:01:19,370 --> 00:01:25,700 Now, before we go any further, let me just mention that I purposely picked this example to be somewhat 15 00:01:25,700 --> 00:01:27,350 simple and tutorial. 16 00:01:27,620 --> 00:01:32,690 And then once you're done with tutorial, I would highly, highly, highly suggest going right away 17 00:01:32,690 --> 00:01:39,860 to the project and then do the use a reduced project because that project will be a bit more complicated 18 00:01:40,190 --> 00:01:43,910 and of course, a better use case for reducer. 19 00:01:44,180 --> 00:01:50,140 And before we start working in our setup, I just showcase what we're going to build. 20 00:01:50,960 --> 00:01:59,420 So I'd want you to import from tutorial one six the user juicer and one of the final one. 21 00:01:59,900 --> 00:02:02,780 And notice how we don't need to go for specific file. 22 00:02:02,990 --> 00:02:05,000 And I'll talk about it in a second. 23 00:02:05,300 --> 00:02:09,260 But for now, you're just looking for that component that is coming from the final. 24 00:02:09,500 --> 00:02:14,600 And once you're under, you'll notice that again, we have the form, we have some kind of input. 25 00:02:14,600 --> 00:02:16,850 And I can go here with Ihram. 26 00:02:16,850 --> 00:02:17,660 I can add it. 27 00:02:17,990 --> 00:02:26,030 And not only I can add the item, but I also have this model and notice how the application gets a bit 28 00:02:26,030 --> 00:02:26,780 more complex. 29 00:02:27,050 --> 00:02:31,360 And that's a good use case for using user's user. 30 00:02:31,400 --> 00:02:39,050 And if I try to add the item that doesn't exist, then I just have please enter value and we'll start 31 00:02:39,050 --> 00:02:48,800 simply by building this using the traditional setup where we had two values in state and then we will 32 00:02:48,800 --> 00:02:51,260 refactor it to use producer. 33 00:02:51,530 --> 00:02:55,040 Now user Gersel relies heavily on Redox. 34 00:02:55,460 --> 00:03:01,700 So if you're familiar with the redox option, if you're not, then once you understand, use their juicer, 35 00:03:01,910 --> 00:03:11,180 it is going to be very easy to pick up Redox because a lot of the lingo and functionality is exactly 36 00:03:11,180 --> 00:03:11,990 the same. 37 00:03:12,500 --> 00:03:19,280 So first, let's deal with this specific path where we don't have any filename and we're going to do 38 00:03:19,280 --> 00:03:24,520 that by going to a set up here and line instead of final. 39 00:03:25,160 --> 00:03:28,300 We are looking for a setup, so I'm looking for the setup. 40 00:03:28,310 --> 00:03:31,580 Of course, I'll change my component name as well. 41 00:03:31,850 --> 00:03:41,270 And once I say I should see the user producer that we navigate to the six and we're looking for setup 42 00:03:41,630 --> 00:03:45,210 and then notice something interesting where I have to files. 43 00:03:45,210 --> 00:03:49,050 No, I have it next year and the model. 44 00:03:49,670 --> 00:03:53,810 So here's what's happening in this particular setup. 45 00:03:54,320 --> 00:04:04,820 What we can do is use Index Jass in the folder and then once we import, we don't need to go with specific 46 00:04:04,820 --> 00:04:14,600 file anymore because indexed jayesh in every folder, unless you change the set up manually, will be 47 00:04:14,600 --> 00:04:15,710 the main entry. 48 00:04:16,190 --> 00:04:23,840 Meaning if I, for example, go with input from the folder and if I have their index G.S., it will 49 00:04:23,840 --> 00:04:26,480 right away import that index jazz. 50 00:04:26,900 --> 00:04:33,800 And you'll see that in a lot of people setup where we have a bunch of folders and that each and every 51 00:04:33,800 --> 00:04:40,370 folder has this index and that index is that main entry in that folder. 52 00:04:40,610 --> 00:04:48,860 So in here I can do whatever I want inside of that folder, but Index JS will be that main entry point. 53 00:04:49,160 --> 00:04:56,900 So everything at the end of the day will be either imported here or the logic will be sitting here so 54 00:04:56,900 --> 00:05:04,280 I can have as many components as I would want in the same folder, but all of them in some. 55 00:05:04,500 --> 00:05:12,240 Way or shape or form, we'll meet in that index, just like I said, we'll just start with a very, 56 00:05:12,240 --> 00:05:13,200 very basic set up. 57 00:05:14,030 --> 00:05:23,060 Where we'll still have the form, we will still have the simple state value and all that and also will 58 00:05:23,060 --> 00:05:33,840 have a simple toggle as far as the model, and then slowly but surely we will refactor it to use reducer. 59 00:05:33,890 --> 00:05:41,360 Now, let me close some of the folders over here and notice we have the moral component and that is 60 00:05:41,360 --> 00:05:45,350 the component that's sitting right next to our index J. 61 00:05:45,410 --> 00:05:48,780 S OK, Werfel in the next year. 62 00:05:48,890 --> 00:05:50,540 I would also want to import data. 63 00:05:51,500 --> 00:05:56,330 Import data, and that is, of course, the name the import, so we go from. 64 00:05:56,690 --> 00:05:59,120 And then again we go a few levels up. 65 00:05:59,600 --> 00:06:06,470 We're looking for the data because first we'll just try to do that using the regular set up as far as 66 00:06:06,470 --> 00:06:08,170 the state values are concerned. 67 00:06:08,300 --> 00:06:09,620 I'll close the sidebar. 68 00:06:09,980 --> 00:06:20,210 We're going to go here with Konstantine people and then set people that is equal to our your state and 69 00:06:20,250 --> 00:06:22,090 then we pass in our data. 70 00:06:22,430 --> 00:06:23,050 OK, awesome. 71 00:06:23,300 --> 00:06:25,660 And also, I want to toggle that model. 72 00:06:25,670 --> 00:06:27,520 Now, if you check out the model, there's nothing there. 73 00:06:27,530 --> 00:06:29,990 There's just the there that I am model. 74 00:06:29,990 --> 00:06:32,210 But eventually it is going to be there. 75 00:06:32,600 --> 00:06:40,850 And as far as my state value, I think I'll say show model and then set. 76 00:06:41,780 --> 00:06:50,510 Show model, show model, and by default, I'll say that I'll hide the model so it will be hidden by 77 00:06:50,510 --> 00:06:50,920 default. 78 00:06:51,380 --> 00:06:55,350 And now, of course, I would want to come up with my return. 79 00:06:55,970 --> 00:07:01,860 So let's go again with our fragment here and line as far as the return. 80 00:07:02,480 --> 00:07:04,750 We'll start by just checking the model. 81 00:07:05,060 --> 00:07:07,440 What is the show model scenario? 82 00:07:07,640 --> 00:07:10,760 So if it is true, then I would want to showcase. 83 00:07:11,360 --> 00:07:12,720 We already know how we can do that. 84 00:07:12,740 --> 00:07:15,680 Of course we have our model component. 85 00:07:15,680 --> 00:07:16,070 Correct. 86 00:07:16,550 --> 00:07:22,520 So I go with your model and then I go here with a model component. 87 00:07:22,670 --> 00:07:27,630 So if the show model will be true, if not, then we're going to hide that. 88 00:07:27,890 --> 00:07:31,880 Now we're going to go with form, we'll go with form. 89 00:07:31,880 --> 00:07:35,980 And I think I'm going to go with on submit, on submit. 90 00:07:35,990 --> 00:07:42,800 And as you can see, I'm kind of keeping up the pace here because we have already covered this before 91 00:07:43,130 --> 00:07:47,720 and we'll have a handle and then submit. 92 00:07:48,350 --> 00:07:51,430 And then, of course, we need to have a div and an input. 93 00:07:51,890 --> 00:07:53,040 It's going to be a text. 94 00:07:53,070 --> 00:07:54,860 Now, as far as the value. 95 00:07:56,000 --> 00:08:03,380 Well, we'll have to come up with a new statement, correct, so let's just go with tax, I guess I 96 00:08:03,380 --> 00:08:04,330 can call it that way. 97 00:08:04,330 --> 00:08:10,010 I think it is going to be good enough or, you know, let's just go with names of name. 98 00:08:10,400 --> 00:08:16,940 And then that name is equal to a year's state and that is just going to be an empty valley for now. 99 00:08:17,510 --> 00:08:26,330 That old type name here and then on change, well, then will invoke again our in line function. 100 00:08:27,190 --> 00:08:34,930 And then once we invoke it, we would want to go with name Saturnine and then we pass in whatever we're 101 00:08:34,930 --> 00:08:43,030 getting back from our event target and then that value at the moment, it complains, well, we have 102 00:08:43,030 --> 00:08:47,760 no access to event because it is not defined. 103 00:08:47,890 --> 00:08:51,380 There is now it is defined and also the Handelsman. 104 00:08:51,820 --> 00:08:54,310 So let's just go with Consed and then handle. 105 00:08:55,540 --> 00:09:01,420 So, Matt, that is my function now, I would want to prevent a default, of course, so I'm going to 106 00:09:01,420 --> 00:09:05,920 go here with E and then prevent default. 107 00:09:06,370 --> 00:09:11,910 Let's invoke it, let's say, yep, we should have something there. 108 00:09:12,280 --> 00:09:16,530 Then let's add a little bit of styling as well. 109 00:09:17,320 --> 00:09:22,540 So let's say here that there's going to be a class name and form. 110 00:09:22,930 --> 00:09:26,380 Let's also add our buttons right next to there. 111 00:09:26,800 --> 00:09:31,000 We're going to go with button type is going to be sub mat. 112 00:09:31,420 --> 00:09:36,220 And let's just right here add person or add or whatever you want. 113 00:09:36,670 --> 00:09:37,260 And there it is. 114 00:09:37,270 --> 00:09:42,400 Now of course we have our form and if I would want to have that item. 115 00:09:43,380 --> 00:09:50,510 To the people, well, I would need to do that when I'm submitting the form, correct. 116 00:09:50,760 --> 00:09:58,830 So first we prevent the default and now we want to check if the name is more than just a empty string. 117 00:09:59,160 --> 00:10:04,710 If it is a empty string, then of course, I would want to display them all, know how I can display 118 00:10:04,710 --> 00:10:05,210 the model. 119 00:10:05,550 --> 00:10:12,450 Well, I can go here with else and I can say show model and I'll set it equal to true. 120 00:10:13,050 --> 00:10:18,870 Right, because now I would want to display it and I'll say that, you know what, the value is empty 121 00:10:19,080 --> 00:10:19,410 now. 122 00:10:19,410 --> 00:10:24,260 I'm not going to pass in any kind of values will deal with that once we set up use reducer. 123 00:10:24,630 --> 00:10:27,700 So for now, we'll just display that show model. 124 00:10:28,020 --> 00:10:35,160 Now, if the name is of course there, if we have type something, then we can say show model. 125 00:10:35,970 --> 00:10:37,880 And again, we'll set it equal to true. 126 00:10:38,250 --> 00:10:41,070 So that is also going to be use case where we show the model. 127 00:10:41,430 --> 00:10:46,940 And then I would want to add that item to my list to my people. 128 00:10:47,460 --> 00:10:55,830 So let's right here that we go with some people that will pass in that new array where we. 129 00:10:56,800 --> 00:11:04,630 Spread out the old values first, and then we pass in what when we pass in the new person, no new person 130 00:11:04,630 --> 00:11:06,100 is going to be an object. 131 00:11:06,370 --> 00:11:13,420 So let's say it property and we'll go with new date again, a little bit of cheating. 132 00:11:13,810 --> 00:11:14,950 Get time. 133 00:11:15,810 --> 00:11:24,330 Invoked and lastly, to strike invoked and now let's set up a name, let's say that the name will be 134 00:11:24,330 --> 00:11:31,380 equal to our state value and now, of course, we show the model we added to the people. 135 00:11:31,590 --> 00:11:37,740 And then lastly, let's use set set name is equal to an empty string. 136 00:11:38,010 --> 00:11:40,130 And of course, let's iterate over. 137 00:11:40,590 --> 00:11:42,660 So we show the list. 138 00:11:42,980 --> 00:11:49,920 So right after the form, we're going to go with people, people then map. 139 00:11:50,430 --> 00:11:58,380 And then of course I'm looking for each and every person alike like so and then once I said I would 140 00:11:58,380 --> 00:12:03,990 want to return the div online, it needs to have a idea, of course. 141 00:12:04,020 --> 00:12:13,470 So he and then person of that idea and we're going to go with heading for and let's just play person 142 00:12:13,800 --> 00:12:18,440 that a name now eventually will add the button but not right now. 143 00:12:18,690 --> 00:12:20,100 So let's type some gibberish. 144 00:12:20,310 --> 00:12:28,160 And once we add of course show model is not a function because well it's not a model, it is set show 145 00:12:28,170 --> 00:12:28,550 model. 146 00:12:28,920 --> 00:12:34,440 So set show model as well as here set show model. 147 00:12:35,010 --> 00:12:42,600 Again, straight out some gibberish and I can see the item over here and I also can see the model and 148 00:12:42,600 --> 00:12:46,660 once I refresh it will also happen if I try to submit the empty room. 149 00:12:46,920 --> 00:12:51,360 So that would be a scenario if we use these state values. 150 00:12:51,640 --> 00:12:56,280 And like I said, if you have a small application, there's nothing wrong with that. 151 00:12:56,670 --> 00:13:03,720 But as your app gets bigger, bigger, bigger, bigger, you'd want to have some kind of structure because 152 00:13:03,720 --> 00:13:09,600 notice here how we have no problems changing state values however we would like. 153 00:13:10,640 --> 00:13:13,760 That's not usually a best use case. 154 00:13:13,770 --> 00:13:19,770 If you have a bigger app and if you work as a team, you would want to have some kind of guardrails 155 00:13:20,040 --> 00:13:25,170 where you're only updating the state in a certain way. 156 00:13:25,320 --> 00:13:28,230 So that way everyone is on the same page. 157 00:13:28,390 --> 00:13:32,610 This is exactly what we're going to do starting from that next video.