Pass RTK Query Data into Redux Selectors
Passing data into selectors is a really easy way to handle the migration from plain redux to RTK Query. Even though the data does exist in redux, it's not exactly obvious how to bring it out in a selector.
If you do want to avoid passing in the data to your selector, you can also do this to get that value.
api.endpoints.getServices.select()(state)
In a later lesson I'll show you how to use this approach with a memoized selector, which will usually be slightly more performant.
There are some advanced docs about selectors here: https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#selecting-values-from-results
Jamund Ferguson: [0:00] In the services page, when we brought in RTK Query, we commented out the getServicesForLuckyDog selector. You can see that right here. If we click into that function, you can see it was relying on state from within Redux for pulling in the services.
[0:14] We're going to change that now to take in services as an argument. We'll take in services as the second parameter and anywhere that was previously relying on state.services.services, we'll just have it return services directly.
[0:26] We needed to change those two places back in here. We'll need to make sure we reimport getServicesForLuckyDog from our services slice. We can begin using that selector again after making one additional change.
[0:41] We now pass in state and the services that we get back from our query. Save that. Let's go back to our app. You can see that all the services are showing up here.
[0:51] To get the filtering to work, we need to go ahead and add a dog. The easiest way to test this is to add a dog whose birthday was within the last year. We'll call this one Young. He'll weigh one pound.
[1:02] If we go here and select them as our lucky dog, it says they shouldn't qualify for any services. We can add another dog called Big. It'll be a 150-pound golden retriever born in 2013. If we go back to services, we select Big.
[1:20] You can see they're eligible for four of five services. Our filtering is working again. We did that by passing the services value we got from RTK query into our selector instead of pulling that value out of Redux.