Angular NgRx - How to use Feature Creator (API Overview, 2023)

Hey! My name is Dmytro Mezhenskyi I'm the  Creator and author of Decoded Frontend   YouTube channel. In this video, I'm  going to demonstrate how you can use   the NgRx createFeature function in  order to reduce the amount of the   boilerplate in your code base so continue  watching and let's get started [Music] before we start coding let's very quickly  recap what is considered to be a feature in   ngrx terminology first of all the ngrx feature  it is a dedicated State slice in the global NGRX   store object which has some dedicated key in my  case it is a scientist feature key then every   feature has a dedicated reducer and reducer it is  simple function that is responsible for transition   from one feature state to another one when some  corresponding and grx event is happening and those   two building blocks you register using provide  State helper function if you use Standalone   API or if you use NgModules then you utilize the  store model and the dedicated for feature method   in order to register the feature and to make the  ngrx feature complete we have to have a dedicated   selectors those are functions that allow us to  read the state of this feature and once we have   this three building blocks we can go then in some  component and use those selectors in order to read   the state of the feature and select it from the  global store and as a result I have the following   simple application that can handle the loading  State then it has a list of scientists and I can   select one and see the detailed information about  some certain scientists but let's get back to the   source code and name it to our ngrx feature  selectors and here I would like to highlight   one disadvantage of the current implementation  and namely I would like to highlight that I have   to create a corresponding selector that allows  me to read the state of my feature and because   my feature State consists of three properties it  means that for every of this property I have to   create a corresponding selector and I have to do  it manually and I have to do this similar work for   every ngrx feature in my application and we might  have a lot of them and this is where they create   feature function shines and helps us to reduce  amount of the boilerplate in our application so   let's try to refactor our code and apply the  create feature function to see it in action   so let's jump to the scientist reducer and  somewhere here below I'm going to create a   new constant that has name scientist feature  and the value of it will be the result of the   create feature function like that so what takes  this function as an argument it takes a simple   object that has to have at least two keys the  first one is a name and this is nothing else   as a feature key string and it will be used in  order to create the corresponding feature store   slides in the global store object and the second  required property it is a reducer that is related   to this feature in my case this is this reducer  and by the way I can shorten this notation just   like that and this is the minimum setup you have  to perform so now you can grab this constant and   then go to app config and in place self these two  guys you can use our feature we just created just   like that and provide State function is smart  enough to recognize that this time we provide   the ngrx feature so it will properly resolve the  feature key and feature reducer and to make sure   that our application still works we can go to the  browser and you can see that everything works fine   but where where the benefit you might ask and  the benefit is that the create feature function   also generates a group of selectors that allow  you to read every property in your feature state   so basically things we were doing right here  all these four function were generated for us   automatically by the create feature function and  because the generation of selectors happens at run   time that's why there is one small restriction  you have to know and namely you are not allowed   to use optional fields in your feature state  in this case you will get a compilation error   so what if you have to have some kind of optional  uh field in this case you have to use something   like null or undefined but the main thing is  that the key has to be always present in the   future State I hope it is pretty much clear so  far so let's move forward all right because the   basic feature selectors will be generated  automatically it means that we can go and   remove the selectors we created manually and use  Auto generate at once instead this is really cool   but what about custom selectors likewise this  one that I created in order to get the data   for the selected scientist here as you can see  I'm not just reading the state property like I   do it right here but instead I rely on two other  selectors in order to properly resolve the data   and return the result value as a value for this  concrete selector so how we can solve this problem   well here the first thing you have to understand  is that auto generated selectors like those ones   they are absolutely normal selectors that you can  actually import right here and use them instead   those two this is the first solution but also you  can do the following thing you can provide a third   property for the create feature config object and  here you can Define the extra selectors like that   and it takes function that Returns the following  object so what has to be inside inside as a key   you define the name of the extra selector in  my case I will use this name of the old one so   then right here I have to create a corresponding  selector using the create selector function like   this and here inside I can already generate  my my extra selector that depends on the auto   generated selectors and auto generated selectors  are coming as an argument for the extra selectors   function so they will be right in this argument  or you can actually destructure this object and   pick only the selectors you actually need so in  my case I need select selected ID selector and   also select scientist one and now I can do pretty  much the same thing I did in the manually created   selector so I Define those two auto-generated  selectors right here and then I can resolve only   the final value for this extra selector that is  depending on the values from those Auto generated   ones and now we are ready to go so because all  the selectors will be generated by the create   feature function we don't need their selectors  file anymore so I can simply go and remove it   great and now we just have to adjust our scientist  component because currently we use selectors that   were coming from the deleted file and now we  have to say that now it comes from the reducer   namely they come from there uh how did we name it  a scientists feature constant so let's import it   here and right there everywhere I have to replace  it with the imported scientist feature constant   and if we say this change and go to the browser  you can see that my application reminds working   I can select select the scientist and everything  is working exactly as I expect the Final Touch in   my refactoring is really optional but what I'm  going to do is to rename the scientist reducer   TS file a little bit because currently as you  can see it contains not only the reducer but   it contains the whole feature so the name of the  file doesn't actually reflect the content of this   file so that's why I will rename the reducer  and name it just a state you can name as you   want depends on your naming convention but I'm  going to name it as a state and of course I have   to update all the Imports in my application  and in addition to that I can also remove   this scientist feature key constant because  I don't reuse it anymore I use it only here   so I can replace it with just a simple string and  after that I can remove completely this constant   but if for whatever reason in the future you  would need to get a reference to the feature   name then you can simply do it from the object  that create feature function returns and here   you can find a name and you can find also the  reducer so the object returned by this function   becomes kind of source of Truth for their  ngrx feature and because of that you can also   remove their export keyword from the reducer  constant because again it is available right   here so as you can see using all create feature  function can significantly reduce the amount of   boilerplate in your application especially if you  have a big application with complex States and a   lot of selectors because many of them that you had  to create manually before they will be generated   automatically by the create feature function  and in such a way you will be focusing more on   the feature delivery rather than doing the similar  work over and over again I hope this tutorial was   useful and if you would like to see more videos  in collaboration with njrx team please let us   know about that in the comments section under  this video and also let us know which exactly   topics you would like to see covered if you would  like to see more videos about Advanced and Glory   development in general then please check out my  YouTube channel it is called decoded front-end you   can easily find it on YouTube otherwise I wish you  happy coding and see you in the next video foreign

Channel: Decoded Frontend

Views: 17,021

Keywords: angular ngrx, ngrx feature creator, ngrx create feature, ngrx feature, ngrx tutorial, ngrx selectors, ngrx store, angular ngrx state management, angular state management, angular redux, ngrx store tutorial, Angular tutorial 2023, decoded frontend

Id: bHw8SV4SNUU

Length: 12min 6sec (726 seconds)

Published: Wed Jul 12 2023