1 00:00:01,110 --> 00:00:03,390 ‫Let's now organize our code 2 00:00:03,390 --> 00:00:04,890 ‫into a more modern 3 00:00:04,890 --> 00:00:07,500 ‫and more professional file structure 4 00:00:07,500 --> 00:00:11,223 ‫while using the concept of state slices. 5 00:00:12,690 --> 00:00:16,440 ‫So our code here is getting a bit out of hand. 6 00:00:16,440 --> 00:00:18,780 ‫So we have all these action creators 7 00:00:18,780 --> 00:00:21,840 ‫and the reducers and the initial state 8 00:00:21,840 --> 00:00:26,310 ‫all in one file for all of these different state domains. 9 00:00:26,310 --> 00:00:29,250 ‫So for the account and for the customer. 10 00:00:29,250 --> 00:00:34,110 ‫And so imagine we had 10 reducers instead of just two. 11 00:00:34,110 --> 00:00:36,510 ‫So this is not practical at all 12 00:00:36,510 --> 00:00:39,030 ‫and this is not how we do it. 13 00:00:39,030 --> 00:00:43,620 ‫Now a few years ago, so basically at the beginning of Redux, 14 00:00:43,620 --> 00:00:47,340 ‫developers would usually create one reducers folder 15 00:00:47,340 --> 00:00:50,550 ‫and then create one file per reducer, 16 00:00:50,550 --> 00:00:52,890 ‫and the same with the action creators. 17 00:00:52,890 --> 00:00:55,410 ‫So they would create one actions folder 18 00:00:55,410 --> 00:00:59,010 ‫and then one file for each action creator. 19 00:00:59,010 --> 00:01:00,720 ‫So you will definitely see that 20 00:01:00,720 --> 00:01:04,470 ‫if you look at some older Redux code base. 21 00:01:04,470 --> 00:01:07,860 ‫However, this leads to a lot of jumping around 22 00:01:07,860 --> 00:01:09,240 ‫in the code base. 23 00:01:09,240 --> 00:01:11,490 ‫So jumping between different files 24 00:01:11,490 --> 00:01:15,930 ‫which is really not useful once you're writing your code. 25 00:01:15,930 --> 00:01:19,380 ‫And so this is no longer the recommended approach. 26 00:01:19,380 --> 00:01:22,800 ‫Instead, we are now going to organize our application 27 00:01:22,800 --> 00:01:24,150 ‫into features. 28 00:01:24,150 --> 00:01:27,480 ‫And in our case, the features are pretty obvious. 29 00:01:27,480 --> 00:01:32,130 ‫So we have the account and the customer, right? 30 00:01:32,130 --> 00:01:35,250 ‫And we will then also organize our components 31 00:01:35,250 --> 00:01:38,070 ‫into these same feature folders. 32 00:01:38,070 --> 00:01:41,070 ‫For example, here we have the balance of the account 33 00:01:41,070 --> 00:01:44,100 ‫and so that's gonna be part of the account, 34 00:01:44,100 --> 00:01:46,740 ‫so this, here is an account feature 35 00:01:46,740 --> 00:01:50,640 ‫and the same here for these operations on the account. 36 00:01:50,640 --> 00:01:52,980 ‫while creating a new customer 37 00:01:52,980 --> 00:01:56,550 ‫and displaying the customer name are definitely features 38 00:01:56,550 --> 00:01:58,440 ‫of the customer. 39 00:01:58,440 --> 00:02:02,070 ‫So it's a customer feature, and therefore, 40 00:02:02,070 --> 00:02:03,183 ‫let's now do that. 41 00:02:05,250 --> 00:02:09,060 ‫So this is a completely new way of organizing code 42 00:02:09,060 --> 00:02:12,421 ‫and we will explore this a lot deeper as we start writing 43 00:02:12,421 --> 00:02:14,790 ‫our next big projects. 44 00:02:14,790 --> 00:02:18,363 ‫So those ones we will also organize into features. 45 00:02:19,200 --> 00:02:21,840 ‫So instead of having like a component folder 46 00:02:21,840 --> 00:02:23,013 ‫we will just create, 47 00:02:24,150 --> 00:02:27,240 ‫as I have been saying, the features folder. 48 00:02:27,240 --> 00:02:31,860 ‫And then in there, we create one folder for each feature. 49 00:02:31,860 --> 00:02:36,807 ‫So account, and I should write it correctly. 50 00:02:38,100 --> 00:02:38,943 ‫So, 51 00:02:40,824 --> 00:02:44,853 ‫account like this, and let's do another one. 52 00:02:47,250 --> 00:02:48,483 ‫So customers, 53 00:02:49,320 --> 00:02:52,530 ‫so we should call them the plural name. 54 00:02:52,530 --> 00:02:54,090 ‫And so, 55 00:02:54,090 --> 00:02:56,970 ‫let's give ourselves a bit more space. 56 00:02:56,970 --> 00:02:59,970 ‫So the account operations component 57 00:02:59,970 --> 00:03:03,720 ‫sounds like it's part of this one right here, 58 00:03:03,720 --> 00:03:05,040 ‫and then we get an error. 59 00:03:05,040 --> 00:03:08,403 ‫So let's actually update the imports here. 60 00:03:09,450 --> 00:03:10,563 ‫And so, 61 00:03:11,640 --> 00:03:15,273 ‫yeah, so right here now inside this app.js, 62 00:03:16,680 --> 00:03:20,580 ‫then these path here will no longer be correct. 63 00:03:20,580 --> 00:03:21,510 ‫And so in case 64 00:03:21,510 --> 00:03:25,830 ‫that your VS code did not automatically update the import, 65 00:03:25,830 --> 00:03:27,933 ‫you need to do that on your own. 66 00:03:29,070 --> 00:03:31,020 ‫But anyway, the balance display 67 00:03:31,020 --> 00:03:33,183 ‫is also part of the accounts. 68 00:03:34,710 --> 00:03:38,463 ‫So again, the path to the file updated automatically, 69 00:03:40,500 --> 00:03:43,860 ‫and then create customer is here part 70 00:03:43,860 --> 00:03:45,540 ‫of the customer's feature 71 00:03:45,540 --> 00:03:48,633 ‫and the same thing for the customer. 72 00:03:49,920 --> 00:03:52,560 ‫All right, so all four components 73 00:03:52,560 --> 00:03:54,480 ‫are now in their right place 74 00:03:54,480 --> 00:03:57,363 ‫and the file path have been updated. 75 00:03:58,950 --> 00:04:02,070 ‫Okay, but now back to Redux 76 00:04:02,070 --> 00:04:07,070 ‫where it is now time to also create a file for each feature, 77 00:04:07,800 --> 00:04:10,323 ‫here in this folder, about Redux. 78 00:04:12,030 --> 00:04:15,693 ‫So let's call this one an account slice. 79 00:04:16,770 --> 00:04:19,560 ‫So a slice is basically a piece, 80 00:04:19,560 --> 00:04:23,310 ‫so just a part of the total state. 81 00:04:23,310 --> 00:04:26,550 ‫So the entire state lives in the store. 82 00:04:26,550 --> 00:04:31,320 ‫And so here we then basically take one slice of that state. 83 00:04:31,320 --> 00:04:34,140 ‫And so this one here is gonna be everything related 84 00:04:34,140 --> 00:04:35,490 ‫to the account, 85 00:04:35,490 --> 00:04:38,913 ‫and then we will also have one customer slice. 86 00:04:43,980 --> 00:04:47,310 ‫And so now the idea is that in each slice, 87 00:04:47,310 --> 00:04:51,720 ‫we co-locate as much as the Redux logic as possible 88 00:04:51,720 --> 00:04:55,200 ‫in one file so that we don't have to jump around 89 00:04:55,200 --> 00:04:57,210 ‫all the time between files, 90 00:04:57,210 --> 00:04:59,850 ‫which is really annoying, trust me. 91 00:04:59,850 --> 00:05:03,900 ‫So usually, here replace the reducer, the action creators, 92 00:05:03,900 --> 00:05:07,350 ‫and the initial state, and we then export those 93 00:05:07,350 --> 00:05:10,680 ‫and put them back together here in the store. 94 00:05:10,680 --> 00:05:11,883 ‫So let's do that. 95 00:05:13,440 --> 00:05:17,380 ‫And actually, let's first create a copy so that you can 96 00:05:18,450 --> 00:05:22,053 ‫basically keep this initial version for yourself. 97 00:05:23,640 --> 00:05:24,543 ‫All right. 98 00:05:25,440 --> 00:05:27,350 ‫So let's take this initial state 99 00:05:27,350 --> 00:05:29,463 ‫of the account, cut it, 100 00:05:30,690 --> 00:05:32,553 ‫and again, a bit more space. 101 00:05:35,880 --> 00:05:38,940 ‫And actually, this is not the one that I wanted to edit, 102 00:05:38,940 --> 00:05:40,233 ‫but this one. 103 00:05:42,390 --> 00:05:45,333 ‫Okay, now the account reducer. 104 00:05:48,240 --> 00:05:51,060 ‫So let's cut that as well. 105 00:05:51,060 --> 00:05:52,710 ‫And of course, now the application 106 00:05:52,710 --> 00:05:54,513 ‫will really stop working here, 107 00:05:55,980 --> 00:05:57,840 ‫but that's not a problem. 108 00:05:57,840 --> 00:06:00,423 ‫So we are basically just refactoring here. 109 00:06:01,560 --> 00:06:05,733 ‫And now let's also grab all the four action creators. 110 00:06:07,680 --> 00:06:08,523 ‫Okay. 111 00:06:11,460 --> 00:06:15,090 ‫And then we will get rid of all this code that we had 112 00:06:15,090 --> 00:06:19,233 ‫which basically simply tested all those action creators. 113 00:06:21,630 --> 00:06:23,880 ‫And the same with these. 114 00:06:23,880 --> 00:06:25,920 ‫And now everything else, 115 00:06:25,920 --> 00:06:29,943 ‫except this part here should be about the customer. 116 00:06:31,050 --> 00:06:33,310 ‫So let's place that in here 117 00:06:34,560 --> 00:06:37,330 ‫and let's grab the initial state reducer 118 00:06:38,190 --> 00:06:43,053 ‫and action creator of the customer. 119 00:06:44,280 --> 00:06:45,213 ‫All right. 120 00:06:46,050 --> 00:06:47,280 ‫Nice. 121 00:06:47,280 --> 00:06:50,550 ‫And so, as I said initially, now we basically 122 00:06:50,550 --> 00:06:52,440 ‫need to get them back here, 123 00:06:52,440 --> 00:06:54,870 ‫so at least the reducers. 124 00:06:54,870 --> 00:06:59,040 ‫So what this means is that we need to now export 125 00:06:59,040 --> 00:07:00,573 ‫the reducers from here. 126 00:07:01,920 --> 00:07:06,240 ‫And usually what we like to do is a default export 127 00:07:06,240 --> 00:07:07,660 ‫of the reducer function 128 00:07:09,360 --> 00:07:11,493 ‫like this. 129 00:07:12,450 --> 00:07:15,810 ‫So we export this one as a default 130 00:07:15,810 --> 00:07:20,223 ‫and then we also export all of these, but as named exports. 131 00:07:22,170 --> 00:07:23,163 ‫So basically, 132 00:07:25,290 --> 00:07:28,263 ‫just placing the export keywords right there. 133 00:07:30,120 --> 00:07:31,050 ‫All right. 134 00:07:31,050 --> 00:07:34,590 ‫And now all we have to do is to import this reducer 135 00:07:34,590 --> 00:07:36,033 ‫back into the store. 136 00:07:36,960 --> 00:07:41,070 ‫Now these action creators, we will now no longer import them 137 00:07:41,070 --> 00:07:44,550 ‫into the store because that's not where we need them. 138 00:07:44,550 --> 00:07:47,850 ‫So later on, we will dispatch these actions 139 00:07:47,850 --> 00:07:49,860 ‫inside our React components. 140 00:07:49,860 --> 00:07:53,970 ‫And so that's where we will then use these action creators, 141 00:07:53,970 --> 00:07:57,663 ‫so we will later import them in our React application. 142 00:07:58,950 --> 00:07:59,890 ‫Now, before we 143 00:08:00,930 --> 00:08:03,160 ‫place them back in the store, let's 144 00:08:04,860 --> 00:08:07,323 ‫also export everything from here. 145 00:08:10,410 --> 00:08:11,243 ‫And then, 146 00:08:12,090 --> 00:08:13,640 ‫well, here it's only these two. 147 00:08:15,420 --> 00:08:16,253 ‫So, 148 00:08:17,430 --> 00:08:20,580 ‫export, and then just like this, 149 00:08:20,580 --> 00:08:24,810 ‫we are actually finished with these two slices. 150 00:08:24,810 --> 00:08:27,030 ‫So we have now these two slices 151 00:08:27,030 --> 00:08:30,843 ‫of the state and are ready to import them back here. 152 00:08:32,040 --> 00:08:32,980 ‫So import 153 00:08:33,840 --> 00:08:36,040 ‫account reducer 154 00:08:36,990 --> 00:08:37,823 ‫from 155 00:08:38,824 --> 00:08:40,590 ‫the features folder, 156 00:08:40,590 --> 00:08:44,460 ‫then accounts, and account slice. 157 00:08:44,460 --> 00:08:46,110 ‫And then 158 00:08:46,110 --> 00:08:50,290 ‫the same of course, for the customer reducer 159 00:08:53,010 --> 00:08:58,010 ‫from features, customers, and customer slice. 160 00:08:58,860 --> 00:09:02,190 ‫And of course, if we had some more data domains, 161 00:09:02,190 --> 00:09:05,700 ‫for example, if we had some state about the employees 162 00:09:05,700 --> 00:09:08,490 ‫of the bank, then for that, we would create 163 00:09:08,490 --> 00:09:11,100 ‫another slice of the state. 164 00:09:11,100 --> 00:09:11,970 ‫So in that slice, 165 00:09:11,970 --> 00:09:14,490 ‫we would then, again, have the initial state, 166 00:09:14,490 --> 00:09:17,310 ‫the reducer, and the action creators. 167 00:09:17,310 --> 00:09:22,080 ‫And so we will then combine that one as well with these two. 168 00:09:22,080 --> 00:09:24,330 ‫So then we create our store again, 169 00:09:24,330 --> 00:09:28,710 ‫and then in the end, all we have to do is to export that. 170 00:09:28,710 --> 00:09:31,920 ‫So let's do, again, an export default 171 00:09:31,920 --> 00:09:35,520 ‫of this store, so that we can then in a next lecture, 172 00:09:35,520 --> 00:09:38,853 ‫finally get this store into our application. 173 00:09:40,140 --> 00:09:41,550 ‫All right. 174 00:09:41,550 --> 00:09:45,420 ‫So let's now actually go to index.js 175 00:09:45,420 --> 00:09:48,240 ‫where we import the store file already, 176 00:09:48,240 --> 00:09:53,240 ‫but now, let's actually import the store from. 177 00:09:53,310 --> 00:09:56,700 ‫So now, we no longer just want to run this file, 178 00:09:56,700 --> 00:09:59,673 ‫but we also want to get this store back. 179 00:10:00,930 --> 00:10:03,870 ‫All right, and so now on that store, 180 00:10:03,870 --> 00:10:07,350 ‫we can, just like before, dispatch some actions. 181 00:10:07,350 --> 00:10:09,390 ‫So let's try that, 182 00:10:09,390 --> 00:10:11,970 ‫.dispatch. 183 00:10:11,970 --> 00:10:14,460 ‫And now instead of the action creators, 184 00:10:14,460 --> 00:10:17,313 ‫I will just again write one manually. 185 00:10:18,660 --> 00:10:22,920 ‫So let's say the type is deposit 186 00:10:22,920 --> 00:10:26,880 ‫or I think that's account/deposit, 187 00:10:26,880 --> 00:10:28,563 ‫and then the payload, 188 00:10:30,420 --> 00:10:35,420 ‫let's do 250 and then let's console log store.getstate. 189 00:10:40,260 --> 00:10:44,460 ‫Give it a safe, and let's see, 190 00:10:44,460 --> 00:10:45,960 ‫nice. 191 00:10:45,960 --> 00:10:48,390 ‫So our Redux store still works 192 00:10:48,390 --> 00:10:50,790 ‫in exactly the same way as before, 193 00:10:50,790 --> 00:10:52,380 ‫but now it is really 194 00:10:52,380 --> 00:10:56,763 ‫in this nice modern and professional file structure. 195 00:10:57,870 --> 00:10:59,700 ‫So again, what we did, 196 00:10:59,700 --> 00:11:04,260 ‫we basically divided our store into these multiple slices. 197 00:11:04,260 --> 00:11:08,130 ‫And so, a slice basically corresponds to the initial state, 198 00:11:08,130 --> 00:11:10,950 ‫the reducer, and the action creators. 199 00:11:10,950 --> 00:11:15,060 ‫And notice how this file really is only functions 200 00:11:15,060 --> 00:11:16,950 ‫and this object. 201 00:11:16,950 --> 00:11:20,010 ‫So we are not even using Redux here. 202 00:11:20,010 --> 00:11:24,360 ‫The only file in which we're gonna use Redux is right here, 203 00:11:24,360 --> 00:11:28,200 ‫so that we can combine our reducers and then create a store. 204 00:11:28,200 --> 00:11:30,150 ‫And so then in the end, 205 00:11:30,150 --> 00:11:34,590 ‫we export that store so that we can then import it here. 206 00:11:34,590 --> 00:11:37,620 ‫And in the next lecture, we will then actually 207 00:11:37,620 --> 00:11:42,240 ‫inject that store basically into our React application. 208 00:11:42,240 --> 00:11:44,973 ‫And therefore, finally connecting the two.