‫Let's now convert the account state slice
‫into Redux Toolkit.
‫So let's close the customer slice
‫and actually open up the account slice.
‫Now remember how we had already organized all our code here
‫into this concept of slices.
‫So we have the initial state, we have the reducer
‫and we also have the action creators
‫down there in this file.
‫And so now with Redux Toolkit, this idea of slices actually
‫really got baked into Redux itself.
‫So we now have this function called createSlice
‫which we can import from Redux Toolkit.
‫So let's do that.
‫So import, createSlice, just like this.
‫And so this create slice function here gives us
‫three big benefits.
‫First of all, it'll automatically create action creators
‫from our reducers.
‫Second, it makes writing these reducers a lot easier
‫because we no longer need that switch statement
‫and also the default case is automatically handled.
‫And third, we can actually mutate now,
‫our state inside reducers.
‫So just as we have learned about previously
‫when we first talked about Redux Toolkit.
‫Now remember how behind the scenes this will then use
‫a library called Immer which will actually convert our logic
‫back to immutable logic.
‫So behind the scenes, Redux still requires
‫this kind of logic right here
‫where we do not mute data state,
‫but we will now be able to convert this kind of logic here
‫to a mutating logic.
‫And from my experience, this last point is actually
‫the biggest advantage of using Redux Toolkit over
‫what we have been doing before.
‫About these other points, I believe that React Toolkit
‫actually forces us into a pattern that's a bit too
‫opinionated in my opinion, but well,
‫that's just the recommended way of using
‫and learning Redux right now.
‫And so as I said in the beginning
‫let's now convert all of this.
‫Now actually let's call this here again, just initial state.
‫Okay.
‫So this object we will actually keep, but the rest,
‫let's now comment it out.
‫And now here we get these errors, but that's no problem.
‫Let's actually make this bigger now and then split
‫the window so that we can see our old reducer here
‫while we are working on the new ones.
‫So this is pretty helpful for converting.
‫Now in the future, you will then of course,
‫if you choose to use Redux Toolkit,
‫write this without converting.
‫So you will not first write it this way
‫and then converting it to Redux Toolkit.
‫So you will just do what we do right now.
‫And so that is to call or createSlice function
‫which then accepts, again, an object of options.
‫And so this will then in the end, return a slice,
‫which we can call in this case the accountSlice.
‫So what do we need to pass in here?
‫Well, first of all, the name of the slice, which is account.
‫Then next up, the initial state.
‫So it's a property called initialState
‫where we then need to pass an initial state.
‫And so since in our case, this has the same name,
‫that's the same as writing this.
‫And then finally we need to pass in our reducers.
‫So this time, we will have basically multiple reducers.
‫One reducer for each of these actions here.
‫Okay? And so let's start writing on those.
‫So the first one is called deposit, and it is a function
‫that again, receives the current state and the action.
‫And notice how this deposit is basically the second part
‫of the string that we had right here.
‫So the name is account and then /deposit, which is this one.
‫So this deposit is also exactly the name
‫of the action creator that we had here before, right?
‫But anyway, let's now write our logic here.
‫And for now, we will do it without the asynchronous data.
‫So without the thunk that we had before.
‫So what do we then do in the deposit?
‫Well, all we do is to change the state.
‫And so now, remember, we can write mutating logic.
‫So we can do state.balance should become state.balance
‫plus the action.payload.
‫So the logic of receiving the current state
‫and the action that was dispatched is still
‫exactly the same way as in classic Redux.
‫All right.
‫So the only difference is that here,
‫we do no longer return the entire state now,
‫and also we don't write it like this.
‫So we don't create a new object where we then
‫set the balanced property.
‫Instead, we basically mutate the balanced property
‫that lives on the state.
‫And that's actually it for now, because remember,
‫we will leave that here for later, for the next lecture.
‫So let's keep going.
‫Withdraw, again, state and then the action.
‫And now here we will have something very similar.
‫So state.balance, and we could even write it like this.
‫So this is the same as state.balance minus action.payload.
‫Lets do the same here.
‫So plus equal like this.
‫Next up, let's do the loan state and action.
‫And not withdraw, but request loan.
‫So let's see what logic we had here.
‫So that's why I'm keeping this file open on the right side.
‫And so here, we need again to check
‫whether the loan already exists.
‫So if state.loan is equal zero,
‫then we don't want to do anything.
‫Now, in this case, not doing anything
‫is not returning the state
‫but instead simply returning from this function.
‫So we will not return anything, because remember,
‫in these new reducers, we no longer need to return
‫the entire state.
‫So we just modify what we want.
‫And so in this case, we don't want to modify anything.
‫So this is indeed a huge shift.
‫And if you were already used to writing it this way,
‫because you practice the use reducer hook,
‫then this is gonna be an even bigger shift.
‫But for total beginners, I believe that this
‫is actually a lot easier.
‫And this will become even more apparent
‫When we have, like, nested objects and arrays.
‫But in the other case, so in case that there is no loan yet,
‫then we can set the loan or actually state.loan
‫to action.payload.amount.
‫So just like before.
‫And let's actually copy what we have here.
‫There's no need of typing it all again.
‫So here it is actually an equal
‫because remember, we are now assigning.
‫So we are really overriding.
‫So here, we need then state dot, and the same thing here.
‫And we can have no commas, 'cause this is not an object.
‫And the same here.
‫And finally, let's add our last one.
‫So payLoan.
‫Again, state and action.
‫Then state.loan will become zero.
‫The state.loanPurpose will become empty
‫and the state balance will become,
‫and let's actually do minus equal again.
‫So basically, subtracting the state.loan from state.balance.
‫So this is of course just a normal JavaScript feature
‫that you already know.
‫All right, and now let's see what we actually have here.
‫So what the result of creating the slice is.
‫Because this is actually already it.
‫So this basically functions as our reducer
‫and as our action creators.
‫So let's now lock this to the console.
‫So accountSlice.
‫Then let's close this
‫and let's make this a bit smaller again.
‫So coming here to our console, let's reload.
‫And then, even though we have those errors here,
‫since we are importing this file,
‫then this code here is executed.
‫So let's see what we got here.
‫So we have first of all, our reducer here.
‫So which is this function that we will have to export
‫from here and then import in the store.
‫So this is basically our new reducer that the store needs.
‫And then here we have this other stuff
‫that we don't really need, but then notice
‫how we have these actions.
‫And so, these actions are exactly the four action creators
‫that we also had before.
‫So it's these four ones that we created here.
‫And so let's now export all of this stuff that we need.
‫So export.
‫And here, let's again use export default for the reducer.
‫So just like we had previously here
‫only that this time it is accountSlice.reducer.
‫And now it can also export these four functions here.
‫So once again, just like before.
‫So these are going to be our named exports.
‫And first of all, we need to take them out of that object.
‫So let's write accountSlice.actions
‫which is then this object of these four right here.
‫And so here we can destructure that
‫and then immediately export them.
‫So deposit, withdraw, requestLoan and payLoan.
‫Give it a save.
‫And it seems like we are back to working here.
‫Let's just reload once again.
‫This has something to do with the dev tools
‫which keeps happening, but just reloading it a few times,
‫usually fixes that.
‫Well, not this time apparently.
‫So let me close this and restart.
‫And there we go.
‫So that's a bit annoying, but sometimes that happens.
‫All right, so this part here about the customer
‫is still using the old Redux logic
‫but this here is already the new one.
‫Now actually, we need to temporarily also update our code
‫in these account operations, because now we don't want
‫to pass in the currency,
‫at least not while we are testing it.
‫So let's duplicate this and just remove the currency
‫from here just to test this for now.
‫So let's deposit and yeah, that works.
‫Nice.
‫Withdrawing should work as well.
‫There we go.
‫Let's request a loan.
‫And there, we have a problem.
‫So let's use our Redux dev tools.
‫So why not?
‫Well, this is a bit too small now, apparently.
‫Let's make these dev tools smaller again.
‫And so let's see what we have here
‫in our requestLoan action.
‫And by the way, notice here how the action names
‫are exactly the same ones as before.
‫So basically what this means
‫is that our creatSlice function combines this name
‫with the names of the reducers.
‫And so that's also why here we used this convention first.
‫So this is again, the modern way of writing action names.
‫And so Redux Toolkit follows exactly that as well.
‫So it composes these action names with the name
‫and with each of the reducer names as well.
‫But anyway, let's see why we get that problem here.
‫And here it is.
‫So again, we are now using the dev tools really
‫to understand some problems.
‫And so notice how the payload is now only 10,000
‫which was the requestedLoan
‫but the loanPurpose is nowhere to be found.
‫And so that's why requesting this loan didn't work.
‫And so let's now inspect this a little bit further.
‫And so what I want to to do now
‫is to log to the console now,
‫calling the requestLoan function
‫and then with the same values or something similar.
‫And so this is now simply an action creator.
‫All this will do is to return an action object.
‫Right.
‫And indeed, here it is.
‫And also indeed, we see that we only get
‫the first value here, but not the second one.
‫And the reason for this is that by default,
‫these automatically created action creators
‫only accept one single argument.
‫And so that then becomes action.payload.
‫That's why earlier we also got this not a number here,
‫'cause we were then trying to add this payload amount
‫to the loan, which didn't exist.
‫So the amount and the purpose were actually not received.
‫All right.
‫And so this is basically one of the limitations
‫of having this opinionated structure.
‫So if these action creators are automatically created,
‫then we cannot really configure them.
‫So we cannot easily make them receive two arguments.
‫However, luckily for us, there is a solution
‫for this that Redux Toolkit implemented for us.
‫So basically, what we have to do is to prepare
‫the data before it reaches the reducer.
‫And so what we have to do now here is to separate this.
‫So here, we now need a new object.
‫So let's open that there and then close that right here.
‫And then we need to call this function here,
‫just the reducer and then before that,
‫we need to prepare that data with a prepare method.
‫And so this method is where we can then accept
‫the data that we want.
‫So basically this can have the parameters
‫that earlier we had in our action creator.
‫So that's the amount and the purpose.
‫All right.
‫Now here we need a comma, I guess.
‫And yeah.
‫And so what we need to do here now is to return a new object
‫which will then become the payload object in the reducer.
‫So that's why this is called prepare.
‫So let me just write a code and then it will make sense.
‫So again, here we return a new payload basically.
‫And so this payload should become an object
‫with amount and purpose.
‫And so it is this object that we return from here,
‫which again, will then be the payload in the reducer.
‫All right.
‫And so this is what we need to do
‫if we want our creator to receive
‫more than just one argument.
‫Now, of course, we could also have configured it
‫in a way that we directly pass in that object.
‫Well, not here.
‫But here.
‫So again, we could have made it in a way
‫that we the data as an object right here, immediately.
‫And so then we would also have only one argument.
‫But if you do want these two arguments,
‫then this is the way to go.
‫And since I wanted to show you this,
‫we just did it this way and also this way,
‫we then didn't have to change anything
‫in our code right here.
‫So otherwise, then we would have to come back
‫to our React code and change that here.
‫And of course, these preparation can also include
‫some other steps.
‫So for example, later on in that other slice,
‫we will then also add the created add property
‫where we set the date.
‫So also what we did earlier in the action creator.
‫But anyway, this should now be back to working.
‫So let's check that.
‫And there we go.
‫And then paying it works just the same way.
‫Or actually, it doesn't.
‫Let's see.
‫So now we get 3000.
‫And so after paying, ah, it should go back.
‫So what's wrong here?
‫Ah, and I can see the problem already.
‫So here, we run into one of the pitfalls that comes
‫with the fact that we are now mutating our state.
‫So it has advantages, but it also has its problems.
‫So notice, how here in the very beginning
‫we set alone to zero.
‫And so then, here in this next line of code,
‫this is already zero.
‫And so then we simply subtract zero from the balance
‫which will not change it.
‫And so this now needs to come first.
‫So we now need to pay attention to the order of the code.
‫So let's try that again.
‫All right, now pay it back and beautiful.
‫Now that works.
‫And so we successfully converted now,
‫the slice that we had before to this one that fits
‫with the new philosophy of Redux Toolkit.
‫Now, if you want my personal opinion
‫I do actually prefer in a simple situation like this,
‫to write what we had earlier.
‫So I like this one more.
‫I think it's a bit more clear what's actually happening.
‫And it's not like a bit of black magic
‫as it seems like here, but that's just what happens
‫when you trade your do whatever you want approach
‫for an opinionated approach like Redux Toolkit.
‫All right.
‫What I do like a lot is of course
‫this way that we now configure the store.
‫So this is perfect and it's a lot easier.
‫But as you saw, we can if we want,
‫keep our slices in the way that we had them before.
‫So without using Redux Toolkit.
‫But there's also advantages to writing it like this.
‫And so as always, you need to decide for yourself
‫and on a case-to-case basis.
‫And with that being said,
‫let's now move on to the next lecture
‫and also implement the thunk.