Hello friends welcome to my channel hereis in this video let me share some important interv questions in angular ngrx so before sharing this question and answers let me provide some overview of ngrx so ngrx is one of the popular state management Library it is using the redex pattern see this diagram so in this redex pattern we have a four important area the first one is store then action reducer and selector okay this store is responsible for the state data okay and this selector using this selector we can consume this stored data and we can use in our component site and the next one is action so the action we can dispatch from our component side so whenever the event is triggered based on the event we can dispatch the respective actions okay then the request is coming to our reducer side so reducer is on function So based on the action it will take the action type okay and then it will modify the existing state in our store okay this is the flow so whenever state is modified the value will automatically reflected in our component side so in case if you have more than one component also if you are consume the same data in all the components once the data is modified it will be reflected in the all the components okay that is the flow and the final one is EFX it's for handling the HTTP Services okay so in this real time scenarios obviously we have to call the APA I mean the services so in this scenario from this action it will go to the FX from the FX we can identify what is the type of action So based on the action we can call the services once we got the response it will come to the action once again then based on the response data we will modify our state from this reducer side okay so this is the actual flow so the same flow we can verify from the code also so let me show one example so we can use associate as the example purpose the first one is State okay so it is a kind of object it's having some default values okay and the next one is action so in this action file we have a different actions uh anyway let me take the first three load associate load associate success and load associate fail so this success and fail have some uh props if it is Success uh we will get the list of associate information so if it is failed we will get the error message okay so the actions are defended using this create action function okay so the action also done so and the next thing is dispatching action from the component side so let me go to the component okay from this associate listing component so in this initial page load we are just dispatched this load associate action okay so once it is dispatched the request is directly goes to the EFX section from this section it is going to the effect side so if you are checking this cfx okay from this cfx first we are checking this action type if it is load associate then we are calling our services okay so from this service we can expect two response one is the positive response we will get the list of associate information and another one is failure scenario if it is succeeded we are dispatching this load associate success okay and we are passing the list of associate information as the props okay so then the request is coming to our reducer side so in this reducer side also we are just checking this action if it is load associate success first we are returning the existing state and then we are modifying this list object okay so similarly if it is the failure scenario load associate fail then we are modifying this error message message only and also making this distance empty okay so that's what the request is coming to action then it is goes to our effects again coming back to the action and now it is in the reducer from this reducer it is modified our existing state okay so now we have the modified data in our store it should be consumed in our component Side by using the selectors okay so next let me show you the selector okay this is our selector file so here I have written two selectors okay one is returning the list and another one is returning one of the object okay so that we will see very deeply later so next we can see how we are consuming in our component side see from this store we have a select a function so inside the select we are using this selector get associate list then we are subscribing this one okay so once we have a data as usual we are binding in our listing okay so next we can review the questions one by one so our first question is what is ngrx so the ngrx is the popular state management Library it is used for managing State and building reactive applications in angular and it is following this Redux pattern from the intro itself I have mentioned and this ngrx provide the robust and scalable solution for centrally and predictably managing application state so ngrx allows developer to handle State changes efficiently and maintain a clear separation of concern okay so we can move on the next question what are the commonly used libraries in Ng RX so the first and very important library is ngrx SL2 and the next one is EFX and then routers and the fourth one is entity then component store signals and operators okay but these two are the very important libraries okay so we can move on the next question so the next one is what is redex so redex is an pattern for managing and updating application state using even called actions okay and it serves as the centralized store for state that need to be used across your entire application with the rules ensuring that the state can be only be updated in the predictable fashion okay so we can see this diagram from the overview itself I have explained uh it's having the four important things like a store action reduces and selectors also this effects okay so we can move on the next question what is the use of ngrx so commonly we can say ngrx used for State Management that is fine additionally we can say transferring datas between the different components mostly for the unrelated components so just assume your application have more than five components okay it don't have any relationship between the components so now you are modifying data from one of the component so as for the requirement the changed value needs to be transferred to the all other components okay so in this case we can go with an ngrx and finally it is segregating HTTP request handling and the components okay so using the effects concept we can achieve this point okay so we can move on to the next question what is state in angular State can be defined as any data that should be saved and persisted across components life cycle this includes user data application configuration and various UI States okay so the state can be any data type so it's stored in our store as the object format okay for the example I can show you so this is the state from the initial State we have a just object with the default values that's it okay so we can move on the next question can we have multiple States in our application yes we can use the multiple States so let me show you one more example so this is my associate model and then I'm having one state so similarly I have this customer okay for the customer I have created the another one state for registering the states we cannot directly do so that we can do from the uh reducer side okay so I have created the two reducers also one is for for customer and another one is for the associate finally we can register everything in our app. model see so in this store model I just included this associate reducer and also the customer reducer and I have created the alas also so this actually we can use in our selector side so this alas we can use in our selector side okay so one more thing I want to convey So So currently I'm showing this sample application it is developed in angular 16 okay so if you are using angular 17 uh we don't have this app do model so instead of that we will have the app. config that I will show you in the end of the video so minor changes only uh but it's almost the same okay so we can go for the next question what is actions in ngrx actions Express unique events that that happen throughout your application ation help you to understand how events are handled in your application so we can create action using function create action so it's from our ngrx store okay that also explained and it's having two important section one is the action type that is the uni and its mandatory additionally if reord we can have the parameters okay for passing the parameters we can use the props so let me show the example so again if I'm go within this associate see this is one of the sample action okay so the action defined using this create action uh function it is belongs to the ngrx store that you can see here okay so in this action we have this action type load associate fail okay so this is the unique value and we are passing the parameters in the format of string using this props we are passing the parameters okay so we can move on the next question how to dispatch the action so in this ngrx store provide the dispatch function using that we can dispatch our acction so that also already we seen anyway let me show you one again see so this toore actually uh be injected from The Constructor okay then it's having this dispatch function and we are dispatching our action Al so okay so the same way if you have any parameters in our action site so this is the scenario add associate and here we pass the parameter also okay so we can move on the next question how to pass parameters in action by using the props we can pass the parameters and also we can pass the multiple parameters and also we can pass any data types okay so already I shown let me show you once again see so in this example we pass the data in string format and the before one we are passed in the array similarly we can pass the N number of parameters also okay so we can move on the next next question what is reducer so reducer are function that take the current state of your application and an action then it is returning the new state object okay so based on the action type it is modifying our state and it will return the new value that's it for the example purpose we can see so this is our reducer So based on the action the action is success then it is modifying our list okay and then it will return the one new state so simply we are modified the existing state based on the actions that's it how does an action differ from the reducer in ngrx so we already seen what is ngrx action and ngrx reducer so now we can see the difference an action is a function that is used to trigger a change in the state of an application while a reducer is an function that is used to handle the changed state so in other words an action is used to initiate the change okay while a reducer is used to actually implement the change so we can move on the next question what is selector yes selector is a function that select a slice of state from the store selectors can be used to create derived data such as filter list of items or a sum of items okay let me show you one of the example so this is one of the selector okay from this selector we can return the complete State otherwise from this state we can return any of the object also okay so in this example we have a three items okay one is the list then error message and Associate object okay and I have shown this reducer also so this reducer uh we have registered in our app. model using the alas associate okay so the same allas as I mentioned we are using in our selector side see using this alas we are just access the Ender state so after that from this state we are created the separate select for this list okay so similarly for this associate object so the same way we can return the complete state or else the individual data okay this selector can be uh subscribed in our component side so in the example also I shown uh anyway let me show you once again see using this select function we are subscribing our select okay we can move on to the next question what is create feature selector the create feature selector is a convenience method for returning a top level feature state it return the typed selector function for a feature slice of State see so in our selector side for getting the top level State we used this one create features selector okay so after that only we are sliced as the indidual selector so we can move on the next question what is FX in ngrx FX provide a way to isolate side effects from components and services by using an eite you can make sure that your components or service is only responsible for the thing for example if you have a component that needs to make a request to an APA so you can use an effect to handle that request okay so this way the component can focus on other things and the effects can take the care of API request okay so previously if you are not using this ngrx so we will inject the service in our component in order to we will use in our Ender application okay so once we have this ngrx effects for handling this service related things we can move to this effect site in our component set we can simply dispatch the action and also we can subscribe the selectors that's it there is no direct interaction between the service side so we can move on the next question what is the purpose of entity adapters in ngrx entity adapters are used to simplify the process of working with entities in a grx they provide a number of helper methods for performing cred operations on entities as well as method for selecting entities based on the various criteria okay so it's a additional Library we have to use the scenario I would say so if you have different menus okay but it's all are having the common structure of columns okay so in this case uh we can go with this entity adapters let me show you so this customers uh we have used the entity adapter okay for defining the state itself we are used this entity adapter okay and it is providing uh get initiate state so using that we can initiate our state so similarly if you come to our uh reducer side see it is providing the extension method set all for modifying our actual State and for adding the data add one okay for update one move on so using this uh helper method so we can easily complete our work redactions okay so we can move on the next question what is store Dev tools so this Dev tools option used to we can debug our ngr state change okay for doing the implementation point of view first thing is we have to install these packages once the package is installed we have to include some configuration in our app. model store D tools model and it's having some properties I just provided maximum AG is 25 that so that means it will have the last 25 request information the old data automatically deleted and log on only for the D mode Connection in soon that is true okay so basically uh if you are installing the package this so This configuration will be included automatically so if it is not happen then we have to do in the manual way okay okay and the next thing is in our browser side we have to include one extension so that is Redux do tools okay and next let me tell you how to debug so this is one of my sample application currently in the running mode okay same associate screen only so if you come to this Redux tab first let me refresh see now first it's initiated our store add then fice and in our associate point of view it's dispatching this action load associate so if you are checked in this action side we can see this type it don't have any parameters and also in our state side we have a default objects only it don't have any values now and in this different section there is no difference okay so next this request will go to the effect side then it is coming back to our action once again it is dispatching this load associate sees okay so in this state in this action point of view we will have this props list okay we have some list of values and the type is load associate access okay next in our state also we can see the value is updated so in this list we have some values and this ER message is empty and also this object also empty okay and if you are checking the difference see the highlighted areas are now included okay and the same way uh if I'm clicking this edit it will trigger another one action so first in this action point of view we are passing one props that is our ID and in this state point of view still it is the empty object only okay once it is succeeded so in this object having some values okay that if you are checking this difference then you will know so initially it should be empty now it's having this value so the same way we can reset this ngrx state also by clicking this option see So currently we don't have values in this uh popup and also in this listing also we don't have any data okay so then so the reason is we just cleared this ngx data it is reflected automatically so on S ex I got the data okay so in this way we can do the debugging and also the unit testing using this Dev tools and it is only applicable for the dev only okay in this way we can do this debuging and also the developer can do the unit testing also okay we can move on to the next question what is the difference between ngrx store FX and entity so the first one is ngrx store so ngrx store is the library that provides the core redex like store for ngrx okay so even this example also we seen so like this create action is coming from a grx store for the reducer the reducer also coming from the ngrx store only and this selector this create feature selector and also this create selector all are coming from the store only basically it's providing the and the next one is ngrx EFX so this ngrx EFX provide a way to isolate side effects from your ngrx store so that's what already we have seen the HTTP request are separated from the component okay and the final one is ngrx entity so using this Ng grx entity easily we can manage the entities in ngrx that's it so that already we have seen so like we have a different menus but all are having the same type of columns by using this entity concept we can reduce the code okay so we can move on the next question and the next question is why would you want to use ngx instead of angular services or rxjs subjects so using this angular services and then this rxj subject also we can transfer the data to the unrelated components but if you are coming to this ncrx the way okay it's provide the better way to manage the state and this can be helpful for a number of reasons incl including making it easier to debug the application State providing a more predictable way to manage the state and making it easier to unit test State Management code these are the reasons we are going with an ngrx okay so we can move on the next question what are some real world use case for the nrx so ngrx is the great tool for managing state in large scale application it can be used to keep tracking of user data application setting and even application States so we can move on the final question how to use ngrx in angular 17 okay so first let me tell you so in this angular 16 we have a normal template okay that is completely model based template in the angular 17 point of view we have two templates the default one is Standalone template and as usual if needed we can use the model based template also so if you are using the model template there is no change so the same way only we supposed to use but the problem is when you come to the Standalone template there is no app. model file okay so instead of the app. model we will have this app. config okay there only we have to include the configuration so other sites are same only like a reducer action effects select state all are same only but in this app. model so you can see this store model FX model and the store do tools model so these configuration changes we have to include in our app config section okay so let me show you one angular 17 example also so anyway in our Channel we have created the separate video for handling INX in the Standalone template so I will include the video description also in the link so this is one of the angular 7 application okay this is one of the angular 7 application see the package version is 17 and if you checked in our app folder so there there is no app. model file okay instead of that we can have this app. config we have registered our store like this so the same reducer only and we have created the all so instead of the store model we have used this provide store option okay so the same way for the effect so instead of the effect model we used the provide effects other things are same so in this array we can have the N number of effects so the same thing is applicable for the store so in this object we have three reducer right the same way we can do in this angular 1 also okay so this is the way whatever Library we are installing the configuration should be included in this app. config so mostly it will be included automatically okay so the changes only we have to do so now we have covered most of the topics to refer this ngrx website okay so here we will get the updated information so in our Channel also I mostly covered up to this entity okay so these are the additional libraries maybe I will create the separate video so like a component store and signals and operators so when you are preparing for the interview make sure you have to refer these areas so then you will get some better idea okay okay 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