Delete Unused Redux Code After Migrating to RTK Query
With our migration complete, you notice that there is A TON of Redux code we can simply delete. We no longer have to manually handle all the server interactions that our application requires to function. Redux can handle the client-side state that it was meant to handle and RTK Query can take care of fetching and caching our network data.
Not only is our code base cleaner and easier to understand but it also provides a significant boost in the user experience of our application by making features like prefetching, optimistic updates, loading and error states easier to include.
If you're running a redux application in production I suggest taking a serious look at RTK Query. After this course you should have all the tools you need to make that happen.
Instructor: [0:00] Not only has RTK Query allowed us to create a beautiful, user friendly website, it's made our code a lot simpler as well. If you go into our IDE and open up the dog slice file, you'll see that almost none of this is needed anymore. DogsLoaded, myDogs, that's already handled by RTK Query.
[0:18] All the funcs, we can get rid of those. We can get rid of literally all the extra reducers that were processing our funcs and our utilities. We've moved those somewhere else. Our file has become much cleaner, much simpler, and only focused on client side only state, which makes sense for Redux.
[0:35] If we go into the servicesSlice, for example, literally none of the stuff in the reducers is needed. ServicesReceive, servicesLoading. RTK Query does all that for us. All of the initialState is covered. The only thing we're using here is the selector, getServicesForLuckyDog, and that we can move directly into our apiSlice and just completely delete this file. I'm going to delete that here.
[1:01] We'll open up apiSlice and paste this in here, right above our utility functions. Then we just need to import createSelector from reduxjs/toolkit. With that in there and exported, we can look for any references to it and modify that from servicesSlice to our apiSlice. We can also go into our store file and remove the servicesReducer. We don't need it anymore.
[1:29] RTK Query is handling all of that network fetching and caching for us. We can also remove the entire file api.js, this initial utility that we built to make our HTTP calls. RTK Query already does that for us.
[1:44] So not only have we added prefetching and optimization, our code is cleaner. If we go into our terminal, you can see that we were able to delete around 130 lines of code. Cleaner code, simpler code, better user experience. Those are all the benefits of using RTK Query.
[2:04] I hope you're able to build something amazing and you enjoy using it as much as I do.