Fetching Single Product

[00:00 - 00:09] Now we have some courses in our state already. So we can avoid going to the API requesting for the same data if it already exists.

[00:10 - 00:20] And there can be situations where user can directly go to the description page and we don't have the course in the state. We can centralize that call as well.

[00:21 - 00:31] First of all, let me go back to the code and inside the cost slice. We will create another thunk function for fetching the individual cause.

[00:32 - 00:44] Rather than writing the whole code again, we can simply copy this one and make some changes. So let me copy this and paste it below.

[00:45 - 00:53] And the name here can be get cause async rather than get causes async. This is going to return just the cause.

[00:54 - 01:06] So we can remove paginated and keep just the cause. Also this time we have the argument cause ID of type string.

[01:07 - 01:20] So let me add it here. Cause ID of type string.

[01:21 - 01:31] And the name can be get cause async and let's remove void inside. We will pass the cause ID.

[01:32 - 01:48] So cause ID here and we are making call to agent.courses.getbyid and we will pass the cause ID. And this is it.

[01:49 - 01:55] Let's write our add cases now. Like always I will copy and paste.

[01:56 - 02:10] For the first case, let me copy this and paste it here. First of all, let's change the name to get cause async and we don't want to do anything else.

[02:11 - 02:26] For the second case, let me copy this one and paste it here. Let's change the name first, get cause async and here we don't want to use set many but absurd one.

[02:27 - 02:34] So let's remove set many and write absurd one. And this time we don't want the data.

[02:35 - 02:57] We simply want action dot payload and let's put an exclamation mark to tell we are not returning null here. We can get rid of the state but course is loaded and this is not update one but absurd one and then see that coming.

[02:58 - 03:08] Finally let's copy the third case and paste it here and we don't want to do a lot of things. First, change get cause async to get cause async.

[03:09 - 03:20] We are now ready to see this in action. Let's go to the description page and first of all let's get rid of the local state because we don't need it.

[03:21 - 03:31] Rather than using the local state, we can use cause and we can use it from use app selector. Use app selector.

[03:32 - 03:56] We need to have the access of state and this time we will use courses selector dot select by ID and we can simply pass the state and the ID which we are getting from here. And inside the user effect hook, we can check if there is no cause.

[03:57 - 04:13] We can then dispatch the get cause async request which will absurd the cause value to the existing courses list. So let's get rid of this call and check if there is no cause.

[04:14 - 04:30] Then we want to dispatch get cause async request and pass the cause ID which is the ID we are getting from here. And let's see what is the error here.

[04:31 - 04:38] An expression of type void cannot be tested for toothiness. Okay, okay, so we are not returning here.

[04:39 - 04:48] So let's get rid of the curly brackets and this will hopefully solve the issue. Now it returns this and it's not void anymore.

[04:49 - 05:02] Let's also pass the dependencies. We have ID dispatch and cause also let's get rid of the use state agent and cause.

[05:03 - 05:14] So let's get rid of cause and also the agent because we are not making the API call here anymore. We cannot check how this works in the browser.

[05:15 - 05:25] Make sure there are no errors and let's go to the browser now. Let's refresh it and it works.

[05:26 - 05:35] Open the network tab once again. Let's click on any cause and you see we are not making any API call.