‫Okay, so the last thing that we need to do is
‫to also convert our customer slides to Redux Toolkit.
‫And actually I want to leave this for you as a challenge.
‫So if you'd like, you can pause the video now
‫and based on what we did earlier with the account slides,
‫you can convert this code that we have here
‫also into the Redux Toolkit way of doing things.
‫So pause the video now
‫and once you're done I will do the same.
‫So just to see if we are doing it in the same way.
‫Now just before pausing, notice that here,
‫this Create customer right now needs these two arguments.
‫So it receives the full name and the national ID
‫which means that you will again need to prepare
‫the payload just like we did in this one reducer right here.
‫You also have to prepare the payload for the reducer
‫and so here you'll have to do the same thing.
‫So take a minute now and then I meet you back here.
‫All right, so let me now show you how it is done.
‫So changing again the initial state name
‫and then let's get rid of this.
‫And then of course React is gonna complain, but nevermind,
‫we will fix it soon.
‫So let's import createSlice.
‫And so this is gonna be the customer slice,
‫which is the result of createSlice.
‫Okay, so the name here is customer.
‫Then we need the initial state
‫and then we have our reducers.
‫So the first one is, again, create customer,
‫which is what we have here
‫and so for this one we need to again prepare the data.
‫So preparing the payload
‫and so here we need to not create a function
‫or a method, but instead this object.
‫And so in this object is where we will then place
‫the methods.
‫So first prepare.
‫And so it is this prepare method which will actually
‫receive the data that we pass into the action creator.
‫Remember that, and so this is the one that receives
‫the full name and the national ID.
‫Now, by the way, so writing the method like this
‫is exactly the same thing as writing this.
‫So this is just a simplified way of writing methods
‫in modern JavaScript.
‫Now write and so remember that here we need to return
‫the payload now.
‫And so that payload is made out of the full name,
‫the national ID
‫and then remember also the created at property,
‫which we set to new date and then to this ISO string.
‫Now right and so this is again the kind of
‫small side effect that you should not do inside the reducer
‫but instead right here in this prepare function.
‫So in case you wanted to add this created ad here
‫or maybe you also want it like for example to compute
‫a random ID, then you should not do that in the reducer.
‫But instead then you should also create
‫a prepare method like this.
‫So even if this only takes for example, one input,
‫then you still would have to do this prepare function
‫if you wanted to create a date or assign a random ID
‫or something like that.
‫All right but anyway, now we can write our reducer
‫which gets the state
‫and then that payload that we just created here.
‫So exactly this object.
‫So this is what our reducer will now receive
‫and so now we can do what we did before,
‫which is to then set all these properties.
‫So the full name will become action.payload.fullName.
‫State.nationalID will become action.payload.nationalid
‫and then the same thing for createdAt
‫action.payload.createdAt.
‫Now here we do not receive the payload of course,
‫but the action, so I said it wrong earlier
‫but maybe you caught that.
‫So maybe you remembered that the reducer indeed
‫gets access to the state and the action
‫but it is the payload that is on the action
‫that is going to be equal to this.
‫Okay, so that is one of the reducers
‫and the other one is for updating the name.
‫So update name.
‫And here it's an easier one
‫because we don't have to prepare the data.
‫So all that's gonna happen is that state.fullname
‫will become action.payload.
‫And so now all we have to do is to export all of this.
‫So create customer and update name.
‫We will take from the customerslice.actions.
‫So this again will create the action creators,
‫which we then destructure and export.
‫And finally we export default, the customer.slicereducer.
‫And with this, our application should be back to working.
‫Now here it says that this is undefined
‫and indeed it should be actions.
‫Nice, so now that works and let's see.
‫Beautiful and we can see again in our dev tools very nicely
‫that indeed the correct action has been created.
‫And so then we should
‫also be able to dispatch manually again.
‫So update name and the payload should be test.
‫And so that should work just like before and beautiful.
‫Okay, and this is it for the Small application.
‫So hopefully you had some fun learning Redux.
‫So I really liked this section actually.
‫So I think it was a lot of fun working through this code.
‫Really starting from the very beginning.
‫So especially here with these initial stores,
‫before Redux Toolkit, and then really seeing
‫how all the pieces fit together in the end.
‫So hopefully all of that made sense and clicked for you
‫so that now you feel confident in using Redux if you want to
‫or if you have to.
‫Now I just saw one final thing,
‫which is the title here that we haven't changed yet.
‫So let's just copy this and also place it in the title
‫of the index.HTML file because that will give us a bit
‫of a surprising result.
‫Which is that then in the Redux dev tools,
‫we get the title right here.
‫So this is helpful if we have multiple tabs open
‫and when all of them use Redux,
‫we can simply switch between them right here.
‫So this dev tools here is basically the same tool
‫for all of the pages or all the tabs
‫that are currently open.
‫But anyway, with this, we really now finished this section
‫and all we have to do is to now compare Redux
‫with the context API
‫that we have already learned before earlier.
‫So those are two things that people like to compare a lot
‫and so that's why the next video, we will do that together.