‫Let's now update
‫the user state from our application
‫and also display that state in multiple places.
‫So do you remember how we update the state inside Redux?
‫Well, we update Redux state
‫by dispatching an action to our reducer here,
‫and we do that by using the action creator
‫that was automatically created by the create slice function.
‫So in that case,
‫that's this update name function right here.
‫So let's do that in practice right here
‫in this create user component that we already have.
‫So this create user is this one right here.
‫And this exists because, remember,
‫that one of the requirements of the application
‫was that the user needs to input their name
‫before starting to use the application.
‫And so therefore we have this form right here
‫where we can start typing a name
‫and then as soon as something is there,
‫we can click on this button.
‫And so as soon as we click here,
‫we want to update the username in Redux,
‫and then we want to navigate right to the pizza menu.
‫Okay, so let's just quickly look here
‫at the component that we already have
‫and we see that we have a local username state.
‫And so that's simply because this input field
‫is a regular controlled element.
‫So we always read the value from username
‫and each time we type a new character,
‫we update that state.
‫And we do it this way, so we are temporarily storing
‫the username right in the component itself
‫because it is a very bad practice
‫to connect an input field right to the Redux store.
‫So as we change the username here,
‫so as we type a new input here,
‫we should really update a local state variable
‫and not always update the Redux store.
‫Instead, we should only do that
‫as soon as we actually submit this form.
‫So as soon as we are done inputting the username.
‫And so that's here in the handle submit function.
‫So this input here and the button
‫are inside this form element.
‫And so, therefore,
‫as soon as we click here the form gets submitted.
‫And then we, as always,
‫use the handle submit function to handle that.
‫And so again, it is in here
‫where we will then actually update the Redux store
‫and then redirect the user to the menu.
‫All right, so let's start doing that.
‫And first let's do a guard clause
‫saying that if there is no username, then just return.
‫But in all other cases, we now want to update the store.
‫And so remember how we said earlier
‫that we do that by dispatching an action.
‫Now the way in which we get access to the dispatch function
‫is to use the use dispatch hook
‫that is provided by React Redux.
‫And then let's store that here in dispatch.
‫And then here we can dispatch an action.
‫Now, instead of manually creating the action here,
‫we use an action creator function,
‫which again, is this one right here
‫that was exported from user slice.
‫So that's called update name.
‫And so here we automatically import that from the slice
‫and all that we need to pass in here
‫is going to be the username
‫because this username will then become the action.payload
‫which will then become assigned to state.username.
‫And then as soon as that happens,
‫of course, the entire application will re-render
‫and display that username everywhere.
‫And so this should actually already be working.
‫So if I type this now, hit enter,
‫nice, then it appears up here.
‫Great.
‫And now all we need to do
‫is to then also redirect to the menu.
‫And so for that we need the navigate function
‫which we get from use navigate.
‫So part of React Router.
‫So navigate to the menu.
‫Let's use something else now.
‫And so here we are at the menu
‫and here we have that updated name.
‫Nice.
‫So that one is finished,
‫but now as soon as we go back here,
‫then it is again asking for our name.
‫So there's not really a good way of going back to the menu.
‫And so here in the homepage
‫we only want to display this form,
‫so the create user component, in case there is no user yet.
‫So let's do that.
‫So right here, let's read the user from the state.
‫So let's say username is equal to use selector,
‫remember, which is how we read data from Redux store,
‫and then again, this gets access to the entire state,
‫and then we get state.user.username.
‫And so then here, we can conditionally render
‫either this or a button that will then
‫redirect us or which will take us to that menu.
‫So let's say if the username is equal to an empty string
‫then render this create user component but otherwise,
‫let's then render this button component
‫that we created earlier,
‫and then let's place the to prop here,
‫so to tell this button that it should move to menu,
‫and also let's specify the type and set it to primary.
‫And again, if you didn't watch
‫the previous section on Tailwind
‫then you will not really know how this button works
‫and so then please go ahead and check this out.
‫Basically, we created a button here
‫which is either rendered as a React Router link,
‫so in case we receive the to prop,
‫and if not, it is simply rendered as a regular button.
‫All right.
‫And then the type here simply determines the styling.
‫So this is a primary type,
‫but of course here we are missing the text,
‫so continue ordering
‫and then let's also add the username here.
‫So continue ordering, test.
‫So if we click here, we are then back at the menu.
‫Great.
‫And of course if we reload this entire app
‫then the application state will be gone.
‫So we are not persisting this state to any API
‫and therefore whenever we reload,
‫then everything will be lost.
‫But that's just the way
‫that our business wants this application to work.
‫So they don't want any user accounts
‫and so, well, this is just how it works then.
‫So let's do that again.
‫Jonas.
‫And then here it says Jonas.
‫And as we go back, then here we no longer have that form.
‫Nice.
‫And now we just need this in two more places.
‫First here, and then also on this order pizzas page.
‫So let's quickly do that
‫and I will actually just copy this code here
‫and let's move to the cart, place that right here.
‫Then we just need to import this custom hook just like this.
‫And then here it's username, like this.
‫So that's done.
‫And finally we also want to place that right there.
‫So that's in create order.
‫Place that here at the very top,
‫again using our trick to import, use selector,
‫and then here, let's use that value.
‫So it's right here in this input field.
‫However, we cannot do this.
‫So not just username because that would show our name here
‫but then whenever we wanted to update this,
‫so I'm typing here now,
‫then this wouldn't change anything
‫because we are not listening for any change event here.
‫So we don't want this to be really the value
‫but just the default value.
‫So that's another prop that we can use
‫and I'm not sure if we have ever used it
‫but this is a very important one
‫because it basically, as the name says,
‫simply allows us to set a default value at the beginning
‫but which we can then still change.
‫And so this is now not a controlled element
‫it's simply a normal HTML element
‫which happens to have a default value.
‫And so now I can just keep writing here if I want.
‫Okay.
‫And I think that with this
‫we have actually finished this user state.
‫So nothing really new and nothing really groundbreaking
‫but we got to practice a little bit more
‫about what we learned earlier with Redux.
‫And now next up
‫it's time to start working on the cart global state.
‫And with this, we will be able
‫to then, finally, really make the application work.