‫Let's continue our tradition
‫of finishing a section with a challenge.
‫And in this one I want you to build a very
‫simplified bank account like this one.
‫So this is similar to the analogy
‫that I gave you when we first talked
‫about the use Reducer hook.
‫The difference is that here
‫we don't have any account numbers
‫to just keep it really, really simple.
‫So in the beginning here,
‫we can only take one action
‫which is to open an account.
‫And so then immediately we get $500
‫or euros here into our bank account.
‫And from there on we can then take these different actions.
‫For example, we can deposit some money.
‫And so you see that now our balance went up by 150,
‫but of course if you want you can later
‫also use an input field and then deposit something else
‫which is not just 50.
‫So we can withdraw money of course
‫and we can request a loan.
‫So then our account also goes up
‫and we see that our loan here also goes up.
‫So that's the $5,000.
‫But if we click here again,
‫then that doesn't work again.
‫So there can only be one active loan at a time.
‫Then we can also pay the loan back at some point.
‫So clicking here again
‫and finally we can also close the account
‫but for that to work there can be no loan
‫and the balance needs to be at zero.
‫So if I click now, that's not going to work,
‫but if we withdraw all our money,
‫then we can close the account.
‫And so then basically it goes back to the initial state.
‫So as always, I have all of this year
‫in a starter file for you.
‫So down here I already wrote all the JSX
‫and this time I also wrote you some instructions
‫or considerations that you can follow.
‫So basically the rules that this bank account
‫here should follow.
‫All right, we also already have the initial state
‫here which you should use.
‫And so you'll see we have the balance and the loan
‫which are these two and then we have also
‫the is active state.
‫So in the beginning you see it's faults.
‫And so then all of these buttons here will be disabled.
‫So right now all the disabled here are just set to fault
‫but you'll probably then later use this is active.
‫And then here of course you will also write your own event
‫and/or functions.
‫Now, okay, so hopefully this isn't too difficult.
‫Just make sure to read these instructions here
‫and if you have any problem or any doubt,
‫then you can just move on a bit in the video
‫until you reach that part.
‫Okay?
‫So take a few minutes now to take this challenge
‫to practice the very important use Reducer hook on your own.
‫Okay, so let's get to work here.
‫And this time I will actually fork this
‫so I don't override the starter file.
‫And so hopefully you did something similar
‫to what I am going to implement here now.
‫So here we will have a Reducer function
‫and the initial state of course.
‫And so this will then return the state
‫which I will immediately destructure
‫into balance loan and is active.
‫And we will also get the dis patch function like this.
‫All right.
‫Next we need to create a Reducer,
‫which takes in the current state
‫and the action that was dispatched.
‫Here we have some problem.
‫And now let's do our typical switch here.
‫So over action type and let's already create all our cases
‫here at once so we already know which ones they are.
‫So we have open account deposit and all those other ones.
‫So open account.
‫For now, let's just return something here.
‫Then deposit, withdraw.
‫And here thanks to prior,
‫we don't have to take any care
‫of formatting this in any way.
‫So request loan.
‫Next up we have pay loan, so that's not load but loan.
‫And finally we also want the ability to close the account
‫and that's also as always
‫at a default case where we just throw a new error
‫Like this.
‫Now, okay, now let's go back here
‫to our JSX so we can use the variables that we got.
‫So here we want to display the balance and here the loan.
‫And so immediately we get our user interface
‫they're updated.
‫And now here what we want to do,
‫or first let's actually use also the is active
‫instead of these falses.
‫And actually here of course,
‫we want the buttons to be disabled
‫when the account is not active
‫except this one here actually.
‫So otherwise we couldn't open an account in the first place.
‫Okay?
‫So here what we are going to do to open the account
‫is to dispatch an event with the type of open account
‫and we need to close this guy right here.
‫And so let's see what should happen in this case.
‫Well as always,
‫we will want to return our entire state object
‫and to end the balance needs to be set
‫to 500 because that is the initial amount
‫and then is active will be set to true.
‫And so then all of these buttons here can get active.
‫And so let's see, yeah
‫nice that's already working and so let's keep going.
‫So let's implement the next two as they are pretty similar.
‫So the state and then the balance will simply
‫be the current balance plus whatever comes in in the action.
‫So action dot payload.
‫So again, the action payload is to pass in some data.
‫And so here we are going to pass in 150
‫but of course we don't want
‫that 150 hard coded right here in in our Reducer function.
‫So we need to pass that in as the action.
‫So then withdraw.
‫It's just the same but with the minus.
‫And then here, yeah, let's try that.
‫So dispatch with the type of deposit
‫enter payload of 150.
‫And as I was saying earlier,
‫you could of course also created an input field here
‫and then deposited the value that came from the input field.
‫So you could have or still can go really crazy
‫with this example here and make it a lot more complex
‫and more complete if you want.
‫So if you do that, make sure to post that
‫into the Q&A because I would be really curious to see that.
‫But anyway, as we click here now on this button
‫we each time deposit 150 into our bank account.
‫And then here, let's just copy this whole line.
‫No, actually that's not really going to work.
‫So nevermind.
‫So the type here is with draw
‫And then 50 and that works indeed.
‫So these were the easier ones.
‫Now let's take care of the harder ones.
‫But actually before we do that, we should do something else.
‫So let's actually reload this whole thing here
‫so that our balance is back to 500
‫and that our account is no longer open.
‫And then here, or actually here
‫let's set it back to faults now, right?
‫And so now if I click here
‫then we can actually already deposit something
‫in our account even though it is not even active.
‫And so we of course need to prevent
‫that also inside our Reducer function
‫we cannot rely only on the UI to block this
‫kind of thing because otherwise at a later point
‫somewhere else in our application
‫we might dispatch an action like this
‫maybe not from a button but from some effect for example.
‫And so we need to account for that case here in our Reducer.
‫So really blocking that action right here.
‫So we can say if the account is not active
‫Then just return the current state.
‫So in this case this wouldn't work.
‫So this right here then wouldn't work anymore.
‫So you see it doesn't work
‫but what also doesn't work is to open the account then.
‫And so we also then need to say if or actually end.
‫So if the account is not active
‫and the action type is different from open account
‫then simply return the state.
‫And so that's the case right now.
‫That's the case right now.
‫So when I click here, now the account is not active
‫and the type is not open account and so then nothing works.
‫But here of course the account is still not active
‫but the action type is actually open account.
‫And so then this one here will not get executed
‫and we can move on.
‫And so then our account can actually get opened.
‫All right.
‫So these are some very important things that you
‫need to keep in mind and that's also the reason
‫why it is so important to do these challenges
‫because it is impossible to cover all these things just
‫in the projects themselves.
‫So there are always some other edge cases like
‫this which can best be handled in more different situations.
‫But anyway, let's now hear dispatch some some other action.
‫So this one is to request the loan.
‫So request loan
‫and here it is for 5,000,
‫whatever, euros, dollars
‫some other currency, whatever.
‫So let's see our instruction,
‫what it says about the loan.
‫So the customer can only request if there is no loan yet.
‫And if that condition is met then it will be added
‫in the loan state and into the balance.
‫All right.
‫So that's again at a guard clause here basically saying
‫that if there is a loan already
‫so state.loan is equal then zero,
‫then do nothing
‫which means to return the current state.
‫So remember that this Reducer function always
‫needs to return some state,
‫we cannot just return nothing.
‫Let's actually see what happens if we do that.
‫So we will experiment what that does next
‫but in the other case,
‫so if there is no loan yet,
‫then the loan should be equal to the action payload.
‫And of course we first need the state itself
‫and then also the balance will be updated
‫to state.balance plus our payload here.
‫Alright, so let's try that.
‫So request alone and so beautiful
‫it was added to both of them,
‫but now if I click again
‫then here we will get null as a return.
‫And so that breaks our entire application
‫because now here basically this object
‫so the state that was returned from youth Reducer is null.
‫And so that cannot be,
‫it always needs to be some state.
‫So let's try that again.
‫Yeah, so now it works.
‫This one is of course not necessary
‫and so let's actually implement the next one
‫here right away.
‫So if the loan is paid, then it will go back to zero
‫and the balance will also go down.
‫So it will go down to state.balance,
‫balance like this.
‫And then here, do you think
‫that we need to pass in some value?
‫So having like action not payload
‫well that's not going to be necessary actually
‫because we already know what the loan was.
‫So that's at state.loan.
‫And so then that loan will simply be removed
‫from the bank account.
‫So let's dispatch that right here.
‫So this is not like a loan in the real world
‫which we pay over a period of time.
‫So it has to be paid all at once.
‫So very simplified, as I said in the beginning.
‫So pay loan.
‫Now, here we have some problem
‫and yeah, there it is.
‫Now here we can click multiple times
‫and then we actually are not preventing this function here
‫or this action from being called over and over again
‫but that will not do anything because the second
‫time we click the loan will already be zero.
‫And so then here simply zero gets subtracted
‫from the current balance.
‫So this is not going to be a problem at all.
‫The only thing that you might think is a problem is that
‫if we have here less money in the account then are alone.
‫So then we have a negative balance
‫which in theory shouldn't be allowed
‫but well in our bank it is allowed.
‫The only thing that you can do when you have
‫a negative balance is to close your account.
‫So I think that's what I say somewhere here.
‫Yeah, so then the users
‫or the customer can't close their account.
‫Okay, and so speaking of closing
‫let's implement our list action here.
‫And so this one says that the account can only be closed
‫if there is no loan and if the balance is zero.
‫And so let's do that right here.
‫So actually we don't need this.
‫We first need to check our conditions
‫and as always we will do a guard clause.
‫So one that returns to state
‫in case our conditions are not met.
‫So if the loan is greater
‫than zero and if there is a balance right now
‫so if the balance is different from zero
‫then once again just return the state.
‫But otherwise then we want to close the account
‫and so then it is no longer active.
‫So basically what we have then is the initial state.
‫So no balance, no loan,
‫and the account is not active.
‫So just to finish,
‫we need to now dis pat that action here.
‫So type close account.
‫So let's see.
‫Well that's some problem right there
‫because we shouldn't be allowed to close our account
‫with the balance that we had before in negative.
‫So let's see what we did here wrong.
‫And here it should be an
‫or so not an end of course at the same time.
‫So if there is a loan or if there is some balance
‫then we just want to do nothing.
‫So that's just returning this date.
‫And so this means that if there is no loan
‫and if the balance is zero,
‫then we can return the initial state
‫and the account is closed.
‫So let's try that again.
‫Open the account and now I cannot close it.
‫Let's withdraw a bunch of money.
‫Ah, that was too much.
‫So now I can also not close,
‫but yeah, now that works.
‫Amazing, so that actually finishes it.
‫And now as I said before
‫you can just go a bit crazy here if you want
‫with this exercise and maybe add some operations here
‫or include some input fields
‫or really to anything that you want.
‫You can also use an account number
‫like we did in that analogy.
‫And if you do any of that,
‫then just make sure to show it to me
‫so I can see your progress in the Q&A.
‫And also if you want more use Reducer challenges like this
‫because maybe you still find it a little bit difficult
‫then also let me know in the Q&A section.
‫And with that being said,
‫let's now move on right to our next section
‫where we are going to use
‫for the first time an external library
‫and that is React Router,
‫so that we can build our very first
‫real single page application.