1 00:00:01,941 --> 00:00:02,774 ‫Let's now update 2 00:00:02,774 --> 00:00:05,280 ‫the user state from our application 3 00:00:05,280 --> 00:00:09,093 ‫and also display that state in multiple places. 4 00:00:10,440 --> 00:00:15,440 ‫So do you remember how we update the state inside Redux? 5 00:00:16,140 --> 00:00:18,630 ‫Well, we update Redux state 6 00:00:18,630 --> 00:00:22,740 ‫by dispatching an action to our reducer here, 7 00:00:22,740 --> 00:00:25,530 ‫and we do that by using the action creator 8 00:00:25,530 --> 00:00:30,420 ‫that was automatically created by the create slice function. 9 00:00:30,420 --> 00:00:31,530 ‫So in that case, 10 00:00:31,530 --> 00:00:34,563 ‫that's this update name function right here. 11 00:00:35,460 --> 00:00:38,160 ‫So let's do that in practice right here 12 00:00:38,160 --> 00:00:42,750 ‫in this create user component that we already have. 13 00:00:42,750 --> 00:00:46,620 ‫So this create user is this one right here. 14 00:00:46,620 --> 00:00:49,230 ‫And this exists because, remember, 15 00:00:49,230 --> 00:00:52,230 ‫that one of the requirements of the application 16 00:00:52,230 --> 00:00:55,290 ‫was that the user needs to input their name 17 00:00:55,290 --> 00:00:58,140 ‫before starting to use the application. 18 00:00:58,140 --> 00:01:01,200 ‫And so therefore we have this form right here 19 00:01:01,200 --> 00:01:03,747 ‫where we can start typing a name 20 00:01:03,747 --> 00:01:06,540 ‫and then as soon as something is there, 21 00:01:06,540 --> 00:01:08,460 ‫we can click on this button. 22 00:01:08,460 --> 00:01:10,650 ‫And so as soon as we click here, 23 00:01:10,650 --> 00:01:13,650 ‫we want to update the username in Redux, 24 00:01:13,650 --> 00:01:18,650 ‫and then we want to navigate right to the pizza menu. 25 00:01:19,283 --> 00:01:22,800 ‫Okay, so let's just quickly look here 26 00:01:22,800 --> 00:01:25,110 ‫at the component that we already have 27 00:01:25,110 --> 00:01:29,657 ‫and we see that we have a local username state. 28 00:01:29,657 --> 00:01:33,300 ‫And so that's simply because this input field 29 00:01:33,300 --> 00:01:36,030 ‫is a regular controlled element. 30 00:01:36,030 --> 00:01:39,270 ‫So we always read the value from username 31 00:01:39,270 --> 00:01:41,820 ‫and each time we type a new character, 32 00:01:41,820 --> 00:01:43,740 ‫we update that state. 33 00:01:43,740 --> 00:01:48,740 ‫And we do it this way, so we are temporarily storing 34 00:01:48,990 --> 00:01:52,530 ‫the username right in the component itself 35 00:01:52,530 --> 00:01:55,090 ‫because it is a very bad practice 36 00:01:56,245 --> 00:02:00,510 ‫to connect an input field right to the Redux store. 37 00:02:00,510 --> 00:02:03,900 ‫So as we change the username here, 38 00:02:03,900 --> 00:02:06,600 ‫so as we type a new input here, 39 00:02:06,600 --> 00:02:09,840 ‫we should really update a local state variable 40 00:02:09,840 --> 00:02:13,050 ‫and not always update the Redux store. 41 00:02:13,050 --> 00:02:14,970 ‫Instead, we should only do that 42 00:02:14,970 --> 00:02:18,180 ‫as soon as we actually submit this form. 43 00:02:18,180 --> 00:02:23,180 ‫So as soon as we are done inputting the username. 44 00:02:23,190 --> 00:02:26,343 ‫And so that's here in the handle submit function. 45 00:02:29,520 --> 00:02:31,470 ‫So this input here and the button 46 00:02:31,470 --> 00:02:33,690 ‫are inside this form element. 47 00:02:33,690 --> 00:02:35,190 ‫And so, therefore, 48 00:02:35,190 --> 00:02:38,550 ‫as soon as we click here the form gets submitted. 49 00:02:38,550 --> 00:02:40,560 ‫And then we, as always, 50 00:02:40,560 --> 00:02:44,310 ‫use the handle submit function to handle that. 51 00:02:44,310 --> 00:02:46,770 ‫And so again, it is in here 52 00:02:46,770 --> 00:02:50,160 ‫where we will then actually update the Redux store 53 00:02:50,160 --> 00:02:53,910 ‫and then redirect the user to the menu. 54 00:02:53,910 --> 00:02:57,780 ‫All right, so let's start doing that. 55 00:02:57,780 --> 00:03:00,750 ‫And first let's do a guard clause 56 00:03:00,750 --> 00:03:05,070 ‫saying that if there is no username, then just return. 57 00:03:05,070 --> 00:03:08,970 ‫But in all other cases, we now want to update the store. 58 00:03:08,970 --> 00:03:11,520 ‫And so remember how we said earlier 59 00:03:11,520 --> 00:03:14,760 ‫that we do that by dispatching an action. 60 00:03:14,760 --> 00:03:19,200 ‫Now the way in which we get access to the dispatch function 61 00:03:19,200 --> 00:03:22,710 ‫is to use the use dispatch hook 62 00:03:22,710 --> 00:03:26,640 ‫that is provided by React Redux. 63 00:03:26,640 --> 00:03:29,493 ‫And then let's store that here in dispatch. 64 00:03:32,100 --> 00:03:36,510 ‫And then here we can dispatch an action. 65 00:03:36,510 --> 00:03:39,630 ‫Now, instead of manually creating the action here, 66 00:03:39,630 --> 00:03:42,420 ‫we use an action creator function, 67 00:03:42,420 --> 00:03:45,960 ‫which again, is this one right here 68 00:03:45,960 --> 00:03:49,650 ‫that was exported from user slice. 69 00:03:49,650 --> 00:03:53,070 ‫So that's called update name. 70 00:03:53,070 --> 00:03:57,600 ‫And so here we automatically import that from the slice 71 00:03:57,600 --> 00:03:59,790 ‫and all that we need to pass in here 72 00:03:59,790 --> 00:04:02,340 ‫is going to be the username 73 00:04:02,340 --> 00:04:07,340 ‫because this username will then become the action.payload 74 00:04:07,920 --> 00:04:11,580 ‫which will then become assigned to state.username. 75 00:04:11,580 --> 00:04:13,620 ‫And then as soon as that happens, 76 00:04:13,620 --> 00:04:16,830 ‫of course, the entire application will re-render 77 00:04:16,830 --> 00:04:20,130 ‫and display that username everywhere. 78 00:04:20,130 --> 00:04:23,133 ‫And so this should actually already be working. 79 00:04:23,970 --> 00:04:26,790 ‫So if I type this now, hit enter, 80 00:04:26,790 --> 00:04:29,883 ‫nice, then it appears up here. 81 00:04:31,590 --> 00:04:32,460 ‫Great. 82 00:04:32,460 --> 00:04:34,080 ‫And now all we need to do 83 00:04:34,080 --> 00:04:37,200 ‫is to then also redirect to the menu. 84 00:04:37,200 --> 00:04:41,310 ‫And so for that we need the navigate function 85 00:04:41,310 --> 00:04:44,250 ‫which we get from use navigate. 86 00:04:44,250 --> 00:04:46,563 ‫So part of React Router. 87 00:04:48,510 --> 00:04:52,773 ‫So navigate to the menu. 88 00:04:54,090 --> 00:04:55,893 ‫Let's use something else now. 89 00:04:57,120 --> 00:04:59,670 ‫And so here we are at the menu 90 00:04:59,670 --> 00:05:02,520 ‫and here we have that updated name. 91 00:05:02,520 --> 00:05:03,420 ‫Nice. 92 00:05:03,420 --> 00:05:05,310 ‫So that one is finished, 93 00:05:05,310 --> 00:05:07,620 ‫but now as soon as we go back here, 94 00:05:07,620 --> 00:05:10,620 ‫then it is again asking for our name. 95 00:05:10,620 --> 00:05:14,400 ‫So there's not really a good way of going back to the menu. 96 00:05:14,400 --> 00:05:16,740 ‫And so here in the homepage 97 00:05:16,740 --> 00:05:19,620 ‫we only want to display this form, 98 00:05:19,620 --> 00:05:24,393 ‫so the create user component, in case there is no user yet. 99 00:05:25,590 --> 00:05:27,453 ‫So let's do that. 100 00:05:28,827 --> 00:05:32,883 ‫So right here, let's read the user from the state. 101 00:05:35,160 --> 00:05:40,160 ‫So let's say username is equal to use selector, 102 00:05:41,130 --> 00:05:45,660 ‫remember, which is how we read data from Redux store, 103 00:05:45,660 --> 00:05:49,890 ‫and then again, this gets access to the entire state, 104 00:05:49,890 --> 00:05:53,463 ‫and then we get state.user.username. 105 00:05:55,260 --> 00:05:59,250 ‫And so then here, we can conditionally render 106 00:05:59,250 --> 00:06:02,370 ‫either this or a button that will then 107 00:06:02,370 --> 00:06:06,063 ‫redirect us or which will take us to that menu. 108 00:06:07,500 --> 00:06:12,500 ‫So let's say if the username is equal to an empty string 109 00:06:16,140 --> 00:06:20,940 ‫then render this create user component but otherwise, 110 00:06:20,940 --> 00:06:24,840 ‫let's then render this button component 111 00:06:24,840 --> 00:06:27,153 ‫that we created earlier, 112 00:06:28,531 --> 00:06:30,431 ‫and then let's place the to prop here, 113 00:06:31,440 --> 00:06:35,430 ‫so to tell this button that it should move to menu, 114 00:06:35,430 --> 00:06:40,430 ‫and also let's specify the type and set it to primary. 115 00:06:40,650 --> 00:06:42,660 ‫And again, if you didn't watch 116 00:06:42,660 --> 00:06:45,120 ‫the previous section on Tailwind 117 00:06:45,120 --> 00:06:48,090 ‫then you will not really know how this button works 118 00:06:48,090 --> 00:06:51,513 ‫and so then please go ahead and check this out. 119 00:06:52,470 --> 00:06:54,810 ‫Basically, we created a button here 120 00:06:54,810 --> 00:06:58,650 ‫which is either rendered as a React Router link, 121 00:06:58,650 --> 00:07:01,110 ‫so in case we receive the to prop, 122 00:07:01,110 --> 00:07:05,223 ‫and if not, it is simply rendered as a regular button. 123 00:07:07,380 --> 00:07:08,213 ‫All right. 124 00:07:08,213 --> 00:07:11,073 ‫And then the type here simply determines the styling. 125 00:07:12,930 --> 00:07:14,490 ‫So this is a primary type, 126 00:07:14,490 --> 00:07:16,863 ‫but of course here we are missing the text, 127 00:07:18,060 --> 00:07:20,830 ‫so continue ordering 128 00:07:21,690 --> 00:07:24,783 ‫and then let's also add the username here. 129 00:07:28,440 --> 00:07:30,603 ‫So continue ordering, test. 130 00:07:32,220 --> 00:07:35,553 ‫So if we click here, we are then back at the menu. 131 00:07:36,390 --> 00:07:38,014 ‫Great. 132 00:07:38,014 --> 00:07:39,810 ‫And of course if we reload this entire app 133 00:07:39,810 --> 00:07:42,720 ‫then the application state will be gone. 134 00:07:42,720 --> 00:07:45,810 ‫So we are not persisting this state to any API 135 00:07:45,810 --> 00:07:48,030 ‫and therefore whenever we reload, 136 00:07:48,030 --> 00:07:50,430 ‫then everything will be lost. 137 00:07:50,430 --> 00:07:51,810 ‫But that's just the way 138 00:07:51,810 --> 00:07:55,020 ‫that our business wants this application to work. 139 00:07:55,020 --> 00:07:57,450 ‫So they don't want any user accounts 140 00:07:57,450 --> 00:08:01,590 ‫and so, well, this is just how it works then. 141 00:08:01,590 --> 00:08:03,180 ‫So let's do that again. 142 00:08:03,180 --> 00:08:04,230 ‫Jonas. 143 00:08:04,230 --> 00:08:05,880 ‫And then here it says Jonas. 144 00:08:05,880 --> 00:08:09,693 ‫And as we go back, then here we no longer have that form. 145 00:08:10,620 --> 00:08:11,550 ‫Nice. 146 00:08:11,550 --> 00:08:14,460 ‫And now we just need this in two more places. 147 00:08:14,460 --> 00:08:18,900 ‫First here, and then also on this order pizzas page. 148 00:08:18,900 --> 00:08:20,850 ‫So let's quickly do that 149 00:08:20,850 --> 00:08:23,620 ‫and I will actually just copy this code here 150 00:08:26,022 --> 00:08:31,022 ‫and let's move to the cart, place that right here. 151 00:08:32,780 --> 00:08:37,650 ‫Then we just need to import this custom hook just like this. 152 00:08:37,650 --> 00:08:42,650 ‫And then here it's username, like this. 153 00:08:46,830 --> 00:08:48,270 ‫So that's done. 154 00:08:48,270 --> 00:08:51,963 ‫And finally we also want to place that right there. 155 00:08:52,890 --> 00:08:56,523 ‫So that's in create order. 156 00:08:58,350 --> 00:09:00,033 ‫Place that here at the very top, 157 00:09:01,710 --> 00:09:05,673 ‫again using our trick to import, use selector, 158 00:09:07,380 --> 00:09:10,560 ‫and then here, let's use that value. 159 00:09:10,560 --> 00:09:13,620 ‫So it's right here in this input field. 160 00:09:13,620 --> 00:09:16,740 ‫However, we cannot do this. 161 00:09:16,740 --> 00:09:21,390 ‫So not just username because that would show our name here 162 00:09:21,390 --> 00:09:24,000 ‫but then whenever we wanted to update this, 163 00:09:24,000 --> 00:09:25,470 ‫so I'm typing here now, 164 00:09:25,470 --> 00:09:27,960 ‫then this wouldn't change anything 165 00:09:27,960 --> 00:09:31,680 ‫because we are not listening for any change event here. 166 00:09:31,680 --> 00:09:34,080 ‫So we don't want this to be really the value 167 00:09:34,080 --> 00:09:36,810 ‫but just the default value. 168 00:09:36,810 --> 00:09:39,060 ‫So that's another prop that we can use 169 00:09:39,060 --> 00:09:41,910 ‫and I'm not sure if we have ever used it 170 00:09:41,910 --> 00:09:44,220 ‫but this is a very important one 171 00:09:44,220 --> 00:09:47,070 ‫because it basically, as the name says, 172 00:09:47,070 --> 00:09:50,700 ‫simply allows us to set a default value at the beginning 173 00:09:50,700 --> 00:09:53,400 ‫but which we can then still change. 174 00:09:53,400 --> 00:09:56,430 ‫And so this is now not a controlled element 175 00:09:56,430 --> 00:09:59,070 ‫it's simply a normal HTML element 176 00:09:59,070 --> 00:10:01,890 ‫which happens to have a default value. 177 00:10:01,890 --> 00:10:04,953 ‫And so now I can just keep writing here if I want. 178 00:10:05,970 --> 00:10:06,803 ‫Okay. 179 00:10:06,803 --> 00:10:08,430 ‫And I think that with this 180 00:10:08,430 --> 00:10:12,540 ‫we have actually finished this user state. 181 00:10:12,540 --> 00:10:16,320 ‫So nothing really new and nothing really groundbreaking 182 00:10:16,320 --> 00:10:20,190 ‫but we got to practice a little bit more 183 00:10:20,190 --> 00:10:23,610 ‫about what we learned earlier with Redux. 184 00:10:23,610 --> 00:10:24,900 ‫And now next up 185 00:10:24,900 --> 00:10:28,920 ‫it's time to start working on the cart global state. 186 00:10:28,920 --> 00:10:30,600 ‫And with this, we will be able 187 00:10:30,600 --> 00:10:34,293 ‫to then, finally, really make the application work.