Using Asynchronous Calls in Redux

[00:00 - 00:04] If you notice there is some code which we are repeating. For example, the add to card function.

[00:05 - 00:15] The functionality is exactly the same, but we still use the same code at different locations. Our Redux toolkit gives us a way to use asynchronous calls from Redux as well.

[00:16 - 00:19] Now let's see how to do it. We will start with the basket slice.

[00:20 - 00:31] So let me go to the basket slice. We can also centralize the loading from here.

[00:32 - 00:40] So let's create a new piece of state inside our basket. And I will call it status, which will be of type string.

[00:41 - 00:53] We can also mention the initial state to be idle. Now let's create our asynchronous function.

[00:54 - 00:58] And we can create it here. So I will write export const.

[00:59 - 01:21] Now this will be called add basket item async, which will be equal to the create async thunk, which is provided by Redux toolkit. So I will write create async thunk and this one is provided by Redux toolkit.

[01:22 - 01:39] The first thing we need to pass is the type prefix. You can write it as let me go down and write basket slash add basket item async .

[01:40 - 01:52] Now we will write our payload creator. So comma and async and inside the parameters, we need to pass the course ID.

[01:53 - 02:03] So course ID. And after this, since we are using async keyword, we will use a try catch block .

[02:04 - 02:16] So try catch and our catch block gives us an error object. So for now, let me just log the error.

[02:17 - 02:26] We see the error because our create async thunk does not have any type. If we hover over it, it has void, void and an empty object.

[02:27 - 02:41] Our first void describes the return type. Since the add item method returns a basket, what we can do is use angle brackets and as a first parameter, I will write pass it.

[02:42 - 02:56] The second void is the parameter type. So I can pass the course ID, which will be of type strength.

[02:57 - 03:05] We still see the error because we are not returning anything from the function. So let me write return and await.

[03:06 - 03:19] Now we can make the API call, let's use agent dot baskets dot add item and I will pass the course ID. We see the error.

[03:20 - 03:27] Let's see what it says. It says type basket or undefined is not assignable to type basket.

[03:28 - 03:42] To fix this, we can use a pipe and mention undefined here and this will solve the error. One good thing about create async thunk is that it creates actions on our behalf, which we can use in our store.

[03:43 - 03:54] For example, we can change the status depending on the status of the call. If the call is successful, we can change the status to be done or if it fails, we can make it failed.

[03:55 - 04:04] We have access to do it inside our slice. Below slice, we can write extra reducers and that is after the reducers are ended.

[04:05 - 04:29] So here we have access to extra reducers and it gives us builder. So builder is provided to us by the extra reducers and we can use builder.add case.

[04:30 - 04:38] It takes either a plain action type string or an action creator. And as I told you, our create async thunk creates an action creator on our behalf.

[04:39 - 04:47] That is what we can use here. And if you remember, we have given it a name add basket item async.

[04:48 - 04:57] So if we pass that name here and press dot, you see, we have access of so many things. Let's start with pending.

[04:58 - 05:11] As a second parameter, we have access of state and action, like an action creator. They just help us to change the state at different lifecycle of our request.

[05:12 - 05:21] So when it's pending, we can simply turn the status into pending. So I can do state dot status and make it pending.

[05:22 - 05:30] We can use another add case when the request is fulfilled. What I'll do is copy the add case and paste it below.

[05:31 - 05:47] And rather than pending, I can make it fulfilled. And when the request is fulfilled, I can make state dot basket to be action dot payload.

[05:48 - 06:02] And we see some warning which says basket or undefined is not assignable to right table draft basket or null. So to fix this, we can use a pipe operator and use undefined here.

[06:03 - 06:11] And also we can set the status to be idle again. Finally, we can add another add case.

[06:12 - 06:21] So again, let me copy this one and paste it here. And this is for rejected.

[06:22 - 06:29] We don't need any action in this case and not in this case either for now. So let's get rid of it.

[06:30 - 06:38] And the action is rejected. We can again put the status to be idle because we don't want to show something loading when the request has failed.

[06:39 - 06:40] Let's take that forward in the next lesson.