5. Implement the Counter Application using NGRX Store, Actions, and Reducers - Angular Ngrx.

hi friends this is leela welcome to my channel in the previous video we have seen how to implement the counter without using the ngrx we have seen so that means if you see the code we have created the three com two components order buttons and the counter output so that these two will be communicating with the parent now what we'll try to do is we'll try to implement the same example in this example using the ngrx so how we can implement this one using the ngrx let's try to see now here if you go so we need to we already know the steps that in order to implement the engine restore we need to follow the redux pattern the three principles there is nothing but the store actions and the reducer so how we how we can create the store action and reducer we'll try to see in this video now here if i see first what is the thing we need to do is so if you see here we need to install the store so install the store is is nothing but npm install address in gx last the first step is this one so let's try to install the store so here what i will try to do is i'll create a new tab here and let's type the command npm install android ng rx slash store let it download the package the package has been installed so here you will be able to see that ngrx store 10.1.0 has been installed if you see in the package.json here in the package.json here you will be able to see that ngrx store has been installed 10.1 point version okay first step is completed let's see second step now the second step is nothing but what we need what we see is create state for the counter so we are having the counter application right so the com for the counter so we are able to see that we need to create a state so how to create a state we already seen in the previous examples that state is nothing but literally a javascript object so let's try to create a new file yes now what we can do is let's go to project here this is the counter we are having in this counter folder only i am creating one folder state so that the every state you will be having here now i am creating a new file something like counter dot state dot ts okay so here is the file i am creating now what constant initial state so this is the initial state so right now we are having counter zero so this is the basic counter okay basic state so we are having this is the state now first step is completed we have created a new file and we have created the state now the second second one is nothing but the create actions we need to create the actions what are the actions right now we are having so three actions are there so three actions means here you will be able to see increment decrement and reset the button clicking on this button clicking we need to increment the counter on bottom clicking of decrement we need to decrement the control reset means we should we should reset the control so that means three actions are there let's try to implement the three actions now i am creating a new file here counter.actions.ts okay let's try to implement basically basic then going on we will implement the advanced thing now i am creating the three actions so here i can write export constant increment okay is equal to so you will be having create action will be there one method will be there which will be it should be imported from the ngrx create action off we need to specify the unique name so i am creating the name as increment only okay we have already seen in the previous videos if you want to pass the data you can pass the data no we don't have we don't need to pass any data so right now we implement the basic thing only the create action of increment in the same scenario what we can do another action is decrement create action of decrement so this should this name should be unique so this is the identifier what we can say this is the identifier now here reset and you can create reset here so these are the three actions we have implemented now we have implemented the state and also we have implemented the actions now let's see what is the third step so we have implemented the state and we have implemented the actions now we need to create a reducer so right state action and register when when we call on a particular action the reducer will be executed and the reducer decides upon calling that action what is the thing i need to do so well let's create the reducer here reducer okay let's create counter dot reducer dot ts okay now here i need to create a reducer so as we already know that reducer is a pure function so here i can write export function create sorry counter reducer this is the counter reducer right i will create with the counter reducer and this will take two things that is state and the action okay so state and the action this will take state and the action and in this state and action so now what we need to do is here we need to return this and let's create counter reducer one method okay top we will write this method and let's take the state and the action okay so now let's implement this counter reducer so here at the top what i will try to do is constant counter reducer if you want you can write there also so you will be having one method create reducer in the it should be imported from the ngrx store so create reducer your first parameter will be the initial state so initial state which where we need we need to get it should be imported from the counter.state.ts okay here let's try to export this one and here what i can do i need to in the reducer i need to take the initial state so it's imported from the counter state initial state and what i can do here now let's let's do that so create register initial state has been taken so what i need to do so for which action i need to do what is the logic edit improvement so here you will be having on on will be on also should be imported from the ngrx store on okay on increment okay increment on increment increment also should be imported from the counter.actions.ts on increment the second parameter will take a method so which will have the parameter of this state okay you will be having the parameter of the state initial shape this is the initial shade it will be taking and here what you need to do is return the state okay copy the state and return the state as it is okay so first step return the state as it is copy that one return state and now on increment means now change the state data whatever you want counter i need to change so what i need to do state dot counter plus one okay so without modifying the we thought we are changing the state immutably so that means we are copying the state and whatever the properties we need to change we will be changing it here okay so this is the type and now another one is the on decrement so we will be having like this on decrement okay so on decrement this is also should be imported from the actions now this one also will take the state okay so state and here we need to same same thing we need to return the as it is so for every time reducer we need to return the state as it is and whatever the properties you want to change you can change so here i can write minus one and another one is the third one is the reset on so i can take something like reset okay i can call the reset method from the actions and this one also same same process it will follow so it will take the state as a function and in this state also we can copy this one and we can paste here and what i need to do here counter i need to make it a 0 so this is the reducer so what we have did here reducer so we have created the reducer reducer will take the initial state initial state is nothing but the what is the state we are having initially and now the each action for which action it will execute the logic here so on calling the increment action what i need to do take the initial state return as it is state what it is having and change the data in the state whatever the properties you want to share okay this is the thing we will be changing so now here state here also reset we have did that like this so this is the logic we have did in the create reducer now let's try to see so now we have created the state we have created that actions now we have created the reducer also so we have created the three things now what we need to do now let's try to import the store in the app module so we need to import the store in the app module so that means we have created the action reducer and state so now we need to initialize the store so where we need initial resistor in the app module so let's go to the app module and here in the imports what we need to write is so we need to import the store module okay store module will need to be imported from the ngrx store here and dot you'll be having two options for root and for feature for feature we will see afterwards for the timing let's see for root and for root will take an object okay let's in the previous year in the in the previous videos we have seen right so user posts you'll having all the data right so now we are having one object counter so counter okay whatever the name you want you can give here this is the name we will be using inside the components so counter so for this property which which one i need to append so now we need to give counter reducer so we need to map the reducer here so you can import the from so where we need to import from counter slash date okay you can import from it here so now what i need to do here counter reducer so this for this name i need to import the counter register so here always we need to link up the reducers so this is the object so tomorrow if you have another reducer you will be keeping the comma so post if you are having like this and you need to add the post reducer like this okay so this is the counter we have added the counter reducer so whatever the states list of states you are adding like this each one comes here in the app module link up like this so so that you will be having a single state now we have added the store module so now what is the second thing is now what is the thing is we need to use it in the components so the next thing is left out is that use it in the components so we have added store module counter like this now how to use this one in the components here is the thing retrieve the store in the component by injecting how we can inject here so here you will be able to see the constructor private store the store of counter so how you are having the reducer thing you will be having the same thing like this so now let's try to go to the any component so here what we are having here is output we are having right let's try to output the data here if we are trying to output the data we can remove this input okay so there is no need for us to send the input and now how can i inject this private or otherwise before injecting let's try to discuss the actions so that means let's go to the buttons okay let's go to the buttons here and let's remove this all the things okay i will remove this all the things and here i have removed all the things here and we have did this encounter buttons component implements in this one now let's try to what we inject the store private store column store i need to import the store okay this should be imported from the ngrx store and in this store you need to write the or the type of object how you are getting so here you will be getting the counter the name whatever you are using in the app module the same name you need to use it and here what i can do is so the same thing so the counter sorry counter and the structure of the counter how it will be having so the initial state so how the initial state is having counter of type number this is the only right so you are having so this is the thing you will be writing now here what i can do is uh that is this counter number is nothing but what i can say is the state structure so here you are having counter of zero so this is the structure we are trying to implement in the component dot sorry component component.buttons.yes now we have implemented the store so now we need to dispatch it so how we can dispatch it this dot we need to call the function so how we can call the function is this dot store dot dispatch okay we can we need to call you is call the function on increment when we are incrementing we need to call a function that is nothing but the increment okay so here is the increment now we need to call it like this so here increment should be imported from the actions we have called the increment in the same scenario we can call this dot sorry this dot store dot dispatch of decrement we can call the decrement method and also here we can call this dot store dot dispatch of or what is the reset okay so we can call the reset here also and here also we can call the decrement so we need to import these all things so we have called the actions on the respective methods so now we have imported the we have injected the store and we have called the actions finish completed now here let's go to the parent component okay we can remove so this counter will be available from the store there is no problem and this reset and all those things also we can remove it no no not a problem and in the html so it is calling there is no need to send the data so everything we can remove it so there is no need to call this all the things because everything data coming from the storagely rate so there is no need to call send the data get the data these all things there is no need to do so this is a plain thing and and in the buttons we have did and in the counter output we need to show the counter rate so that means we need to get the counter so now let's inject the store here also private store is equal to store off so counter so whatever the name we have declared in the what i can say in the app module the counter and here the counter of type member okay so now let's try to import this store at the top so we got the store here so this is an object right we need to write it as an object okay we got the store so the store data how it is existing we have written the structure of the store data how the structure of the store data is is present so we are writing the structure of the store data now we need to get the counter so here counter okay this dot sorry counter of type number okay so draft type number right so now here how we can select the data is so here this dot store dot select we need to use the select so we need to use the select off so what is the thing we need to write is here itself it is saying see if you write here sorry see here you will be able to see the counter okay in the drop down you will be able to see the contrast there is nothing but this this value so now we are selecting the counter okay dot subscript this this this yields this return say what i can say observable so here i can write the subscribe of data so you can write subscribe of data subscribe of data you will be having the data here and what i can do so this dot counter is equal to data dot counter i'll be having data dot counter here why because data dot counter so here this counter we have selected this counter and in this counter we are having an object as data dot control so that is the reason we got the data record already intellisense will show you this all the things okay now we got the counter let's try to show it in the counter output.html here if i try so counter is there right so not a problem now let's try to see the output if i try to see the output so we are getting the same output without any problem and if i click here we are able to update the thing so without any problem we are able to update everything so this is how we have implemented the store successfully basic store in our basic sample application might be is little bit of confusing for you so so this is how we will be implementing the uh store in our project in the next video what i will try to do is i will try to explain more elaborately and also will try to do some refactoring of this code also we have implemented the basic structure elaborately we have bits and pieces we have implemented right now in the next video i will explain each and everything again and we will try to do the some refactoring also okay if you have any doubts or any sessions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 12,153

Keywords: angular, angular ngrx, angular tutorial, angular input output, angular emit event between components, angular emitter, angular eventemitter, angular eventemitter tutorial, ngrx store, angular state management, ngrx store angular, ngrx tutorial, angular ngrx tutorial

Id: hRD5Fy664io

Length: 18min 31sec (1111 seconds)

Published: Mon Dec 14 2020