Adding FetchBasketSlice

I just noticed that we're making an agent call from our App.tsx file. Since we've created a basketSlice, let's move this logic to basketSlice as well. We can create a new async thunk function called fetchBasketAsync. This will be equal to createAsyncThunk which will return a basket; let's give it a prefix name of basket/fetchBasketAsync. We can make an async function now. Since we are not passing any parameters, we can use underscore as a first parameter and thunkAPI as the second one. Like always, we will use try catch block and inside catch block, we can use thunkAPI.rejectWithValue with error being the err. And since we're here, let's copy this part and replace the console logs we did in the other thunk functions.

Coming back to the fetchBasketAsync function, we can make the api call to fetch the basket, so we can return await agent dot Baskets dot get. We only want to make this request when the clientId is available inside the cookie. So we can put a condition to make this request, and we can use another block which will take a condition. In this condition, we will need the getCookie function that we have used inside App.tsx file, so let me copy that function and paste it here. Now inside the condition, we can check if getCookie clientId is false; we will simply return false, which will not make the api call.

If we compare fetchBasket function and addBasketItem Async function, we see that both of the functions return basket; so rather than creating different add cases for these two functions, we can use addMatcher for fulfilled and rejected status. It should be wrapped with isAnyOf function and here, we can add fetchBasketAsync.fulfilled and for the rejected status, we can write fetchBasketAsync dot rejected. We need to move both of these matchers to the end because addatchers must come after addCase.