NGRX Blog screen example & App state | combine multiple reducers | Angular 16- NGRX Tutorial

this is our angular 16 ngrx tutorial so in this video we can talk about how to create the global of state in order to combine multiple reduces okay for explaining this punctuality I am going to have one more new screen that is blog okay so there we can load the existing blog information so since in my last video I have completed this counter application so for the counter application we have created the separate State model and reduces actions so similarly I am going to create for this blog also okay but in our ngrx point of view we have the single store so there the data will be stored in this Json format okay so even if I'm creating the separate state for both the models so finally both are get combined in this single store only okay so anyway let's start my implementation once it is done you will get some better idea so this is my created application okay before starting the implementation let me share one more information okay this is my final output so if you are following my last video you are able to see this only counter application so now additionally I have included this menu okay so whatever counter example we have seen that actually I have moved in this counter link and if you are clicking this blog there is nothing I just created one common there is no implementation so then if I'm clicking this home also I just added the text there is no more implementation okay so this menu I have created for the separate video but that video actually not relevant to our ngr series that's why I'm not added in our playlist so if you really want to watch that video I will share that video link also in our description you have to watch it basically that will explain how to handle the deprecated can activate interface in our angular 16 application okay so anyway let's start our implementation so in this covering point of view so in this shared folder we have the store inside the store we have created this actions model reduces selectors and state for our counter application so similarly we can create for our blog screen also okay first let me create one folder so instead that we have to create our files one by one so the first file is block dot state and the next one is action and the third one is model and the fourth one is reducer and the final one is selected okay first we can start from the state so let me copy it from our counter state I'm just added here so let me change the name instead of the initial State let me provide blog State okay so basically this holding the list of log information and also we cannot use this counter model so let me complete my blog model also export interface black model so here I am going to have three properties the first one is ID so the data type is number and the next one is title the data type is string under the find one is description okay our model is ready so let me go back to our state so here we can use our blog model okay as I mentioned I am going to have the list of information so let me Mark this into array so here I am going to provide the initial State value so this is the array and inside that we have the object and title let me provide angular so in this description point of view I am just providing the basic information angular is an open source it's powered by Google okay so similarly we can include two more objects so this ID 2 3 .net so let me say this one so now our initial state is Trading so next let me move on the action side okay so in this action point of view I am going to create only one action load block okay using this create action option so since our data available in the store using selectors also we can retrieve the data so anyway for the example purpose I am just including this action next let me move on the reducer side okay so we can copy the code from our counter side I mean the count reducer so up to this function okay so here we have only one action so let me remove all the other items okay first let me change this naming block reducer and we have to import this create reducer so this is belongs to our ngr store and here I'm going to use the blog state that is our initial State value and instead of the increment we have to use the load block okay and this on also belongs to this ngrx store only and this counter is not needed yes here we are not modifying anything whatever value is coming we are just returning it here okay so here also let me change this into block reducer and we can call it here we can now be completed our reducer also let me include this reducer in our store so in our app dot model so already we have included this counter right so here I am going to add one more object that is the block at the values of our blog reducer okay so let me save this one so the coding part we have done So currently I am in our counter application and just inspecting if you are checking in our reducer side let me choose this inspector so if I'm checking this state we can see so this is the single Json object only so here we have this counter section so after that our blog also included okay so both areas we have our initial State value only okay so now if I'm trying to change this one so this increment action is happened so only this counter value is modified so our block value is as it is it's not changed okay so next what I'm going to do let me create one separate selector for this blog so using that selector we can fetch the list of log information that I am going to display in our blog screen okay so let me go to my application and already we have created this file okay and further friends we can check our counter selector so let me copy the first two items so let me change this into block state and we have to import this create feature selector so instead of this counter model we can use server blog model and basically it will return the array and this also need to be changed into block so instead of the get counter get Block and be holding both our create selector also and from our blog state so here it's not having this counter so it's having the list of data only be not included other properties so we can return the complete State information okay next let me move on the component side I just created this uh block component so in this TS side I am going to implement this NG awning hook and also let me include the Constructor because we have to inject our store here private store so the store is belongs to our ngrx store only and here we can use like blog and blog model okay so let me save this one and here let me declare one variable also so this dot store select so here we have the call over selector git block okay so let me subscribe this one so this dot block list equal to we are assigning this data that's it let me save this one and finally we can include this blog list over console so let me go back to our blog screen so if I'm checking this console I am able to get these three records okay so let me bind in our HTML site first I am going to include one question tag technology blocks here we can have this matte card and then Mac card header so next match card content here I'm having one paragraph tag so in this header side I am just including one hedge on type okay so already I'm having data in our blog list so using ng4 let me generate the loop let High term so here I am going to just to bind the title and the description that's it so let me save this one see the output so the datas are get binded so let me include some design here see the response now so we have the three sections and we just binded the data whatever data I'm having just bind it so if I'm having the length of description so it's somewhat good okay okay now we have completed the functionality of this blog screen but still we can apply some of the optimization so the first thing is uh combining reduces okay so if you are checking here in this store model I am just created one object and there I have included one reducer so similarly we can include n number of reduces the functionality point of it's fine but the application point of it is very difficult to manage and also it's not fair for the optimization purpose what we can do so let me create one more new file so inside the store I am going to create one more new folder so let me provide the name is global okay and here I am going to create one new file so let me provide the name is app.state okay so this is an object here I am going to have this counter so in this counter I'm going to add this counter reducer so similarly for the blog I am adding this block reducer so the idea is very simple so whatever code already I have included in our app dot model so this section okay I'm just moving this into our app.shape so instead of that we can use this app State here so in our app dot model okay okay it's done and there is no error our application also working fine okay so Hereafter if you are including any new register also we no need to check in our app dot model so instead of that in our app.state file we have to include all the reduces one by one okay now the next thing is so this model point of view we have this counter model similarly for the black screen we have this blog model okay so let's combine and we can create one common model so inside our Global folder so let me create one more file App State DOT model export interface App State model so it's having two properties one is counter for the counter we can use this counter model it's having the object of data and the next one is black it is having the list of data so we can use this blog model and this is the array so let me save this one so next let me move on the component side so Hereafter we can use that class only App State model okay the same change I can apply for our counter display model also Upstate model so we can save this one and finally we can see our response also So currently I'm in our blog screen the datas are loaded so similarly if I'm going to our counter screen it's working fine see your increment function is working and this custom increment working custom removal so working so rename functionality also working fine okay so now we combined our reduces and also applied some code refactoring so in my next video onwards we can call over APA and we can start our implementation okay 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: 4,351

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, combine multiple reducers in ngrx, create global appstate in angular ngrx, ngrx example creating blog scree, load table from ngrx store data, create ngrx actions, create ngrx selectors

Id: n36qwMkM3S8

Length: 16min 2sec (962 seconds)

Published: Mon Jul 03 2023