NGRX/Effects | HTTP API - PUT and DELETE Request Handling in NGRX Effects| Angular 16- NGRX Tutorial

Hello friends welcome to my channel here at the keys and this is our angular 16 ngrx tutorial in this video let's talk about how to handle this HTTP put and delete request in ngrx effects okay let me go to my application we can start our changes from this actions so in this actions we have this update block and also this delete blog okay so similarly I am going to create two more items the one is update blocks access and another one is that delete blocks access okay first let me declare the variables update blur then update blocks access so similarly I am going to add for the delete okay so let me save this one instead of this hardcode value let me use this update block okay so next time creating the new action for this update block success okay so here also the probe is same same black model only next in our delete block so here also first I'm changing this hardcode value after that I am creating a new action success so let me save this one next let me get back to our service side so in this Master's service I already created this guitar blocks and also this create blog I'm going to create create one more new action for this update block okay so the input is same only the request to type is put and in this port we have to pass this key value blog input dot ID okay okay this is fine here this additional pipe is not required so let me remove this one similarly I'm going to create one more method for the delete delete plug so the input is blog ID also the data type is number and the request type is delete so let me save this one next in our effect side I am going to create one more new section for our update update block okay this is fine next in this action type we can provide this update block okay and in this service we have to call this update services so the input is same so in this service basically not returning any value next we have to dispatch this update block success okay next whatever data I received from this action I am going to pass our update block success okay okay xn dot input I believe this is not needed okay this is fine so let me save this one okay this is fine next I am going to create one more effect for the delete delete block and our action type is delete blood and in this service we have to call this delete plug and our input is blog ID only ID okay once the action is completed we have to dispatch this delete block success and here we have to pass the probe is block ID okay ID and in this ID we have to pass the same idea only that's fine okay let me save this one so in our final change in our reducer side okay so previously we added this update block and also this delete block so here after this update block is not needed so instead of that I am going to include us update block success okay so whatever data I am receiving from this action I am adding this into our underscore blog variable after that we are generating Loop for this blog list and we are checking so if the ID is matching we are just replacing the particular content okay so final data will be added into our blog list similarly for this delete action also we are just ignoring the particular ID information and the final blog information added into our state okay so let me save this one so the most of the changes we have done so currently we don't have any changes in our component set because in my previous videos already I have covered anyway let me show you what are the changes I have done first in our blog list I have this remove block function so if you are going to our TS file see I am just confirming are you sure want to remove this record if yes I am dispatching this delete Block action okay and here I am passing the particular blog ID so once it is dispatched it is going to the effect side so in this effect we are calling our services once the request is succeeded we are dispatching this delete blocks access so next in our delete blocks access in our reducer side we made a changes right the same changes it is just removing the particular record from our actual State this is for the delete punctuality so the same way for the update function so in this edit scenario I am populating the existing record into our reactive forms okay so when I am clicking this save button I am able to get the complete form information so here if it is the edit scenario I am dispatching this update block okay so here also the request directly goes to our effect side so in this effect we are calling our services once we got the success response we are dispersing this update blog response through these actions we are updating our final State okay that is happening in our reducer side so in this area okay so this is all about the changes now let me run this application and we can verify let me remove this test record so I am clicking R is sure one remove okay see the record got removed even if I'm refreshing also the data was not there because it is removed from our db.json file so we can verify so we have these six records only now I am trying to remove this python also see it is got removed see so now I am trying to update this one angular 16. so it is updated and I am trying to update this description also it is updated so even if I'm refreshing also it is working fine so this is the way we have to handle this put and delete request in our ngrx CFS now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 1,776

Keywords: ngrx/effects, introduction of ngrx effects, what is ngrx effects, use of ngrx effects, why ngrx effects needed, implementation of ngrx effects, create effects in angular ngrx, how to handle API in angular ngrx, how to register EffectsModule, createEffect, ngrx effects example, error handling in ngrx effects, HTTP API - POST Request Handling in NGRX Effects, nihira techiees, handle http put request in ngrx effect, handle http delete request in ngrx effect, update in ngrx state

Id: uwOR1fSy8aw

Length: 8min 25sec (505 seconds)

Published: Tue Jul 25 2023