‫Let's now organize our code
‫into a more modern
‫and more professional file structure
‫while using the concept of state slices.
‫So our code here is getting a bit out of hand.
‫So we have all these action creators
‫and the reducers and the initial state
‫all in one file for all of these different state domains.
‫So for the account and for the customer.
‫And so imagine we had 10 reducers instead of just two.
‫So this is not practical at all
‫and this is not how we do it.
‫Now a few years ago, so basically at the beginning of Redux,
‫developers would usually create one reducers folder
‫and then create one file per reducer,
‫and the same with the action creators.
‫So they would create one actions folder
‫and then one file for each action creator.
‫So you will definitely see that
‫if you look at some older Redux code base.
‫However, this leads to a lot of jumping around
‫in the code base.
‫So jumping between different files
‫which is really not useful once you're writing your code.
‫And so this is no longer the recommended approach.
‫Instead, we are now going to organize our application
‫into features.
‫And in our case, the features are pretty obvious.
‫So we have the account and the customer, right?
‫And we will then also organize our components
‫into these same feature folders.
‫For example, here we have the balance of the account
‫and so that's gonna be part of the account,
‫so this, here is an account feature
‫and the same here for these operations on the account.
‫while creating a new customer
‫and displaying the customer name are definitely features
‫of the customer.
‫So it's a customer feature, and therefore,
‫let's now do that.
‫So this is a completely new way of organizing code
‫and we will explore this a lot deeper as we start writing
‫our next big projects.
‫So those ones we will also organize into features.
‫So instead of having like a component folder
‫we will just create,
‫as I have been saying, the features folder.
‫And then in there, we create one folder for each feature.
‫So account, and I should write it correctly.
‫So,
‫account like this, and let's do another one.
‫So customers,
‫so we should call them the plural name.
‫And so,
‫let's give ourselves a bit more space.
‫So the account operations component
‫sounds like it's part of this one right here,
‫and then we get an error.
‫So let's actually update the imports here.
‫And so,
‫yeah, so right here now inside this app.js,
‫then these path here will no longer be correct.
‫And so in case
‫that your VS code did not automatically update the import,
‫you need to do that on your own.
‫But anyway, the balance display
‫is also part of the accounts.
‫So again, the path to the file updated automatically,
‫and then create customer is here part
‫of the customer's feature
‫and the same thing for the customer.
‫All right, so all four components
‫are now in their right place
‫and the file path have been updated.
‫Okay, but now back to Redux
‫where it is now time to also create a file for each feature,
‫here in this folder, about Redux.
‫So let's call this one an account slice.
‫So a slice is basically a piece,
‫so just a part of the total state.
‫So the entire state lives in the store.
‫And so here we then basically take one slice of that state.
‫And so this one here is gonna be everything related
‫to the account,
‫and then we will also have one customer slice.
‫And so now the idea is that in each slice,
‫we co-locate as much as the Redux logic as possible
‫in one file so that we don't have to jump around
‫all the time between files,
‫which is really annoying, trust me.
‫So usually, here replace the reducer, the action creators,
‫and the initial state, and we then export those
‫and put them back together here in the store.
‫So let's do that.
‫And actually, let's first create a copy so that you can
‫basically keep this initial version for yourself.
‫All right.
‫So let's take this initial state
‫of the account, cut it,
‫and again, a bit more space.
‫And actually, this is not the one that I wanted to edit,
‫but this one.
‫Okay, now the account reducer.
‫So let's cut that as well.
‫And of course, now the application
‫will really stop working here,
‫but that's not a problem.
‫So we are basically just refactoring here.
‫And now let's also grab all the four action creators.
‫Okay.
‫And then we will get rid of all this code that we had
‫which basically simply tested all those action creators.
‫And the same with these.
‫And now everything else,
‫except this part here should be about the customer.
‫So let's place that in here
‫and let's grab the initial state reducer
‫and action creator of the customer.
‫All right.
‫Nice.
‫And so, as I said initially, now we basically
‫need to get them back here,
‫so at least the reducers.
‫So what this means is that we need to now export
‫the reducers from here.
‫And usually what we like to do is a default export
‫of the reducer function
‫like this.
‫So we export this one as a default
‫and then we also export all of these, but as named exports.
‫So basically,
‫just placing the export keywords right there.
‫All right.
‫And now all we have to do is to import this reducer
‫back into the store.
‫Now these action creators, we will now no longer import them
‫into the store because that's not where we need them.
‫So later on, we will dispatch these actions
‫inside our React components.
‫And so that's where we will then use these action creators,
‫so we will later import them in our React application.
‫Now, before we
‫place them back in the store, let's
‫also export everything from here.
‫And then,
‫well, here it's only these two.
‫So,
‫export, and then just like this,
‫we are actually finished with these two slices.
‫So we have now these two slices
‫of the state and are ready to import them back here.
‫So import
‫account reducer
‫from
‫the features folder,
‫then accounts, and account slice.
‫And then
‫the same of course, for the customer reducer
‫from features, customers, and customer slice.
‫And of course, if we had some more data domains,
‫for example, if we had some state about the employees
‫of the bank, then for that, we would create
‫another slice of the state.
‫So in that slice,
‫we would then, again, have the initial state,
‫the reducer, and the action creators.
‫And so we will then combine that one as well with these two.
‫So then we create our store again,
‫and then in the end, all we have to do is to export that.
‫So let's do, again, an export default
‫of this store, so that we can then in a next lecture,
‫finally get this store into our application.
‫All right.
‫So let's now actually go to index.js
‫where we import the store file already,
‫but now, let's actually import the store from.
‫So now, we no longer just want to run this file,
‫but we also want to get this store back.
‫All right, and so now on that store,
‫we can, just like before, dispatch some actions.
‫So let's try that,
‫.dispatch.
‫And now instead of the action creators,
‫I will just again write one manually.
‫So let's say the type is deposit
‫or I think that's account/deposit,
‫and then the payload,
‫let's do 250 and then let's console log store.getstate.
‫Give it a safe, and let's see,
‫nice.
‫So our Redux store still works
‫in exactly the same way as before,
‫but now it is really
‫in this nice modern and professional file structure.
‫So again, what we did,
‫we basically divided our store into these multiple slices.
‫And so, a slice basically corresponds to the initial state,
‫the reducer, and the action creators.
‫And notice how this file really is only functions
‫and this object.
‫So we are not even using Redux here.
‫The only file in which we're gonna use Redux is right here,
‫so that we can combine our reducers and then create a store.
‫And so then in the end,
‫we export that store so that we can then import it here.
‫And in the next lecture, we will then actually
‫inject that store basically into our React application.
‫And therefore, finally connecting the two.