Creating Category Slice

[00:00 - 00:09] We have centralized our courses data by creating cost lies. We can see that we are making categories request again and again whenever we go to the home page.

[00:10 - 00:16] Let's centralize that too. This also gives us an opportunity to practice Redux toolkit skills.

[00:17 - 00:52] Let's go to the Redux folder and inside slice, let's create a new file and we will call it category slice. Let's start by creating a const called categories adapter which will be equal to the create entity adapter of type category.

[00:53 - 01:04] Let's import category from our model and use parentheses here. We can now create a function which will fetch the categories.

[01:05 - 01:15] Let's call it get categories async. And we need to export it as well.

[01:16 - 01:23] So let me write export. Now our function will be equal to create async.

[01:24 - 01:47] Now we will receive array of category or undefined. Let me bring that down and since we are not passing any parameter so we can write void.

[01:48 - 02:14] Here let's use parentheses and call it category slash get categories async. After this, I will use async function and write try catch block.

[02:15 - 02:35] We have error and for now we will just log the error. Inside the try block, we can simply return await agent that's imported dot categories dot list.

[02:36 - 02:48] Let's create our category slice now. Below, I will write export const category slice.

[02:49 - 03:22] We will use create slice and name it category. For the initial state, we can use categories adapter dot get initial state and inside the object, we can use categories loaded and make it false.

[03:23 - 03:45] Also the status which will be idle. Below this, I will write reducers which will be empty for now and we can write our extra reducers with a builder.

[03:46 - 03:53] Inside we can write our add cases. The first one will be for get categories async dot pending.

[03:54 - 04:16] So I will write builder dot add case get categories async dot pending. We need a state and inside we can set the state dot status to be pending.

[04:17 - 04:27] The next add case will be for fulfilled. I can simply copy it and paste it here and this is for fulfilled.

[04:28 - 04:50] We also need action so let me write it down. Inside we can use categories adapter dot set many with state as the first parameter and action dot payload as the second one.

[04:51 - 05:01] Let's use exclamation to say the value always exists and the status will be idle. Finally categories loaded can be true.

[05:02 - 05:16] We can write state dot categories loaded to be true. We can simply keep it same as the pending state.

[05:17 - 05:55] Just need to change this to rejected. In the bottom I will write export const categories selector which will be equal to categories adapter dot get select us we will pass the state which will be of type root state and it will extract state dot category.

[05:56 - 06:03] We don't see the category option because we haven't included it inside our configure store file. Let's do that right now.

[06:04 - 06:28] Let's go to configure store and add category and this will be category slice dot reducer. Now if we go back and try to find it again state dot category we can now use it inside categories not tss component.

[06:29 - 06:42] Let's go there first. Let's get rid of the local state and create const categories.

[06:43 - 06:59] We will extract it from the use app selector. So let me write use app selector and inside we will use categories selector dot select all which will give us all the categories.

[07:00 - 07:27] We also need categories loaded from use app selector from state dot category. So let's fetch categories loaded and this will be from use app selector from state and state dot category.

[07:28 - 07:47] We don't need to make an API call from here so we can get rid of our agent call and we can check if categories loaded is false. So if no categories loaded then we can dispatch get categories async function.

[07:48 - 08:31] So for that let's import dispatch first from use app dispatch and if categories loaded is false we will use dispatch get categories async and as dependency we need categories loaded and dispatch and we can get rid of the agent and also the use JTO. Now let's open the browser to see if it's working as expected.

[08:32 - 08:39] We can open the network tab. Let's refresh.

[08:40 - 08:42] It is called once. Let's go to some other page.

[08:43 - 08:47] Let's go to the description page. And let's come back.

[08:48 - 08:55] Let me delete it. And as you see we are not making the request again to fetch all the categories.

[08:56 - 08:58] Perfect. Now I'll see you in the next lesson.