NGRX Developer tools | debugging in NGRX using redux devTools | Angular 16- NGRX Tutorial

this is our angular 16 ngrx tutorial so in this video we can talk about Dev Tools in ngrx for doing this implementation we have two important steps the first one is big how to add the Redux dot tool section so basically it is supported for Chrome and also Firebox so the next thing is we have to install this ngrs devtools package okay so first let me go to my application so here our application in this trending mode before starting our implementation let me tell you what is the use of this Dev tools so basically this Dev tools are used for debugging our ncrx okay so if you are storing our data since stories or local storage even cookies we can directly check in this application side So currently we don't have anything if you have something in this local storage we can verify it here similarly this session storage okay since this ngrx also storing data in this client side so if you want to see you have to use this Dev tools okay so now we can start the implementation so the first step as I mentioned we have to include this extension so let me type Google Chrome extension so here let me search like the Red X Dev tools okay this is the tool so let me add to our Chrome ADD extension okay the extension added that's what we are seeing this message remove from extension okay so let me close this tab so basically we will get one more tab that is the Redux if it is not coming we have to restart our Chrome once again we can open our site see the new tab is coming Red X the next thing is we have to install our ngrx do tools package in our application side so if I go to the official site of ncrx get started so already we have installed this ngrx store So currently we are in this developer tools only so in this overview also we will get the same information so let me click this installation so here we will get this command so this is the NC command similarly if you want to use this npmrn so we have to use so let me copy one second so if you are installing any package make sure you have to stop your application once the installation completed you can start one second okay the package is found do you want to proceed further yes so this installation will take some time okay the installation gets completed now you can verify the changes so we can leave this package lock so in this package.json we are able to see this new package in grx store devtools so the version is 16.0.1 only next in our app model so here this store devtools model is imported okay and then in this import side we are able to see this store.tools model dot instrument here we have two properties okay so the first one is maximum age and the second one is log only first let me tell you this maximum is so if there is any action happened in our ncrx it should be captured in our Dev tools okay so like so already 25 action is completed so now I am performing the 2016 means so if I'm checking I am able to track this 26 also at the same time the first action has been removed from our ngrx Dev tools okay so in case if you want to get oil the action should be captured mean you have to promote the value base false okay that we can verify a little later and the next one is log only so this property is used for restricting our Dev tools monitoring okay so now let me run this application we can verify however the tool is working okay our application is running so we can refresh one second see now this start symbol is enabled and also our HDR store is initiated now I am going to click this increment button see so the increment is happened so in this right side see the previous value is 5 now it is changed into six so in this raw also we can say the same information okay so next I am going to click this decrement so see the action is so decrement so the previous value is six now we just change it into Phi now I am going to use this custom functionality let me provide that in if I'm added see custom increment which is our action name so the previous value is 5 now it is changed into 18. so similarly if you want to track everything one by one we can track so initially it is changed to five to six so after that six to five then it is 5 to 18. so similarly if I'm clicking this rename see the action name change the channel name so the previous value is Nikita Keys it is changed into welcome to Nikita case Okay so these are the basic information and here we can see as the play button so if I'm clicking this one see this our UA also so let me start once again you can watch these two areas so initially it is 5 and 6 18 finally it is changed into welcome to Nigeria turkeys let me click once again C5 618 welcome to Nikita techies so what are the actions we have done we are able to recall everything okay and also we have this action section so in this right setup also so if you click this action so the same things we can wait for once again see so it will provide only the action information so the type of the action is increment the next one is decrement then custom increment then change channel name so if I'm clicking this in agreement two to three times everything should be added and also we can see how many actions has happened around the nine actions are happened okay so state is already be seen so next one is difference so here also we are able to see what's the previous value currently how it is sent so similarly we have this trace and test so that actually not that much important So currently we are in this inspector mode similarly we have this log monitor chart rtk query also let me use this log monitor okay see so using this log monitor we will get the complete information so initially it is started within this counter state it is having two properties so then our increment action is happened So based on that it is counter change it into six and the channel name is statistics so again it is restored within Phi and the that action is custom increment so here we pass the values 3 and similarly we have passed one more value that is had So based on that our values has been changed the countries 18 and the channel name also nuclear attack is we are able to get all the details so next let me move on the chart okay so chart you can see the state it is having the object is counter it is having two properties one is counter and also another one is channel name so if I'm clicking this increment you can see it is somewhat blurring because whenever I am clicking this button so this property only varying so that's what it is blood so similarly if I'm clicking this rename so rename it is not changed because we are updating the default value I am restarted once again so if I'm clicking this rename it will be blurred okay because first time it is second time onwards I am changing this Sunday welcome to Nigeria Tech case so Hereafter again it is updating the same value so that's what it is not triggered okay next let me explain this maximum age concept okay so we can restart this one and also we have this reset option also see if I am clicking many times currently we have these eight records that means eight actions happen so using this reset option see it is completely changed basically this affecting your UA also let me show you once again see the value is 10. and this one also welcome to Nikita case I have not refreshed my page so if I'm clicking this reset see everything got restored okay so this is the concept here so next as I mentioned we can verify this maximum image see the count is 24 reached so if I'm clicking something also initially it is not considered after taking some time see suddenly it is changed into 31. so now what I'm going to do let me review so let me click this play button you can see it is started from 8 okay so we can rewind so initially it is started from zero see so the next day click converts it is directly moved to 8 so then 9 10 11. so if I'm come to the end you can see the value is 31. okay so the reason is we have mentioned the maximum image is 25 so that's what it is keeping just to 25 records so next what I'm going to do instead of this 25 let me provide files foreign so now in this Redux side we are not yet started so let me click this increment button so it is started now I'm clicking now so we are reached 24 so now it will allow it is not passing anywhere So currently we have 36 actions so let me click my play button so it is starting from one to three and it will come up to the end okay so in this way we can hold all the actions in our dough tools okay and similarly we have some other options so if you want this as the separate tab so it is opening in this left side see it will capture all the information so similarly if I am clicking this one it will open in this right side and this one is Worth showing this bottom so this is the way we can track and debug our ngrx activities 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: 1,334

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 use model class in ngrx, display observable data without subscribe, how to use selectors in ngrx, react developer tools, ngrx developer tools, how to debug in ngrx dev tools, how to add redux dev tools extension in chrome, instal ngrx devtools, how to trace ngrx actions

Id: 1vdeVd4WTgo

Length: 12min 23sec (743 seconds)

Published: Tue Jun 27 2023