21. Lazy load the ngrx state using for Feature store Module in Angular NGRX.

hi friends this is leela welcome to my channel so now what we have today is in the previous video we have implemented the lazy loading and now why we have implemented the lazy loading now i will try to show you here in this video now if you try to inspect the element if you go to the console and the network and if you try to see the js file if i refresh it again okay if i refresh it again you will able to see nothing right so js files are loaded and if i click on counter counter js file is loading without any issue yeah that is that is what we have expected the issue the scenario and if i click on the post post module is loaded update everything is loading first okay fine this is fine now why we are implementing the lazy loading so in order to get the performance and also the in order to decrease the file size of the js right so js file says in order to increase the initial rendering of the js file if you want we want to decrease the js file we have implemented that we will be implementing the lazy loading now if you try to see here if i load this one now if you understand there is no there is no reason for having the counter state and also the post state why because in the home page we are not using any of the counter variables or otherwise the post state variables so that means there is no need for us to load now if you go to the reduction if you see you go to the state here you are able to see that counter and post both are loaded automatically when you are in the home itself it's waste right it's a waste it's a performance thing is waste why beca why it is loading automatically we have declared this one in the app module right in the app module in the app reducer we have implemented so that is the reason the counter and the posts are getting automatically loaded if you go to the app reducer what it will be in this app producer the counter and the posts are getting loaded so that is the reason what is happening here is the counter and the posts are loading automatically when we are in the home page so even though we are not using the data of the state we are loading the content post so this is also one type which is which affects the performance so the js file also will increase automatically we go here and if you see we are getting the how much we are getting main.js 35.6 3.2 mb like this some somewhere yeah so these as the application is very small so there is no you cannot see the gradual decrease in the file size and all those things now if you go to the counter okay if you go to the counter now we need the counter data so that means state in this counter data we need the counter data but there is no need of this post data so unnecessarily we are loading this post data when we go to the post here now we need the post data right so now how can we do this thing okay how we can implement this type of scenario let's try to see so now what we can do is now here in our c in our project in our project if you go to the app.module.ts if i open this one there is no need for us to road at the road time okay i can keep an empty object so there is no need further at the root time to load now when we know when we want to load so we can go to the counter dot module okay this is the main module which is lazily loaded and here which is the which is a state data we need counter state data so i can directly add store module here okay dot for feature we will be having no for root we should be using for feature so here and what i can use the name is nothing but the counter which we have implemented the name counter and here i'll be used sorry counter okay and here i need to use the reducer so i need to download the reducer counter reducer okay so we have implemented the country counter feature for this one now let's go to the post module in the same scenario we go to the post module so what we need to do here i need to load the store module again okay so in the store module what we need to do i need to do for feature right and here i can use this posting okay and here post reducer so if i go here you'll be having the post register so we have loaded which whichever module is necessary for that state so that state will be loaded as it is when the module is lazily loaded now let's try to see in the output if i go to the home page okay i have loaded the home page so now if i go to the state see here i am not able to see any states so nothing no state is loaded here nothing is loaded here now if i go to the counter immediately see we got the counter stated why because the com counter js is lazily loaded so for that reason the count the store has been initialized but there is no post data if you see here there is no post data why because the post has not been initialized the post data has not been initialized up to now now when we go to the post data as the counter data is already initialized there is no need for us to delete it so if we want if i click on the post data here see what it what it has happened the post has been automatically loaded okay so this is the way how we can implement the lazy loading so if we go if i refresh this one see it has main.js previously it was 35.2 kb or something like this now it has been decreased to the 24.5 kb so this depends so when your application is reboot this this matters a lot the state matters a lot so now we have divided the store module there this feature module and all those things now if you go here if you go to the uh some people what they will try to do is they will try to make this one also as a constant instead of having the string in the two places where we are using this one so if you go to the selectors okay if you go to the selector okay selector here also we're using the same name whatever the same name whatever the name we are using here we need to use it there also now what i can do here export constant post state name i can use something like this okay and i can keep the post here and i can use this name automatically here and in the same scenario i can use this name here automatically and i export this in the same scenario what i can do i can go to the counter selector this purely depends on you so this is the good practice something like that what i can say is so instead of maintaining hard code strings you can maintain like this so this is not mandatory so if you want you can maintain okay so i can have this counter and i can use this counter automatically here so now i can go to the contour module and i can use it here automatically okay so this is how we will be using now if we select this one without any problem we are able to load it okay so this is how we can load the feature we can use this store module for feature up to now we have used the store module for root right so we can use store module for feature so if you are having some state data which is loaded across all the multiple modules means so you can directly define it in the root so that it will be used in all the models if you are particular only to the particular modules or particular feature particle module is having particular state means so it's better to load it as a store module for feature so that the performance will be the js file will be minified okay so this is how we will be implementing the feature module in the next video what we will try to do is we will try to implement the login authentication and we will learn more about this one how to make an ajax calls using the indirect state and we'll learn a new concept about the ngrx effect effects okay if you have any doubts or any suggestions 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: 13,590

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 selectors, ngrx tutorial, angular forms tutorial, props selectors, ngrx props, selector props, learn ngrx angular, ngrx forfeature, ngrx store tutorial

Id: iKfG4_e_IqM

Length: 8min 13sec (493 seconds)

Published: Wed Dec 23 2020