1 00:00:01,140 --> 00:00:04,590 ‫So as we discussed in the application planning 2 00:00:04,590 --> 00:00:08,190 ‫lecture at the very beginning of this project, 3 00:00:08,190 --> 00:00:12,090 ‫we're gonna use Redux for all our global state. 4 00:00:12,090 --> 00:00:15,900 ‫So for the user state and for the card state. 5 00:00:15,900 --> 00:00:19,170 ‫And storing global UI state is exactly 6 00:00:19,170 --> 00:00:21,240 ‫what Redux was made for. 7 00:00:21,240 --> 00:00:24,600 ‫And so it's a great choice for this app. 8 00:00:24,600 --> 00:00:27,390 ‫But before we go do this, let's quickly 9 00:00:27,390 --> 00:00:30,873 ‫look at our list of project requirements again. 10 00:00:31,920 --> 00:00:35,790 ‫So many of these features are already implemented, or 11 00:00:35,790 --> 00:00:40,740 ‫at least they are implemented partially with some fake data. 12 00:00:40,740 --> 00:00:42,960 ‫And so now in this section, 13 00:00:42,960 --> 00:00:46,148 ‫we will implement all the remaining features starting 14 00:00:46,148 --> 00:00:48,900 ‫with the simple user state. 15 00:00:48,900 --> 00:00:51,783 ‫So in this lecture and the next one. 16 00:00:53,127 --> 00:00:56,544 ‫So here we are back in our project, and if 17 00:00:56,544 --> 00:01:01,200 ‫for some reason you skipped the previous Tailwind section, 18 00:01:01,200 --> 00:01:04,230 ‫so the optional section where we styled our 19 00:01:04,230 --> 00:01:06,840 ‫entire application, then at this point 20 00:01:06,840 --> 00:01:09,360 ‫in order to keep going in this project, 21 00:01:09,360 --> 00:01:11,250 ‫please get all the files 22 00:01:11,250 --> 00:01:15,000 ‫after that previous section from the GitHub repo. 23 00:01:15,000 --> 00:01:17,010 ‫So there's gonna be some folder 24 00:01:17,010 --> 00:01:21,601 ‫in that repo called "Final" or "Final After Tailwind". 25 00:01:21,601 --> 00:01:23,251 ‫And so please go ahead 26 00:01:23,251 --> 00:01:27,630 ‫and replace your entire project with that project. 27 00:01:27,630 --> 00:01:30,090 ‫So add all the files that are in there. 28 00:01:30,090 --> 00:01:33,557 ‫Now, if you want the styling to actually become applied 29 00:01:33,557 --> 00:01:34,980 ‫then you'll have to 30 00:01:34,980 --> 00:01:38,880 ‫at least watch the first lecture of the previous section. 31 00:01:38,880 --> 00:01:42,780 ‫So the one where we set up Tailwind on our system. 32 00:01:42,780 --> 00:01:46,260 ‫So you will then end up with this "tailwind.config" 33 00:01:46,260 --> 00:01:48,840 ‫and this "postcss.config" file. 34 00:01:48,840 --> 00:01:50,850 ‫And so after you have all of that, 35 00:01:50,850 --> 00:01:55,170 ‫then you are ready to keep going in this project. 36 00:01:55,170 --> 00:01:58,290 ‫So for everyone who actually styled this project 37 00:01:58,290 --> 00:02:01,740 ‫using Tailwind with me in the previous section, 38 00:02:01,740 --> 00:02:03,780 ‫you don't have to do anything. 39 00:02:03,780 --> 00:02:07,143 ‫So we just keep going right here in this video. 40 00:02:08,190 --> 00:02:11,550 ‫So as I said in the beginning, in this lecture 41 00:02:11,550 --> 00:02:15,150 ‫we will now start working on the user state. 42 00:02:15,150 --> 00:02:17,640 ‫And we have already decided earlier 43 00:02:17,640 --> 00:02:21,930 ‫that this user state is going to be global UI state. 44 00:02:21,930 --> 00:02:24,990 ‫And the reason for that is that we need that state 45 00:02:24,990 --> 00:02:28,590 ‫in many places in the application tree. 46 00:02:28,590 --> 00:02:32,160 ‫So we are going to need it up there in the header. 47 00:02:32,160 --> 00:02:35,366 ‫So at least if the app is large enough, 48 00:02:35,366 --> 00:02:37,860 ‫so we need it right here. 49 00:02:37,860 --> 00:02:40,080 ‫We also need it for this component here. 50 00:02:40,080 --> 00:02:44,040 ‫So to decide if we want to display this one here 51 00:02:44,040 --> 00:02:47,343 ‫and also to then update the name. 52 00:02:48,360 --> 00:02:53,360 ‫Also, we need the username right here and even right here. 53 00:02:54,420 --> 00:02:58,770 ‫So then we can automatically pre-populate this input field 54 00:02:58,770 --> 00:03:00,600 ‫with that username. 55 00:03:00,600 --> 00:03:03,450 ‫And so in order to make this really easy for us, 56 00:03:03,450 --> 00:03:08,340 ‫let's just use Redux in order to store that global state. 57 00:03:08,340 --> 00:03:10,770 ‫I mean, of course we could also just 58 00:03:10,770 --> 00:03:15,770 ‫create a state variable right here, so inside "app.js" 59 00:03:16,047 --> 00:03:19,710 ‫and then I guess we could somehow pass that 60 00:03:19,710 --> 00:03:20,766 ‫into the components, 61 00:03:20,766 --> 00:03:24,060 ‫even though that wouldn't be super practical. 62 00:03:24,060 --> 00:03:26,850 ‫We could also create a context, 63 00:03:26,850 --> 00:03:30,273 ‫but let's just practice Redux a little bit more here. 64 00:03:31,560 --> 00:03:34,380 ‫So long story short, let's just come here 65 00:03:34,380 --> 00:03:39,380 ‫to our terminal and let's start by installing Redux. 66 00:03:39,660 --> 00:03:40,740 ‫And in particular, 67 00:03:40,740 --> 00:03:43,620 ‫we are actually going to use Redux Toolkit, 68 00:03:43,620 --> 00:03:47,466 ‫so the recommended way of using Redux right now. 69 00:03:47,466 --> 00:03:51,963 ‫So let's do npm install and then @reduxjs/toolkit 70 00:03:55,890 --> 00:04:00,109 ‫and then let's also immediately install react-redux, 71 00:04:00,109 --> 00:04:03,330 ‫so that we can then later connect Redux 72 00:04:03,330 --> 00:04:05,493 ‫with our React application. 73 00:04:07,170 --> 00:04:10,140 ‫All right, and so let's now come here 74 00:04:10,140 --> 00:04:12,303 ‫to the userSlice.JS file 75 00:04:12,303 --> 00:04:16,050 ‫that we already got earlier from our starter files. 76 00:04:16,050 --> 00:04:18,210 ‫So I actually didn't place this here 77 00:04:18,210 --> 00:04:20,760 ‫in the initial video where we first looked 78 00:04:20,760 --> 00:04:23,400 ‫at the starter files, but this was already 79 00:04:23,400 --> 00:04:26,850 ‫in your starter files and so you should already have it here 80 00:04:26,850 --> 00:04:29,103 ‫at this point also in this folder. 81 00:04:30,030 --> 00:04:31,590 ‫So let's open this. 82 00:04:31,590 --> 00:04:34,890 ‫And right away you see that we have a lot of code here, 83 00:04:34,890 --> 00:04:37,200 ‫but we will not need this for now. 84 00:04:37,200 --> 00:04:39,303 ‫So we can just safely ignore this. 85 00:04:40,170 --> 00:04:43,595 ‫Here let's just correctly import this, 86 00:04:43,595 --> 00:04:45,694 ‫which doesn't really work. 87 00:04:45,694 --> 00:04:49,260 ‫So let's just leave that for later and we'll just comment 88 00:04:49,260 --> 00:04:53,064 ‫out the entire thing here, because again 89 00:04:53,064 --> 00:04:57,093 ‫we are not going to need this very soon. 90 00:04:58,470 --> 00:05:03,470 ‫Now, okay and so just like before, let's now create a state 91 00:05:03,510 --> 00:05:07,680 ‫of slice here using the Redux Toolkit tools. 92 00:05:07,680 --> 00:05:09,660 ‫And as always, let's just start 93 00:05:09,660 --> 00:05:12,148 ‫with the "initialState" object. 94 00:05:12,148 --> 00:05:17,148 ‫So here we will have username and set it to an empty string. 95 00:05:18,660 --> 00:05:21,690 ‫And for now, that's actually it. 96 00:05:21,690 --> 00:05:24,180 ‫So later we will add some more stuff. 97 00:05:24,180 --> 00:05:27,540 ‫So in particular the user's address, but for now 98 00:05:27,540 --> 00:05:29,567 ‫we will really just have this. 99 00:05:29,567 --> 00:05:32,130 ‫So again, this is just an example 100 00:05:32,130 --> 00:05:34,860 ‫for us to practice Redux a little bit more, 101 00:05:34,860 --> 00:05:39,123 ‫but maybe we might not even need it, at least not yet. 102 00:05:40,920 --> 00:05:44,190 ‫But anyway, let's now create our user slice. 103 00:05:44,190 --> 00:05:47,550 ‫And so this is exactly what we have learned previously 104 00:05:47,550 --> 00:05:49,350 ‫in the Redux section. 105 00:05:49,350 --> 00:05:51,900 ‫And so in order to understand this entire part 106 00:05:51,900 --> 00:05:53,921 ‫of the project, it is very important 107 00:05:53,921 --> 00:05:57,210 ‫that you did actually watch that section. 108 00:05:57,210 --> 00:06:00,273 ‫So not only watch, but of course also learn. 109 00:06:01,530 --> 00:06:06,120 ‫But anyway, let's now then create our slice here 110 00:06:06,120 --> 00:06:10,260 ‫which we of course need to import from Redux Toolkit. 111 00:06:10,260 --> 00:06:12,090 ‫And then what we need to pass in here 112 00:06:12,090 --> 00:06:16,320 ‫is an object with the name of this slice. 113 00:06:16,320 --> 00:06:20,880 ‫So that's user, then the initial state, 114 00:06:20,880 --> 00:06:25,593 ‫and then an object of our reducers. 115 00:06:28,080 --> 00:06:31,050 ‫And for now, the only one that we will have here 116 00:06:31,050 --> 00:06:34,080 ‫is one to update the username. 117 00:06:34,080 --> 00:06:36,150 ‫So let's just call that "updateName." 118 00:06:36,150 --> 00:06:37,110 ‫And as always, 119 00:06:37,110 --> 00:06:42,110 ‫it will receive the current state and the action object. 120 00:06:42,960 --> 00:06:47,276 ‫And then we can mutate "state.username" 121 00:06:47,276 --> 00:06:50,700 ‫and set it to the received username. 122 00:06:50,700 --> 00:06:54,627 ‫So as always, that's "action.payload." 123 00:06:56,370 --> 00:06:59,283 ‫All right, and this is actually it. 124 00:07:00,360 --> 00:07:05,130 ‫So let's now then export our Redux service from here 125 00:07:05,130 --> 00:07:10,063 ‫which we can get by immediately destructuring that 126 00:07:10,063 --> 00:07:14,583 ‫from "userSlice.actions". 127 00:07:16,770 --> 00:07:18,300 ‫So again, I'm going really 128 00:07:18,300 --> 00:07:20,520 ‫really fast here because I'm assuming 129 00:07:20,520 --> 00:07:23,643 ‫that you already know how Redux Toolkit works. 130 00:07:26,370 --> 00:07:29,400 ‫Alright, but anyway, 131 00:07:29,400 --> 00:07:33,930 ‫let's then also export default the reducer itself. 132 00:07:33,930 --> 00:07:36,877 ‫So the reducer that we will need to set 133 00:07:36,877 --> 00:07:39,693 ‫up our Redux store next. 134 00:07:41,730 --> 00:07:43,680 ‫So just to quickly recap, 135 00:07:43,680 --> 00:07:48,230 ‫here we created a slice of our global UI state. 136 00:07:48,230 --> 00:07:49,893 ‫So by using this function here, 137 00:07:51,135 --> 00:07:52,650 ‫we created a slice called user 138 00:07:52,650 --> 00:07:55,590 ‫which has this initial state right here. 139 00:07:55,590 --> 00:07:57,120 ‫And then we have a reducer 140 00:07:57,120 --> 00:08:00,405 ‫which is this function that is responsible 141 00:08:00,405 --> 00:08:02,250 ‫for updating the state object. 142 00:08:02,250 --> 00:08:05,280 ‫So that function, in this case this method here, 143 00:08:05,280 --> 00:08:08,460 ‫receives the current state and the action. 144 00:08:08,460 --> 00:08:11,400 ‫And then since we are using Redux Toolkit, 145 00:08:11,400 --> 00:08:14,395 ‫we can directly mutate this state object 146 00:08:14,395 --> 00:08:16,770 ‫and then set the "state.username" 147 00:08:16,770 --> 00:08:19,740 ‫to the one that we receive as soon 148 00:08:19,740 --> 00:08:22,440 ‫as we're going to dispatch the action. 149 00:08:22,440 --> 00:08:25,772 ‫So that is then going to be "action.payload", 150 00:08:25,772 --> 00:08:29,471 ‫but then inside "userSlice.actions", 151 00:08:29,471 --> 00:08:32,820 ‫we will get access to the action creators. 152 00:08:32,820 --> 00:08:36,256 ‫And so we then export it here as a named export, 153 00:08:36,256 --> 00:08:40,200 ‫so that we can then use that here in our application 154 00:08:40,200 --> 00:08:43,950 ‫and in particular probably here in this form. 155 00:08:43,950 --> 00:08:46,440 ‫So here we will then update the name 156 00:08:46,440 --> 00:08:48,510 ‫using this action creator 157 00:08:48,510 --> 00:08:52,578 ‫qnd then we also export default, the "slice.reducer". 158 00:08:52,578 --> 00:08:56,640 ‫And so let's now actually use this reducer to set 159 00:08:56,640 --> 00:08:57,995 ‫up or store. 160 00:08:57,995 --> 00:09:02,430 ‫So let's create a new file right here 161 00:09:02,430 --> 00:09:04,983 ‫in the top level of the source folder. 162 00:09:06,900 --> 00:09:10,737 ‫And is, by convention, is just called "store.js". 163 00:09:12,240 --> 00:09:15,000 ‫So let's create a variable called "store" 164 00:09:15,000 --> 00:09:16,300 ‫which will be the result 165 00:09:17,487 --> 00:09:20,677 ‫of calling "configureStore" from Redux Toolkit. 166 00:09:20,677 --> 00:09:22,860 ‫And so this one, 167 00:09:22,860 --> 00:09:26,760 ‫all it needs right now is to receive an object 168 00:09:26,760 --> 00:09:29,880 ‫with the reducer property where we can then pass 169 00:09:29,880 --> 00:09:33,900 ‫in the user reducer. 170 00:09:33,900 --> 00:09:38,670 ‫And so that is going to be this one that we exported here. 171 00:09:38,670 --> 00:09:40,503 ‫So let's import that here. 172 00:09:41,850 --> 00:09:44,253 ‫So import "userReducer" from 173 00:09:52,320 --> 00:09:57,087 ‫and "features/user/userSlice". 174 00:10:01,170 --> 00:10:06,170 ‫Okay. And then all we need to do is to export this store. 175 00:10:08,460 --> 00:10:12,630 ‫And with this we have our Redux store nicely configured 176 00:10:12,630 --> 00:10:16,860 ‫and can now provide it to our React application. 177 00:10:16,860 --> 00:10:20,764 ‫So all we did up until this point was in "Redux land", 178 00:10:20,764 --> 00:10:24,420 ‫but now we have to of course connect the two. 179 00:10:24,420 --> 00:10:27,499 ‫And so we usually do that at the very top 180 00:10:27,499 --> 00:10:32,499 ‫of our component tree, which is actually inside "main.jsx". 181 00:10:34,650 --> 00:10:37,680 ‫So we want to provide our global state really 182 00:10:37,680 --> 00:10:39,270 ‫to the entire app tree. 183 00:10:39,270 --> 00:10:43,050 ‫And so here we need to now use the provider component 184 00:10:43,050 --> 00:10:46,353 ‫which is part of the React Redux package. 185 00:10:48,690 --> 00:10:51,783 ‫So exactly this one right here. 186 00:10:52,964 --> 00:10:57,097 ‫And then here as the single prop we need to pass 187 00:10:58,020 --> 00:11:02,787 ‫and the store object that we just exported from "store.js". 188 00:11:02,787 --> 00:11:07,020 ‫And so here we can also automatically import that. 189 00:11:07,020 --> 00:11:10,440 ‫And with this, we are good to go. 190 00:11:10,440 --> 00:11:13,800 ‫So our application should now be correctly connected 191 00:11:13,800 --> 00:11:17,108 ‫to Redux and to see if it actually is, 192 00:11:17,108 --> 00:11:22,108 ‫let's come here to our username component. 193 00:11:22,260 --> 00:11:26,760 ‫And then in here we will try to get that state from Redux. 194 00:11:26,760 --> 00:11:30,960 ‫And remember that the way we get some state from Redux 195 00:11:30,960 --> 00:11:35,553 ‫inside a React component is by using the "useSelector" hook. 196 00:11:38,539 --> 00:11:41,400 ‫So "useSelector" again provided by React Redux, 197 00:11:41,400 --> 00:11:44,580 ‫and then here we need to pass in a selector function 198 00:11:44,580 --> 00:11:48,884 ‫and that function gets as a parameter, the entire state. 199 00:11:48,884 --> 00:11:52,710 ‫And then here we can select only what we want 200 00:11:52,710 --> 00:11:56,697 ‫so that "state.user.username". 201 00:11:56,697 --> 00:12:00,750 ‫And then let's of course store that also here 202 00:12:00,750 --> 00:12:03,987 ‫in a variable called "username", 203 00:12:05,130 --> 00:12:10,053 ‫that then here we replace that with the username. 204 00:12:11,190 --> 00:12:14,490 ‫And of course, at this point we won't see anything 205 00:12:14,490 --> 00:12:17,253 ‫because by default the user is empty. 206 00:12:19,320 --> 00:12:24,320 ‫So let's just place some name here. 207 00:12:24,750 --> 00:12:26,463 ‫And then let's see. 208 00:12:27,360 --> 00:12:29,400 ‫And beautiful. 209 00:12:29,400 --> 00:12:34,050 ‫So we are getting this state now right from Redux. 210 00:12:34,050 --> 00:12:35,460 ‫So if we change this here, 211 00:12:35,460 --> 00:12:38,403 ‫then of course that changes over there as well. 212 00:12:39,330 --> 00:12:44,330 ‫Nice. Now of course, if there is no username, 213 00:12:44,370 --> 00:12:48,300 ‫then we don't want to even render that component. 214 00:12:48,300 --> 00:12:50,283 ‫So let's quickly do that as well. 215 00:12:51,420 --> 00:12:56,420 ‫So if no username, then just "return null". 216 00:12:59,070 --> 00:13:00,180 ‫And so in this case, 217 00:13:00,180 --> 00:13:02,943 ‫then there is nothing to be displayed there. 218 00:13:03,990 --> 00:13:08,130 ‫Great. So we actually already finished this component, 219 00:13:08,130 --> 00:13:10,058 ‫but now of course we need a way 220 00:13:10,058 --> 00:13:14,790 ‫of also setting this username in the first place. 221 00:13:14,790 --> 00:13:17,670 ‫So that we will do right here in this component. 222 00:13:17,670 --> 00:13:20,943 ‫And so let's leave that for the next video.