Using Selectors in Entity Adapters
In this lesson, we're going to use selectors provided by Entity Adapters
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:12] Now you know how Create Entity Adapter normalizes the data and how it's getting stored inside Redux. We have seen a few methods like Set1, SetMany, Upsert1, etc.
[00:13 - 00:28] It also gives us Selectors to extract data from inside. So if you click on using Selectors with Course Entity Adapter, it has methods select by ID, select by IDs, select all, select entities and select total.
[00:29 - 00:35] It's an efficient way to query a big chunk of data inside our state. Let's implement it in our code to take advantage of it.
[00:36 - 00:51] Inside the course slice, let's export a new const and this will be courses selector. This will be equal to coursesadapter.getSelectors.
[00:52 - 01:17] Let me write state and extract state.course and our state should be of type root state. So let me write root state and we will wrap it with parentheses and I will import root state and that's it.
[01:18 - 01:24] Now we will use the course selectors to use the selector method provided by Redux toolkit. Let's see how to utilize them.
[01:25 - 01:44] Let's go to our home page and currently we have a local state which is taking care of storing the courses. We can remove this and create a new variable and let's call it courses and use our use app selector hook.
[01:45 - 02:03] So let me write use app selector. Inside we can pass course selectors that we have created and if we click on dot we will use select all which will give us access to all the courses present inside Az tec.
[02:04 - 02:09] And now we are making an API call. Well, let's get rid of this for the timing.
[02:10 - 02:21] We can import dispatch from use app dispatch. So let me call it here const dispatch is equal to use app dispatch.
[02:22 - 02:43] Also we can import courses loaded from use app selector. So let me write courses loaded from use app selector and inside I want it from state and inside state we want it from state.course.
[02:44 - 03:22] Inside our use of a took we will check if courses loaded as false then we will dispatch the get courses async method. So let me check if the courses loaded as false so I can write if bang operator courses loaded and then we will dispatch get courses async and we can get rid of these because that function is not available now and inside the dependencies we can write courses loaded and dispatch.
[03:23 - 03:46] Also rather than using data and data dot data dot map we can write courses and here we can simply write courses dot map. So if you have courses just map on them because we are not returning a pag inated course now we are simply returning course also let's get rid of all the stuff we don't need.
[03:47 - 03:58] Also we don't need use state. Now we can make sure our servers are running and yes they are and check the browser on how it behaves.
[03:59 - 04:06] Let's open our inspect and check network tab. We are doing this to check when let's making an API call.
[04:07 - 04:27] So let's refresh the very first time and we see we have made a request to our courses. Now if I go to some other page let's say the courses category page you see we have made the category request now if I go back to the home page we don't see the request for courses we simply have the request for categories.
[04:28 - 04:46] If I go to the description page of this course we see the call going there but if I go back to my home page I don't see the request for getting the courses because it's already loaded and we are extracting it from Redux. Now you know how efficiently it works.
[04:47 - 04:50] see how to fetch the individual courses data from the selector in the next lesson.