This video is available to students only

Using Entity Adapters

In this lesson, we're going to use Redux toolkit Entity Adapters

In this lesson, we will discuss about efficiently getting our courses from the API. Generally, what happens is this; you visit the homepage, you make an api call to get the courses, then you visit some other page, come back to the homepage again and make the same request all over again. There is a solution though. Let's visit the redux toolkit page.

You can click on normalizing data with createEntityAdapter. It says, Redux Toolkit's createEntityAdapter API provides a standardized way to store your data in a slice by taking a collection and putting it into the shape of { ids: [], entities: {} }. Along with this predefined state shape, it generates a set of reducer functions and selectors that know how to work with the data. This basically knows how to do some basic operations on your data. You obviously cannot replace it with your server, but you can use your frequently used data in a slice, and rather than calling the database, ask your state to provide this data. This sorts your data with the keys and helps you query it efficiently.

So what can we expect? We will make an api request the very first time the homepage loads. We will take the data, store it in our state and normalize it. It will take the ids from our course and make it key of the normalized data, with value being our individual course. After that, if we want to go to our detail page, we don't need to make an api request; rather, we can check with redux if that particular courseId is a part of the stored data. If it is, we can query it. So, there's absolutely no need to go to the database again and again, which will make our requests so much faster.

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