Creating Basket Slice
In this lesson, we're going to create a basket slice
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:14] Now that we have introduced Redux toolkit and also implemented it with a test log in slice, I think we are ready to refactor our application to use Redux toolkit. We can now create our basket slice inside the slice folder.
[00:15 - 00:45] Let me get rid of everything and inside slice, let me create a new file and I will call it basket slice.ts. We will start with the basket state, so again interface, basket state, here we will have basket which will be of type basket or maybe null.
[00:46 - 01:42] Next step is to create the initial state, so let me create a const initial state is equal to this object and our initial state will be of type basket state and the initial value of our basket will be null. We are now ready to create the basket slice, export const basket slice which will be equal to the create slice method, create slice and this time the name will be basket, we will pass the initial state and our reducer.
[01:43 - 02:18] Our first action creator is the set basket, so let me write set basket and here I will mention the state and the action and it will simply return state.pasket is equal to action.piloot. Next action is the remove item, so after this I will create remove item and again will pass the state and the action.
[02:19 - 03:09] As you know our remove item action will accept course ID as a parameter, so we can destructure it course ID and let's call it action.piloot. Now we will calculate the item index using the find index method and we will use the method on state.pasket.items, so let me create a new const and let's call it item index and I will use it on state.pasket.items.find index and we'll check if the item and item.course ID is equal to the course ID provided as a parameter.
[03:10 - 03:38] Now if it is undefined or minus one we can simply return, so if item index is equal to undefined or item index is equal to minus one, don't do anything just return. Otherwise we can splice the basket items using item index and one.
[03:39 - 04:01] So what we'll do is state.pasket.items. splice and we will start splicing from the item index and since we want to remove only one so we'll pass one. Finally I can export set basket and remove item from the basket slice.actions.
[04:02 - 04:17] So in the bottom export const set basket and remove item from basket slice. actions.
[04:18 - 04:32] And we're not returning the basket state explicitly because we don't have to. We can simply use use select a method and get a slice of state that we need and we can provide the basket slice reducer to our configure store as well.
[04:33 - 04:45] So let's go there and here we can write basket and basket slice dot reducer. Our basket slice is now ready.
[04:46 - 04:51] We can refactor our application to use Redux instead of using context API in the next lesson.