‫Moving on, let's now create some more action creators
‫and a reducer about the customer state.
‫And this time let's actually start with the initial state
‫and with the action creators so that we actually
‫know what we later have to write in our reducer.
‫So let's come up here and do that, close.
‫So let's call this one, initial state customer.
‫And then let's also rename this one
‫to initial state account.
‫And of course then the same thing right here.
‫All right,
‫so our customer should have a full name, which starts mt,
‫a national ID number, also starting empty of course
‫and a created at property also starting empty.
‫Alright, and then let's create our action creators.
‫And later on we will of course separate this all
‫into different files because it's already getting a bit
‫out of hand, but nevermind for now.
‫So the first action creator, let's call it create customer.
‫And for this we will probably have to pass
‫in the customer's full name and the national id.
‫So the time of creation, we don't need to pass in
‫because we can simply create that logic in here.
‫So as we built the action, so as always,
‫let's return the action.
‫And here the type, again, let's start with the domain.
‫So earlier we had account slash something.
‫And so now let's do customer slash and for the sake
‫of convention, let's actually name this event here.
‫Exactly the same thing as the action creator function.
‫So basically here I will now place exactly the
‫same thing as here.
‫So this is also what we did here.
‫So the deposit function creates the account
‫slash deposit withdraw.
‫And here the same thing.
‫Okay? And now here the payload will again
‫be a bit more complex.
‫So we will pass in the full name,
‫the national id
‫which we both received here
‫and then also let's pass in the created ad.
‫Now, we could also do this inside the reducer
‫so computing the current date
‫but that would actually be a side effect.
‫And so we shouldn't have side effects
‫in the reducer function.
‫And so let's do that here.
‫Now usually we should in fact keep as much
‫business logic as possible inside the reducer.
‫But again, since this is actually a side effect,
‫this does not belong in the reducer.
‫Okay, so here we simply return the current date
‫nicely formatted.
‫And that's actually it.
‫So let's create another one for updating the name.
‫So update name.
‫And so here it's again passed in the full name.
‫And then return the type of
‫account slash update name.
‫And here the payload only some payload
‫all it needs is the full name.
‫Alright? And so now we know the two events that
‫can happen and the shape of the data.
‫And so based on that
‫we can now easily create our reducer function.
‫So first of all let's rename this one here
‫to account reducer.
‫And then of course we need to update that here.
‫And yeah, so down here let's then create
‫the customer reducer.
‫So again, this takes in the state and as a default
‫we want the initial state customer
‫and then also the dispatched action.
‫So here's switching over the type as always.
‫So customer and then it was I believe create customer.
‫And here we need that colon at the end.
‫And so here, let's return the current state
‫and then let's update everything.
‫So the full name will become the action.payload.full name.
‫The national ID will become also action.payload.nationalID.
‫And the same thing for created at
‫all, right?
‫And here we are again, destructuring, the current state
‫even though we are then overriding all the three
‫properties that are in there.
‫So the reason for that is again, that this way
‫we will not run into any problem if for example
‫later we add another property
‫like a status or something like that.
‫Alright, let's add our default as well
‫which will be to just return the state.
‫And then we also have customer slash update name.
‫And so here, the only thing that's gonna change is
‫that the full name will become action dot payload.
‫All right?
‫And now we need to use this reducer somehow.
‫So we also need to place debt reducer inside or store.
‫So remember how we learned earlier that
‫in Redux we don't dispatch actions directly to the reducer
‫but really to the store.
‫So that's exactly what we did right here.
‫So store dot dispatch.
‫And that's going to stay the same now as we have
‫a new reducer and basically some more state.
‫Now we cannot simply pass that other reducer in here
‫but instead what we need to do is to combine
‫all the reducers that we have in order to create
‫one so-called root reducer.
‫Because this reducer that creates store he
‫receives is always considered the root reducer.
‫So right now, that's just this one.
‫But again, usually what we always do is to combine
‫all the reducers that we have.
‫So let's say that our root reducer is,
‫so now we need to take in another function from Redux.
‫So this one right here, make sure it is imported.
‫And then here we specify an object, and then
‫we need to give each of the reducers a meaningful name.
‫So the one that makes sense for the account is just account.
‫And so for this one, we specify account reducer
‫and then let's say for the customer,
‫we of course use the customer reducer.
‫And then here we use that root reducer
‫and watch what's gonna happen then here in the output.
‫So see that, we see that now we have
‫both the account and the customer in our state.
‫And so these are the names that we gave right here.
‫So if we call them A and B
‫then that is the state that would appear here.
‫So basically that's the name of our state really.
‫So then if we open this up
‫inside the account is exactly the data that we had before.
‫And in the customer is still our initial state
‫because we didn't dispatch any actions yet.
‫So let's do that and actually use these two action creators
‫that we created in the beginning.
‫So store dispatch,
‫and then using our action creator, create customer.
‫And so here, let's pass in the full name.
‫You of course should use your own one.
‫So first of all, name and then the national id.
‫And here let's say it's some combinations of numbers
‫like this.
‫And then let's see what we have.
‫So let's see if this actually works.
‫So store dot.getState, and yeah
‫then it was created here at this moment in time.
‫And of course I could also use this one
‫but there's also no need to.
‫And of course all the other ones are still working.
‫So I can still, for example
‫call our deposit function and deposit 250 in there.
‫And let's do that here then.
‫So then previously my balance was 300
‫and then that got increased.
‫And so Redux is smart enough to know that, for example
‫this action right here belongs to the customer reducer
‫while these other ones
‫this one for example, belongs to the account.
‫Alright? And that has nothing to do
‫with the fact that we specified those here in the strings.
‫So this is really just a convention that we followed
‫but we could give it any name that we wanted.
‫So Redux is really not looking at these strings
‫that's only for us developers
‫so that we understand what we're actually doing.
‫But React only uses this information that we give it here.
‫And so then internally it figures out that, for example
‫this type here is for the account
‫and these other ones are for the customers.
‫Now, of course, all of this doesn't make a lot of,
‫let's say, real world sense.
‫So customers and accounts should of course
‫somehow be connected, for example
‫by some account number or so.
‫But that doesn't really matter here because here
‫we only want to really understand how Redux works.
‫And I think that we are doing a pretty good job
‫with that so far.
‫Now, next up, it's then time to finally organize this mess
‫that we have here
‫into a bit of a more professional structure.