‫So as we discussed in the application planning
‫lecture at the very beginning of this project,
‫we're gonna use Redux for all our global state.
‫So for the user state and for the card state.
‫And storing global UI state is exactly
‫what Redux was made for.
‫And so it's a great choice for this app.
‫But before we go do this, let's quickly
‫look at our list of project requirements again.
‫So many of these features are already implemented, or
‫at least they are implemented partially with some fake data.
‫And so now in this section,
‫we will implement all the remaining features starting
‫with the simple user state.
‫So in this lecture and the next one.
‫So here we are back in our project, and if
‫for some reason you skipped the previous Tailwind section,
‫so the optional section where we styled our
‫entire application, then at this point
‫in order to keep going in this project,
‫please get all the files
‫after that previous section from the GitHub repo.
‫So there's gonna be some folder
‫in that repo called "Final" or "Final After Tailwind".
‫And so please go ahead
‫and replace your entire project with that project.
‫So add all the files that are in there.
‫Now, if you want the styling to actually become applied
‫then you'll have to
‫at least watch the first lecture of the previous section.
‫So the one where we set up Tailwind on our system.
‫So you will then end up with this "tailwind.config"
‫and this "postcss.config" file.
‫And so after you have all of that,
‫then you are ready to keep going in this project.
‫So for everyone who actually styled this project
‫using Tailwind with me in the previous section,
‫you don't have to do anything.
‫So we just keep going right here in this video.
‫So as I said in the beginning, in this lecture
‫we will now start working on the user state.
‫And we have already decided earlier
‫that this user state is going to be global UI state.
‫And the reason for that is that we need that state
‫in many places in the application tree.
‫So we are going to need it up there in the header.
‫So at least if the app is large enough,
‫so we need it right here.
‫We also need it for this component here.
‫So to decide if we want to display this one here
‫and also to then update the name.
‫Also, we need the username right here and even right here.
‫So then we can automatically pre-populate this input field
‫with that username.
‫And so in order to make this really easy for us,
‫let's just use Redux in order to store that global state.
‫I mean, of course we could also just
‫create a state variable right here, so inside "app.js"
‫and then I guess we could somehow pass that
‫into the components,
‫even though that wouldn't be super practical.
‫We could also create a context,
‫but let's just practice Redux a little bit more here.
‫So long story short, let's just come here
‫to our terminal and let's start by installing Redux.
‫And in particular,
‫we are actually going to use Redux Toolkit,
‫so the recommended way of using Redux right now.
‫So let's do npm install and then @reduxjs/toolkit
‫and then let's also immediately install react-redux,
‫so that we can then later connect Redux
‫with our React application.
‫All right, and so let's now come here
‫to the userSlice.JS file
‫that we already got earlier from our starter files.
‫So I actually didn't place this here
‫in the initial video where we first looked
‫at the starter files, but this was already
‫in your starter files and so you should already have it here
‫at this point also in this folder.
‫So let's open this.
‫And right away you see that we have a lot of code here,
‫but we will not need this for now.
‫So we can just safely ignore this.
‫Here let's just correctly import this,
‫which doesn't really work.
‫So let's just leave that for later and we'll just comment
‫out the entire thing here, because again
‫we are not going to need this very soon.
‫Now, okay and so just like before, let's now create a state
‫of slice here using the Redux Toolkit tools.
‫And as always, let's just start
‫with the "initialState" object.
‫So here we will have username and set it to an empty string.
‫And for now, that's actually it.
‫So later we will add some more stuff.
‫So in particular the user's address, but for now
‫we will really just have this.
‫So again, this is just an example
‫for us to practice Redux a little bit more,
‫but maybe we might not even need it, at least not yet.
‫But anyway, let's now create our user slice.
‫And so this is exactly what we have learned previously
‫in the Redux section.
‫And so in order to understand this entire part
‫of the project, it is very important
‫that you did actually watch that section.
‫So not only watch, but of course also learn.
‫But anyway, let's now then create our slice here
‫which we of course need to import from Redux Toolkit.
‫And then what we need to pass in here
‫is an object with the name of this slice.
‫So that's user, then the initial state,
‫and then an object of our reducers.
‫And for now, the only one that we will have here
‫is one to update the username.
‫So let's just call that "updateName."
‫And as always,
‫it will receive the current state and the action object.
‫And then we can mutate "state.username"
‫and set it to the received username.
‫So as always, that's "action.payload."
‫All right, and this is actually it.
‫So let's now then export our Redux service from here
‫which we can get by immediately destructuring that
‫from "userSlice.actions".
‫So again, I'm going really
‫really fast here because I'm assuming
‫that you already know how Redux Toolkit works.
‫Alright, but anyway,
‫let's then also export default the reducer itself.
‫So the reducer that we will need to set
‫up our Redux store next.
‫So just to quickly recap,
‫here we created a slice of our global UI state.
‫So by using this function here,
‫we created a slice called user
‫which has this initial state right here.
‫And then we have a reducer
‫which is this function that is responsible
‫for updating the state object.
‫So that function, in this case this method here,
‫receives the current state and the action.
‫And then since we are using Redux Toolkit,
‫we can directly mutate this state object
‫and then set the "state.username"
‫to the one that we receive as soon
‫as we're going to dispatch the action.
‫So that is then going to be "action.payload",
‫but then inside "userSlice.actions",
‫we will get access to the action creators.
‫And so we then export it here as a named export,
‫so that we can then use that here in our application
‫and in particular probably here in this form.
‫So here we will then update the name
‫using this action creator
‫qnd then we also export default, the "slice.reducer".
‫And so let's now actually use this reducer to set
‫up or store.
‫So let's create a new file right here
‫in the top level of the source folder.
‫And is, by convention, is just called "store.js".
‫So let's create a variable called "store"
‫which will be the result
‫of calling "configureStore" from Redux Toolkit.
‫And so this one,
‫all it needs right now is to receive an object
‫with the reducer property where we can then pass
‫in the user reducer.
‫And so that is going to be this one that we exported here.
‫So let's import that here.
‫So import "userReducer" from
‫and "features/user/userSlice".
‫Okay. And then all we need to do is to export this store.
‫And with this we have our Redux store nicely configured
‫and can now provide it to our React application.
‫So all we did up until this point was in "Redux land",
‫but now we have to of course connect the two.
‫And so we usually do that at the very top
‫of our component tree, which is actually inside "main.jsx".
‫So we want to provide our global state really
‫to the entire app tree.
‫And so here we need to now use the provider component
‫which is part of the React Redux package.
‫So exactly this one right here.
‫And then here as the single prop we need to pass
‫and the store object that we just exported from "store.js".
‫And so here we can also automatically import that.
‫And with this, we are good to go.
‫So our application should now be correctly connected
‫to Redux and to see if it actually is,
‫let's come here to our username component.
‫And then in here we will try to get that state from Redux.
‫And remember that the way we get some state from Redux
‫inside a React component is by using the "useSelector" hook.
‫So "useSelector" again provided by React Redux,
‫and then here we need to pass in a selector function
‫and that function gets as a parameter, the entire state.
‫And then here we can select only what we want
‫so that "state.user.username".
‫And then let's of course store that also here
‫in a variable called "username",
‫that then here we replace that with the username.
‫And of course, at this point we won't see anything
‫because by default the user is empty.
‫So let's just place some name here.
‫And then let's see.
‫And beautiful.
‫So we are getting this state now right from Redux.
‫So if we change this here,
‫then of course that changes over there as well.
‫Nice. Now of course, if there is no username,
‫then we don't want to even render that component.
‫So let's quickly do that as well.
‫So if no username, then just "return null".
‫And so in this case,
‫then there is nothing to be displayed there.
‫Great. So we actually already finished this component,
‫but now of course we need a way
‫of also setting this username in the first place.
‫So that we will do right here in this component.
‫And so let's leave that for the next video.