This video is available to students only

Refactoring App to Use Redux Toolkit

In this lesson, we're going to make our application use redux toolkit

Refactoring app to use Redux toolkit#

Our basketSlice is now ready, but everywhere, we're still implementing the ContextApi. Let's make our application use the Redux toolkit now. We can start with the App.tsx file, where we're calling the basketApi. We start by calling the dispatch from useAppDispatch. We don't need setBasket from the context, so let's get rid of it. Instead, we will use dispatch, and inside, we will use setBasket which will be imported from basketSlice. Honestly, that's simply it for this file. We need to go to the files which are still implementing the storeContext.

client/src/App.tsx

Let's start with ShowCourses component. We'd start by getting rid of the setBasket and basket import from useStoreContext. Instead, let's call the basket from useAppSelector. We will extract it from state.basket. We will also need dispatch from useAppDispatch. Now, inside addToCart function, we can replace setBasket with dispatch and pass setBasket from the basketSlice. That's it for this component.

client/src/components/ShowCourses.tsx

Start a new discussion. All notification go to the author.