Adding FetchBasketSlice

[00:00 - 00:11] I just noticed that we are making an agent call from our app.tsx file. Since we have created a basket slice, let's move this logic to basket slice as well.

[00:12 - 00:21] First of all, let's go back to the basket slice. And on top, we can create a new async-kung function.

[00:22 - 00:39] And let's call it export const fetch basket async. Again, this will be equal to create async-kung function, which will return the basket.

[00:40 - 00:55] Let's give it name basket slash fetch basket async. And now we can write our async function.

[00:56 - 01:04] So let's write async. And since we are not passing anything, we can write an underscore and we will need tongue API.

[01:05 - 01:11] So let me write tongue API. Inside like always, let's create a try-catch block.

[01:12 - 01:34] So try and catch with an error of type any. And if there is any error, we will return tongue API.reject with value where error will be error.

[01:35 - 01:53] And since we are here, let's replace console.log with the same tongue API.re ject error. And let's pass tongue API here and here.

[01:54 - 02:08] Now inside the try-block, we will simply make the API call. So I'll write return await agent dot basket dot get.

[02:09 - 02:16] We only want to make this request when the client ID is available inside the cookie. So what we can do is we can put a condition to make this request.

[02:17 - 02:30] So after this async function, we can create another block where we can write our condition. So let's write the condition.

[02:31 - 02:38] And here we just want to check if the cookie with named client ID exists. For this, we have already made a function inside app dot TSX file.

[02:39 - 02:59] So for now, let's copy this function and let me paste it here. Now inside this condition, I want to check if get cookie function with client ID does not exist.

[03:00 - 03:11] So I can use a bang operator here. If the cookie does not exist, we do not want to execute this function and simply want to return false.

[03:12 - 03:24] So we are only making this request only when the cookie is available inside the browser. Now if we compare the fetch basket function and add basket item async function, we see that both of the functions return basket.

[03:25 - 03:41] So rather than creating different add cases for these two functions, we can use add mature for fulfilled and rejected status. So let's start with the fulfilled method and this should be builder dot add match up.

[03:42 - 03:51] And it takes a function called is any off. So let me write is any off and it will take our arguments.

[03:52 - 04:02] So first one is add basket item async dot fulfilled. And the second one can be fetch basket async dot fulfilled.

[04:03 - 04:10] And let's apply the same logic for the rejected state. So let's replace add case with add match up.

[04:11 - 04:25] And let me cut this part and use is any of function. And I can pass add basket item async dot rejected and fetch basket async dot rejected.

[04:26 - 04:38] Now to make these add match a work, we need to paste it below the add cases because this is the requirement. Now it looks fine.

[04:39 - 04:53] Coming back to the app dot tss file, we can take away the API call logic. So let's delete that function and also this logic here.

[04:54 - 05:04] Now we can simply use dispatch and we can use the fetch basket item async function fetch basket async. And that's it.

[05:05 - 05:18] Also, let's remove set basket and the agent because we have moved the logic to our basket slice. We can now go back to the browser to see if everything's working fine.

[05:19 - 05:25] Now let's add some items to the cart. We have to and let's refresh it once again.

[05:26 - 05:31] And we see two, which means our logic is working fine after refactoring it.