Refactoring App to Use Redux Toolkit
In this lesson, we're going to make our application use redux toolkit
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:09] Our basket slice is now ready, but everywhere we are still implementing the context API. Let's make our application use the Redux toolkit now.
[00:10 - 00:20] Let's start with the app.tasix file. Let's start by calling the dispatch from use app dispatch.
[00:21 - 00:36] So here let me create dispatch which will be equal to use app dispatch from our configure store. And we don't need set basket from our use store context.
[00:37 - 00:47] So let's get rid of this. Here we will use dispatch and inside we will use set basket from our basket slice.
[00:48 - 01:04] So here let's use dispatch and inside we can pass set basket, but this will be imported from our basket slice. Also as a dependency we don't need set basket but dispatch.
[01:05 - 01:14] Also let's get rid of use store context because we are not using it and we see no warnings. And honestly that's simply it for this file.
[01:15 - 01:21] We need to go to the files which are still implementing the store context. And now let's go to the show courses component.
[01:22 - 01:32] So show courses. Let's start by getting rid of the set basket and basket import from use store context.
[01:33 - 01:41] Let's get rid of the use store context here. And instead let's call the basket from our use app selector.
[01:42 - 01:58] So here I will create basket and will import from use app selector. Here I will get state and will retrieve it from state basket.
[01:59 - 02:10] We will also need dispatch from use app dispatch. So let me create a new variable dispatch and will import it from use app dispatch.
[02:11 - 02:31] And now where we are making the API call here, let's get rid of this and use dispatch and inside let's pass our set basket and we will import it from the basket slice and warnings. And that's it for this component as well.
[02:32 - 02:46] Let's go to the navigation component and get rid of this basket. And what we can do is rather than this, let me get rid of use store context.
[02:47 - 03:01] And here I can use use app selector and inside will be the state which will extract state dot basket. And that's it for this component.
[03:02 - 03:11] It's time for the description page now. So I think I can copy this because this is very handy and go to the description page.
[03:12 - 03:21] Let's start with removing use store context and pasting our basket. Let's get rid of the use store context as well.
[03:22 - 03:36] And let's import use app selector using configure store. And also we need dispatch from use app dispatch.
[03:37 - 03:52] And rather than using this, we can use dispatch and pass set basket and let's import set basket from basket slice. And this page is refactored as well.
[03:53 - 04:03] Finally, let's go to the basket page. Let me get rid of everything and go to the basket page.
[04:04 - 04:27] And again, let's remove use store context imports from here as well. And I will import basket from use app selector and state which goes to state dot basket.
[04:28 - 04:40] And also I need dispatch. So here I can create a variable dispatch and we'll use use app dispatch for it.
[04:41 - 04:51] And rather than using remove item, I can use dispatch and pass the remove item function. And this should be inside an object.
[04:52 - 05:02] So I'll pass the object and let's import remove item from the basket slice. Well, I got to know that we can provide unique key to the table.
[05:03 - 05:16] I'm talking about this table. So we can provide it a unique key by using row key and it can be the unique value in every row which is course ID in our case.
[05:17 - 05:25] So we can provide it here. And since we don't need the key property inside our data, we can get rid of the new data function.
[05:26 - 05:33] So let's get rid of this. Also we don't need use effect and use state.
[05:34 - 05:49] Let's remove use effect and let's remove use state as well. Let's remove basket.
[05:50 - 06:00] We can simply iterate over the basket. And rather than it being items dot items, we can make it basket dot items.
[06:01 - 06:08] And let's see where we are getting the warning. So we can get rid of the use effect and use stay took.
[06:09 - 06:14] Now this makes our code so much cleaner. Our basket page looks so much better now.
[06:15 - 06:23] Well with this, we have refactored our application. Now we can go to the browser and check if everything's working as expected.
[06:24 - 06:32] Let's go to the home page and let's delete it. We see it getting removed.
[06:33 - 06:44] Let's go to the home page and try adding something and we see added. Now we can go to the description page and try to add it and we see we can add it.
[06:45 - 06:55] And yeah, everything's working as before, but with the help of Redux toolkit. Also we don't see any warnings inside the browser, which is fine as well.