Review a Redux App that will be Converted to RTK Query

Jamund Ferguson: [0:00] Here we have a website for a fictional dog grooming service. It is pretty basic. For example, it doesn't have any authentication or checkout capabilities, but here's what it does let you do.

[0:10] It shows a list of services, for example, fur trim or toothbrush, and then it allows you to customize that list based on your particular dogs. For example, Lucy is able to see four or five services, Gordo is able to see four or five, but Frankfurt isn't eligible for any of the services, because he's too young.

[0:31] You can see and edit a list of your own dogs, deleting or adding to the list if you'd like, and there's a form that allows you to make contact if you have any questions.

[0:41] Hopefully, you can start to see where this is going. Some of the data like your dog profiles and our services are backed up on the server, but the dog itself that need services, what we're calling, the Lucky Dog, well that's only stored on the client in Redux.

[0:55] If we select the Lucky Dog here, we want that to continue to persist over on the Services page. Let's go through the code as it is now to show you how this works.

[1:04] The code for this application can be found in the GitHub repo associated with the course. There should be a link below. If you scroll down, you'll see instructions for getting set up. Of course, at the top, you can see the code here. I'm going to show you a couple of important files. The first is api.js. This is where I actually make all the fetch calls needed to power this website.

[1:25] You'll see there aren't really that many at this time. They don't do very much, but this is a common pattern that a lot of sites have of putting all their API stuff in a single file. I think it will provide some nice consistency as we migrate to RTK Query. Let's check out some of the pages that we have.

[1:40] If we go into Source/Pages/Services, you can see the Services page. This is probably our most complex page. It relies on a whole bunch of selectors pulling data out of Redux. It has a large use effect hook that downloads data from both dogs and for the services, and dispatches that data into Redux. Then it has loading and other states as it decides what data it needs to show.

[2:09] We also have our Dogs page, which pulls information about dogs and displays them when they're ready. It also allows you to add and delete dogs. All that stuff is handled here with forms. You can see Redux sprinkled all throughout this. All that stuff is going to get updated in various ways as we start adopting RTK Query.

[2:29] Another page to point out is our Contact page. This one has a form which doesn't currently go through Redux. We just directly call it api.makecontact right there in our handleSubmit function.

[2:41] Another critical component you want to look at, of course, is our slices. First, let's go into our dogSlice. This is where we keep all of our Redux logic. You see here, we have a number of async thunks that we're creating to handle updates to our dogs.

[2:57] Then, down in our dogSlice, we've got all the logic for choosing our Lucky Dog, as well as some extra logic that we do here to calculate the size and age of a dog when new dog information comes through from the server. A lot of interesting stuff here. You'll see how we convert that all to RTK Query later in the course.

[3:18] Let's go to the servicesSlice next. On our Services page, we have our initial state. Then, we set up a few reducer functions for services loading and services-receive state. Remember, on the services component, we actually dispatch these manually instead of using a thunk.

[3:33] Then, down below, we have a selector that we've created that allows us to get the services for our particularly chosen Lucky Dog. These references state both from the services reducer, as well as from the Dogs reducer. It's all kinds of complicated. We'll dive into how we convert that to use RTK Query later in the course.

[3:52] That's it for our sample app. I look forward to showing you what we can do as we migrated over to RTK Query.