Create Selectors & select specific item from ngrx state | Angular 16- NGRX Tutorial

Hello friends welcome to my channel Nikita techies this is our angular 16 ngrx tutorial so in this video we can talk about selectors in ngrx first let me tell you what is selectors so basically select this kind of function that is provided by njr store so using this function we can extract the individual properties from our existing state so in order to we can improve the performance of our application so let me explain the concept after that we can do our implementation so this is my created application if you noted here currently I'm having this state so in this state I am having two properties one is counter and another one is the channel name and also I am having three common the counter button counter display and also this custom counter currently I am displaying this counter and channel name both are in our counter display common and only so now what I'm going to do see instead of showing both properties in the single component I am going to show this counter only in this counter display component so this channel name I am going to use in some other components okay now if you check the naughtiest file I am just subscript with this state only okay so let me show you the code also so we can consider this section so using this select option I am directly accessing my state okay so the state contains both the properties so that's what I have used like this so since if I'm moving this function to another component also again I am going to subscribe the same state only okay our requirement is we are accessing only counter in this component this channel name I am going to access from some other command here the problem is once I am updated this counter obviously our state has been modified okay since I am subscribed here obviously this section should be executed that means trigger so the same time the trigger will happen in this another component also because both the areas we are subscribing the same state only okay so basically it will affect our application performance So currently I am having two properties so if you have more properties obviously it will affect our application performance for avoiding the situation we can create the selectors for the individual properties so Hereafter we are not going to subscribe the enter state so instead of that we can subscribe our created select test that how the required properties okay so this is the overall concept so even though if you are not understand properly so once I am completed my implementation you will get more idea okay so let me start our implementation okay first what I'm going to do so let me comment this section for the code refactoring we have added like this for time being let me comment this one we can uncomment this area and this just I also needed okay so we can save this one so next in our HTML side let me comment everything I'm just having this h2 tag and our variable name is counter display okay so we can remove the existing code I'm just replacing okay so let me say this one next in this headphone section let me move on the custom counter component okay so in this content set let me include it here I'm just providing channel name so let me save this one also we have to declare this property and here I'm going to implement this awning hook so if it is not imported we have to import it manually or on in it so whatever code is there we can just copy and use it here because here also our store is injected so let me copy it okay so instead of this counter display we can have only this channel name so let me remove it and this subscription is part of the RX GS only so we have to import it okay now it's done very similarly in our counter display component we can remove this channel name so let me say this one since I am getting some error custom counter okay here we not saved this page that's right okay so the error got resolved if you checked the output you can see our channel name and also this counter so the functional demand of you everything will work and a channel for your name also yeah welcome to Nigeria Tech all are working fine so next what I'm going to do here I can include one console.log so I can provide our common name custom counter similarly we can include the log in our counter display also so we can save this one now if we are checking in our console we are able to see this counter display and also this custom counter so let me remove everything so now what I'm going to do let me click this increment so whenever I am clicking this increment it will affect the counter property in our state so this will affect this property only okay so I'm going to click this one see so the value is changed is 6. so it is not changed but we are getting this log from both component from the counter display we are getting this counter display from the custom counter we are getting this custom counter so similarly if I am clicking this increment again it is calling two times so now I am going to click this rename so if basically it is affecting our channel name property so again both areas are getting called okay so basically it will create some performance issue so avoiding this scenario only we are going to use the selectors option now let me tell you how to use the selectors so we can create one more new file we can provide the name is counter dot selector okay so this is normal TS file so first let me declare one variable get counter state so that means we are accessing the current state and create feature selector so this class also belongs to this ngr store only and here we have to use our model so our model class is counter model and our state counter so this part is done next I am going to create the individual selectors for that be how the class is create selector okay export get counter create selector so in this selector we have to pass our get counter state here we can access our actual State information finally I am returning J dot counter so similarly we can create one more selector so that is for our Channel okay so let me provide the name is get channel name and up to this is fine at the end I am just returning this channel name so let me save this one first in our counter display company so instead of this calendar I am going to use the created selector okay that is get counter since it is returning the single data that is nothing but our counter only so we can directly use it here okay so let me save this one similarly in our custom counter component we have to use server get channel name under the step is same only you can save this one finally see our output so in this initial time both are got triggered so that's what we got both the messages so let me remove the existing console so now if I'm clicking this increment it is triggered only our counter display okay so similarly if I'm clicking this rename it is just triggered from our custom counter only okay and we can use this custom counter add functionality this custom counter functionality also affecting our counter property so that's what we got this counter display message even this remove also again this counter display so only this rename option so it will change our current state of the channel name so already the text is welcome to nikira techies only so that's what it is not triggered once again so if you want to verify we can verify it okay see the custom counter is coming okay so this is the way we can Implement our selectors so now we are in the end of the video still if you have any dots or clarification please post in the comment box and also please don't forget to subscribe my channel so in our next video we can see one of the interesting topic in in grx thank you thanks for watching

Channel: Nihira Techiees

Views: 3,242

Keywords: what is ngrx in angular, why ngrx, why ngrx selctor, what ngrx store, what is ngrx selectors, nihiratechiees, introduction of ngrx in angular, install ngrx store, ngrx folder structure, 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, what is selector in ngrx, create selector in ngrx, createFeatureSelector, how to use selectors in ngrx, advantage of ngrx selectors

Id: kOatEjqtsxk

Length: 11min 7sec (667 seconds)

Published: Fri Jun 23 2023