Ngrx Component store basics using Angular 12 project

hi all today let's explore the concept of component store in ngrx so what do you mean by component store so common store is basically a local state a locker store which can be created at a component level or a component root level so root level means basically a component which can have sub components and a common store will be shared among this and their view tree so the main difference between the global store and the component store is that an application can have only a single global store but it can have multiple component stores you can have component stores at different component levels and concept-wise it is very much similar to the react state the main difference is that the command store is more reactive in approach compared to the react state here i have created an angular tool application which consists of basically two components one is the app component if you go to the html you can see that within the app component there is a component called the app checkbox and it has an input named value and an output named value change so if you go to the app checkbox here you can see that the input and the output is defined and the output is a normal event emitter which emits a boolean value so what happens in the html is that it consists of a checkbox to which the check property is bound with the value which is the input and when the value changes it emits the value changed it calls the value changed method and there it emits the current value of the checkbox so whatever is emitted we are accepting in the print value and in case it is true we set the value as checked and if it is false it is set as unchecked and this result we are displaying here in the app component.html so if you go to your application here initially the value set as true so the text is checked now when i uncheck it it will be changed accordingly so now let's see how we can implement the same functionality using component store so as the first step we need to add the component store to our application so let's add the library ng add ngrx component store the latest version we are installing so it is asking whether we can proceed now the packages are getting installed so the packages have been installed successfully now if we go to the package.json you can see that the component store has been added as a dependency so now let's go ahead and add component store in our checkbox component so first we need to go here and we will add the providers so the providers can be given at the component level so the significance of this is that whatever provider we give at the component level the instance of that provider will be created at the component level so once the component is destroyed that provider instance will no longer be available so here we are adding the component store so this is an inbuilt service which is present in the ngrx component store so this component store instance will be available to this component and all the child components from within this compound so once you have added this let's create an interface for the state so i am naming it as i check box state so the only value we need is the checked which is a boolean now let's add a constructor here and we need to inject our store so it is the component store and we need to give the type i check box state so that is the structure of our local state now what we need to do is that we need to initialize the state with the initial value so we should be doing that in the constructor so the method to do this is set this dot store we have a method called set state so here you can define the initial value so for us the value is checked and i am assigning it as false so now our component or the local state has been initialized so if you don't do this step when you try to do an update on the state it will give an error so this step is the first step you have to do once the store is available so next what we need to do is we are going to modify this input so we are making it a sector and here it is accepting a boolean since we are passing a boolean and within this sector i'll be calling the set value with the value as the param argument so here instead of this emit i am going to call the store dot patch state so patch state is another method here it will it will allow to update a portion of your state so since in our local state there is only a single key we can pass that key into this method so checked and i am passing the value so now what happens in the html is that since we removed the like we modified the value as a sector we need to have a getter or read value so for that what i'm doing is here i am adding a public property called value dollar and here i can directly select from the store the select method here you can access the state state dot checked so the checked field value will be directly bound to this observable and here we can use this observable here using the async pipe now the input portion has been handed similarly the output can also be changed using the same thing you can subscribe to this particular store using the select method so now what happens is when the values change like in the html when we change the value we will be calling this value changed method and instead the value changed again we are calling the set value so here the set value will update the patch state or it will call the patch state and update the locker state and immediately what will happen the select will be triggering the new value and this will be emitted as a output so since the app component is listening to this value change it will be receiving the latest value so here basically we have implemented the local or the component store and achieved the same functionality so if we go to our application you can see that it is working as previously and we are currently using the component store so let's explore some more methods which are provided by the component store next let us take a look at the updater property or updater method which is available within the store so for like trying out the updater what i am doing is i am creating a property called set value so i will be commenting out this method and here i will be calling the store dot updater so this updater basically returns another function which will accept a single value similar to our set value where we used to accept a value so here inside the updater it will accept an error function so the arrow function or the callback can have two parameters the first is the state and the second is the value so in our case it is a boolean so i am giving that and it basically is going to return an object so which will be created by merging the current state and the new value so now basically the set value is a function and we will be calling that function with the new value and the updater will be using that value and updating the store so now let's refresh our application so now again you can see that it is working as previously the next method we will be trying out is the effect so effect is basically like suppose you want to update the store and along with that you need to perform a side effect like for example here i am logging the value in the console so in our example we can treat it as a side effect that is other than updating the store we are also doing some action so now we let's see how we can do that so again i am creating a property called value change so similar to the updater this will also return a function so this dot store dot effect we need to give the type of the effect so here basically we are getting the event and inside that it will accept a callback and the parameter is a given stream so i am passing that and inside that we need to return the event stream dot pipe so inside this i am calling the tab operator and again inside the tab we get a callback and with the parameter which is the event and here we will be calling our code so whatever we need to do here just copy paste here and now we can remove our old value change method so here if you see i'm calling the store effect and inside that i am tapping to that event and when i get a new value that is the current value of the checkbox i'll be logging it to the console and as well i will updating the store using the set value which is calling the updater so now let's go to our application so now you can see that again it is working as expected just let us verify that the store the effect is getting triggered so i am unchecking it you can see that the control comes inside the tab and the new value will be false now it will be logging it in the console and it is also updating the store after that you can see that the even diameter or the output is getting triggered and the value gets changed so here in our application you can see that within our component there is a lot of logic which is related to the store so the ngrs component store provides an option to create our own custom component store so in this case i am going to create a file i am calling it text checkbox.store.ts and here i will be creating a class and naming it as checkbox store and i can extend the component store so here we need to specify the type so what i will do i will just move the interface to this place so that the component will only contain the view and later logic so i am moving it here and i am providing the type here and this is basically a service so we need to provide the injectable and providing cleanness root now one by one i will be able to move the store later logic from the component to our command the checkbox store so here we can directly inject the checkbox store itself so here you can see that actually we are lazily setting the initial value instead of this we can do that in our store itself so since we are extending the we can call the constructor and insert the super code you can pass the initial value so this is another way in which you can initialize the state so after that we no longer need this now we can move this value changed method to our store so i am adding it as a regularly method really property and here we can directly access no need of the store and i will move the tab and set to value also we will be moving so here what we can do we can just attach the store dot value changed so we can in effect use the what our definition we have defined in the store similarly we can move the set value as well to here so again i am adding the property and now we are ready so here again we can directly access the set value so now you can see that our the component has become very trim and here instead of the component store we need to move the checkbox door so in effect we have totally removed the store related logic to this checkbox store so this is the standard that is promoted by the ngrx so idt we should be creating our own store which extends the component store and we will be we should be adding the custom logic within that so now let's go ahead and see whether our application is working so i am going to post the debugger now i have refreshed the application and now you can see that again it is working as expected and now the component code is much less hope you are able to get a clear understanding about the concept of component store in ngrx see you soon thank you

Channel: JS Frameworks

Views: 543

Keywords: ngrx component store, ngrx component, ngrx component store tutorial, ngrx tutorial, angular state management, angular 12 ngrx, angular ngrx 2021, angular ngrx tutorial, ngrx store tutorial for beginners, ngrx componant store, Ngrx componant store tutorial

Id: 5iaFyCX-M_U

Length: 18min 0sec (1080 seconds)

Published: Wed Sep 15 2021