Angular NGRX code refactoring & display observable data using ASYNC pipe | Angular 16- NGRX Tutorial

this is our angular 16 ngrx tutorial so in this video we can see some code refactoring and also we can see the usage of a synchronous pipes now let me go to my application we can start our implementation so in my last video I have completed my counter application for that we have created this state and then reduces and the final one is actions okay so the first code refactoring we can do in our state level so if you noted here in this initial State we have only one properties here counter okay and then the same state information we have consumed in our common side okay so in our Constructor side we have injected our store like that so now the thing is currently we have only on property if I'm including three to four properties the length should be very high so avoiding that what we can do in our state level we can use the model okay so here I am going to Define our model export interface counter model so our first properties calendar the data type is number okay so similarly we can declare the multiple variables okay so now let me change the state also now it is returning this counter model okay let me save this one then in our reducer side I believe there is no changes next in this section so in this section also there is no changes now let me move on our component side so in this component so in this store definition I have included like this counter and the data type is number so instead of that we can use our newly created model class counter model so let me save this one okay there is no issue it is working fine for the better coding practice this model also we can move in the separate file so let me create one separate TS file so we have declared it here so let me cut this one and we can move to our model file okay so now we are getting this error okay so since we created the new file so then we have to import this one so let me save this one similarly we can do in our common and said also remove the existing one that's it so here we are getting here so then we have to type this one okay okay now it is imported so let me save this one okay now there is no error so the same thing we can apply for the next two components the secondary server counter button component counter model and the final one is our custom counter so let me save this one so the functionality point of view there is no error so if I am including like this increment is working decrement is working reset also working so our custom counter is working this custom remove punctuality okay that also working fine so now what I'm going to do let me include one more field in our state side so first let me include in the model channel name okay so the data type I am providing string next in the state side channel name foreign so this is the default value I am not going to change anywhere so in our display component before this h2 tag we can include one headphone tag there I am going to bind this one here we can use channel name since we're not defined in our TS file so let me copy this one so in this TS file the initial value should be empty so after that we can get it here name equal to data dot channel name okay see so the text is coming and next if you want to change the channel name we can include one more button that we can include in our counter button component after the reset we can provide rename okay so the function I'm providing on rename okay we can Define this function next let me create our action so let me copy the existing one so here our action name is change channel name so the same unique name we can use it here also next in this property point of view I am going to pass the channel name only so that is the string Channel now let me save this one next in our reducer side so we can use the same reducer after that let me include one more section so here first we need to pass the action that is change channel name so then we are returning the default state okay and here I am going to change the channel name only so from the action I'm just returning this channel so now we have completed in our reducer said also next let me go back to our common side so here we can dispatch this action so this dot store dispatch change the channel name okay so here we have to pass this channel let me provide welcome tune here at the keys so initially we can see our channel name is when I'm plugging this train in it is changed into welcome to Nikita case so this is the way we have to use the model classes so the next thing is subscription so in our counter display component we have subscribed our store in order to we are displaying this data okay so once it is completed make sure we have to unsubscribe this one okay so now let me explain how to do this and subscription so first let me declare one more variable that is counter subscribe and the data type is subscription okay that is belongs to the rxjs so let me import it sometime it will be imported automatically otherwise we have to do it in there manually okay subscription so we can use the same one here next let me get this value counter subscribe next I am going to implement one more code so that is on destroyed so using this quick fix option we have implemented this NG on Destroy so here I am going to check if this Dot counter subscribe so then we can unsubscribe it so the firm Shield is completed we can verify whether it is working or not yeah the initial page is loaded or increment is working decrement is working rename and reset or custom calendar okay everything is working fine so next let me explain how to bind this data without subscribing okay so if you noted swap to this area it is returning as the observable variable okay so here only we are subscribing and we are ascending to our internal variables finally binding in our UI so instead of that we can directly bind the subsurable data also for doing this one I am going to declare one more variable counter counter dollar okay so basically dollar denotes it is the obserable data so the data type we can provide observable so this subscribable also belongs to our RX JS only so let me use it here and then we have to provide our model class name that is the counter model so next what we can do after this subscription we can assign variable to end over observable variable this is just enough see it is a kind of observable data only so next let me copy this one and in our counter side instead of this counter display I am using this counter dollar okay so let me say this one so if you noted here we will get us the object object okay so then you may think like so since we are getting this object so then if I am including like this means whether we get the data definitely no if it is the normal object we can get the data since it is observable so we cannot directly get like this so even if I'm checking also I am getting the error only okay so in this scenario we have to use the synchronous pipe so let me explain here yes we can see and we have to check it is nullable so let me format it see now the data is coming so the forms will be also working fine so similarly we can change this channel name also so let me copy the same thing and instead of this counter we have to provide the channel name so here all our small little only so here we have to change like this now let me save this one so there is no error and also we can see the initial datas are binded so next to what I am going to do in our counter display side we can comment this subscription and everything okay and also this NG destroy that also it's not needed since we are not subscribing so let me comment everything so we can move this function to the bottom anyway further reference I am having it as the commanded lines okay so we have this much only we are just getting this observable data the data is binding since our increment is working decrement is working research rename so our custom counter it's working so if I'm removing okay this is working fine I hope you got some better idea about this synchronous pipe using that how to directly bind this observable data without subscribing and also if you have already subscribed how to do this and subscription and also how to use the model classes in our store so 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: 236

Keywords: what is ngrx in angular, why ngrx, ngrx state management in angular, what is redux pattern, what ngrx store, what is ngrx selectors, nihiratechiees, introduction of ngrx in angular, install ngrx store, createReducer in ngrx store, ngrx folder structure, how to pass multiple data through ngrx actions, how to unsubscribe store in ngrx, how to use model class in ngrx, display observable data without subscribe, async pipe in angular, bind observable using async pipe

Id: QslQ2TjgLX8

Length: 14min 24sec (864 seconds)

Published: Tue Jun 20 2023