NGRX/Effects | HTTP API - POST Request Handling in NGRX Effects| Angular 16- NGRX Tutorial

and this is our angular 16 ngrx tutorial so in this video let's talk about how to handle this HTTP post request in our ngrx cfx okay now let me go to my application we can start our implementation from the actions here already we have this add Block action I am going to create one more new action that is for add block success okay first let me declare one constant variable so the name is ADD blog success okay similarly I am going to declare one more constant variable so that is ADD blog okay so let me save this one first in our ad block actions let me change this name instead of that we have to use this add block and I'm going to create one more new action add block success okay and this section also having on graphs that is our blog model okay so let me save this one next let me move on over reduces so in this reducer we already did Logic for this ad block so what I'm going to do let me copy this one I just duplicated instead of this add blocks let me provide like add block success okay so in this next line we have this declaration this is fine in this next Lane we are assigning values into our ID this is not needed because here after the ID is the auto generator field and also in this add block there is no action required so let me comment this one okay previously we not directly interacted with the services so that's why we are directly added into our stair So currently we are going to pass the data to our services so after that only if it is Success then we are adding into our state okay so let me comment this section anyway for further reference we can have it okay so next let me move on the effects so in this effect finder here add a Blog then create effect the steps are same only so next to this data action dot pipe here we are using this off type so in this actions I am going to check this add block okay next let me use this access to map and here we can call our services okay so in our services we have this get all blocks and also have access so let me go back to our services so there we have to complete some logics for this a functionality create blogs it's having one input and the data type is blog model okay return this dot http so this is the post request and we are using the same EP endpoint and we need to pass one parameter that's it so let me format this one so next let me go back to our effect site so here create blog so let me pass the data it is available in the AdSense blog input okay again I'm going to use the pipe for return add block success and here we need to pass the data So currently whatever input I am getting the same input I am going to return it here in this actions okay similarly in this error scenario catch error so in this cro scenario we can dispatch disk load block fail so we can just reuse this one So currently our error also got resolved so let me save this one okay here we have done the changes now let me go back to our component side okay so in this component there is no changes because already we have done so anyway let me review the changes so in this common point of view we are used this reactive forms I just declare this form using this form group and I added three Fields one is ID title and description so in this save functionality we are shaking the form has the valid data okay and then whatever value available in this form we are assigning into another one model this blog model okay so in this ID value I am defaultly provided as Co so because this is the auto generated field in this edit scenario only I am just sending the value because we have to use the same ID okay so at the end we are dispatching the action if it is the add scenario we are dispatching this add block actions okay so the request is directly going to over e of x so in this C effect we are directly calling our services and we are passing the same input data okay here the ID is the auto generated field once the request is succeeded I am dispatching this add block success action okay so here also I am passing the same object but here is the only problem is I need to know what is the newly created ID for that let me do some changes in our service side so instead of directly returning I am going to return the recently created object okay so let me use the pipe so in this pipe I am going to use the tab option in this tab I am going to call one more service so this will return the last inserted data so the data type is same blog model and here I need to pass the APA URL okay so in this tab I am getting the error so let me import it here because this one also belongs to the ngrx okay so this is our actual URL it will return the all data okay so in our scenario we have to return the last inserted record okay so we have to access this one for that I'm going to use some operator limit one okay I added the limit but it is returning the first record okay so next what I'm going to do so let me include one more option charting okay underscore chart so I'm going to start by this ID and then I have to specify the starting order descending okay see now so it is returning the fifth record so we can use this URL server endpoint URL okay this is fine now let me go back to our effect side so in this data we will get the last incentive record okay so instead of adding this action.blog input I'm going to include this data and we need to convert into blog model so now we have done the changes we can verify now I'm just removing last two records let me add Angular JS first version see the new record is added similarly I'm going to create one more record Java see both record circuits included and similarly if I am checking my db.json also see both records are available so let me include one more record see so the records are inserted and also if you are verifying in our db.json it is available okay so now we are in the end of the video still if you have any outside clarification please post in the comment box and also please don't forget to subscribe my channel so in my next video I will explain how to handle this uh put and delete request okay thank you thanks for watching

Channel: Nihira Techiees

Views: 2,557

Keywords: why ngrx, ngrx/effects, introduction of ngrx effects, what is ngrx effects, use of ngrx effects, handle external api in ngrx effects, why ngrx effects needed, implementation of ngrx effects, create effects in angular ngrx, install ngrx effects, how to handle API in angular ngrx, handling api get request in ngrx, how to register EffectsModule, createEffect, ngrx effects example, error handling in ngrx effects, HTTP API - POST Request Handling in NGRX Effects, nihira techiees

Id: 3D4G58ynYu4

Length: 10min 0sec (600 seconds)

Published: Wed Jul 19 2023