3/4 Angular NgRx Entity installation tutorial | Real life implementation

ngrx entity gives us an easier way to manipulate and query collection of entities our objects that we are working with so here are the timestamps of this video so that you can jump straight to the implementation if you already know uh what entities are and how to use them and in the previous videos adrian or adrian ponsky asked about the ngrx data and entity there is a very good suggestion so thank you for asking it so here is a video about it so if you have a list of some objects to present or to work with like a list of products or people or whatever the entity adapter here can help us work with this list i think of it as an array on steroids but a redux or ngrx friendly array so we get many methods from it like add one add many update one let me open the website so here are all the methods that are already coming with the ngx entity the link is in the description by the way and here we can see that we can manipulate collection by adding one for example or adding many or uh removing one removing menu removing all updating one upserting one or many etc etc and all this in a ngrx or redux friendly manner and of course you can do all of this alone on your own but in production we try to save time and money the cost of development itself by reusing existing functionality and if you have 5 or 50 entity types you need to work with you quickly save a lot of time by using the provided entity adapter because it's already written and tested so let's use one sample application that i created in previous series to show how this can help us so this application that i made already has one feature product and that product has a as a feature module it has the store already installed and integrated by the way you can find the source of this application in the github repository in the description and what this module does it searches the api of google books so it's a lazy loaded module so here for example we can search for ngrx and the list of books from google will come up here and if i open the redux helper tool console tool we can see that we have a store with the state that has a layout router and the product module with the list of products that we are seeing here on the left and now since we have this list of products we obviously want to do something with them usually that would be a added to a shopping cart for example or in this case we are going to add it to a reading list which is a simplified version of shopping cart basically so we have a bunch of information here inside our books we have the volume info sale info etc etc descriptions and a lot of things there and some of you have noticed that i just blindly pushed the entire response from the api into the ngrc store which of course is not a good practice because there is just a lot of information floating around and if we need to store this information into localhost or somewhere it is just a lot of data unnecessarily being manipulated and stored in the memory so this has to be fixed by on the runtime so here in the product effects where i'm basically just blindly pushing the products i need to make the products manually and use only the fields that i'm interested in so instead of these products i will click quickly add another level of it so i will just map each of the products the remote products and i will just make one local product one empty object where i am going to populate that one which each of these remote products so let's say that local product id equals to remote product id node remote products remote product and the same for the uh volume info that we have defined in our interface here i'll just do the volume info and let's return the local product and that way we have basically limited our data only to these two fields of course you can go through the volume info and manually filter that one as well as a matter of fact you should do that but for the sake of this tutorial i will keep it short so now if i would search our application and grx we can see that our state products contain only the id and the volume info so it's a bit less date so now we have to select some product and to add it to our shopping cart or reading list so let's add one button here with the title add to shopping list and that's inside list component here we the type button and uh the click will be actually product you know the add to reading list method that we don't have uh yet so it will be we will pass in the product and the title will be add to reading list we need one more button for removing to remove from reading list and here we'll be remove let's create these two methods and now we are going to dispatch a new action which we don't have yet but we will create another set of actions so there will be product a reading list actions and one action will be add to reading list and here the query will actually be the product that we are clicking on let's make one more method for the uh remove from reading list so remove from i will let intellij create it for me and that one will dispatch the similar action except it will be called remove from reading list and it will actually send the product id because we don't need the entire product for it now let's make these actions so here beside the product actions we can actually copy the product actions to the product reading list action let's rename so it's not the search way it will be add no let's copy add to reading list and then the second one remove from leading list we don't need the third one and this one will accept the product product of type product and the second one will accept the product id type string this will be products reading list remove from list the first one will be products reading list add to the list now these actions are not visible outside of this index because we are not including them so let's include them product uh what did we call the product reading list actions from product reading list actions we close all other files and if we go to our list component everything should be fine except we are not importing this one once we have that on place we everything looks fine so the on click action now on our button is triggering the action the product list product reading list added to the list action however the state is not changing as we can see here that is because our reducers have no idea that the action is being triggered so let's fix that let's uh make our induce reducers aware of i see this red so product product id should be the product dot id so let's fix reducers so that they can update our store and let's make a place for this product in our store and here beside or parallel to this uh product feature key which is actually the products we are going to make one more level so that one will be from uh not products but from the product reading list and that one should be from a productly reading list from uh products reducers well we don't have the reducer for it at all uh so before i make this one i need to make the reducers for our new product reading list so let's make a new file products reading list reducer typescript and we can as well actually copy what a lot of things from the product reducer to the product rereading list reducer just rename the products feature key so that will be product reading list feature key and it will be product reading list see what else we need so we don't uh let's call we don't need a search value we need list of product but let's call it reading list product so that we know what kind of products they are and they will be initialized as empty this is not needed here and here we are not going to listen to product section we're going to listen to product reading list actions and the add to reading list which will accept the product and uh here it will just add this product to the reading list of products however we cannot just add this product like this uh nor can we just append this state because the ngrx state uh must be immutable or it cannot be changed only the new values must be stored on top of the existing values so what we need to do is we need to fetch this reading list products state and then check if the object is already existing there maybe so compare the ids if not we need to create a new uh store object and then overwrite basically the store object with that new object so let's do that quickly so here we need to return the old state but uh let me quickly remove this one so we are returning the new state but before we return the new state we need to check if the uh state as it is to right now and the reading product uh and the list of the products actually contains some of the or contains the one product that we want to add to it so that will be existing product so we need to check if that existing product id matches the product id that we are adding right now so this one is being passed uh actually if there is no existing products like that then we are going to uh add that one but not to this state we need to make one constant existing reading products that will basically be the copy of this state or the value of this state and then on that state we need to uh push the new product then we are going to pass this existing reading state products to the field reading state reading list products it gets a bit complicated that's why the ngrx data will help us and i will show you just in a minute sorry mgrx entity this will not take long and on the the removing this uh removing products from reading list which will actually accept the product id we need to do the similar thing we need to check if the products already exists in the state so let me just return this state but before we return it we need to check if there is existing product or rather we need to get all the other products except the existing one so we will just go with the existing products and that is the state reading list products filter which will accept the product of type products right and that is only in the case where product that id does not matches the product id parenthesis here too much and then we are going to return these existing products as the reading list products so basically a filtered version which does not include our product that we want to remove we can either use the splice or filter or some other method i'm not even sure that the filter is not immutable method and that the state will not change to this one now this is not that bad or difficult when we are just adding or removing one product to our state but when we need to update one or many or to set parameters or to change some parameters or to change some flag that describes this product in a day in the shopping cart like the amount or discount or something whatever there is a lot of manual handling of data and each time we need to be very careful not to change the state as it should be immutable meaning only new values should be added to the store overwritten to the store state and we also need to be very careful not to extend these product objects here so it can only be basically an interface we cannot make a new method like it or a class from it and then have some additional functionality because as discussed in the first video in this series we want to store these items or store the state inside our local host inside our local store sorry and when we do that we are basically serializing this json this array with data and then uh storing it in local storage and the methods cannot be serialized so it has to be pure data and we basically cannot do anything with these products rather than having these properties here so basically they're useless there and we have a lot of manual code to write which basically allows for potentially a lot of errors and headaches thus the entity adapter from ngrx that we looked from before which comes with all these mentions function functions that we discussed right out of the box so we don't have to write anything all these methods like add one many remove one remove any update etc etc are ready to be used and to use them we can look at this documentation here however i always like to look at the demo app which is a bit more realistic than the documentation in my opinion at least in my experience so here is a source code and if we go to the projects example app and source app books and reducers we can see that books reducer actually uses the ngrx entity with its entity adapter and state and everything and we can now compare uh what we had to do manually with this functionality that comes from mgrx so here we can see that in order to add one book they are actually calling this uh adapter and they are just calling the method add one with the book and to the state that they want and that's basically all there is to it we just call this adapter and add one we see that they also have the adapter with the add many where they can just pass a lot of books so that way we don't have to think about it the entity adapter will take care of it and one good thing when using this entity adapter is that besides that we are forced to keep our models clean meaning that their planes objects as we discussed that they will not mutate themselves somewhere along the line and thus be desynchronized from the state or lose the single source of truth they can be stored in local storage as i explained before but we are also keeping our store clean with only the data it should contain and not some functionality if you remember from the original video the store is like an in-memory database so it only contains data not functionality no methods no additional functionality so the ngrx entity is also an integral part of ngrx itself so it's very well well supported in the entire redux or ngrx workflow here and besides only storing the data inside the entity state it can also sort these entities so there is one last thing to think about it so let's implement one entity in our application and we can do that by basically just copying this part from their example and for that one we can just take this entity state interface basically and that will be in our reading list reducer so instead of this initial state or this interface space we are going to give give the entity state and of course i cannot import that one because i have not installed it so let's quickly install it by following the documentation here so installation is just npm install and once installed we are able to import our entity state and that entity state if we look at it it has the ids and the entities itself already so we don't need to think about the ids and entities the ids are there just to quickly find the id the sorry entity from the dictionary from the list so we can extend it but we don't need this selected book id we can put additional properties here if needed and instead of this book we are going to use the product and the initial state as in their documentation is basically empty but i see that we need the entity adapter to work with it so we can just copy these two portions here and here we don't we need in this entity adapter after we import it we need to define which pro which entity type are we going to use then we are going to create one based on that entity type again and here we actually need to provide it which with uh the id field for our entities so it needs a unique identifier uh the select id or the property needs one id field in this case it's id and the sword compare we're just going to put the false because we don't care about sorting for now and the initial state does not need this selected book because we don't have that one and now we are back to our add to reading list where instead of doing all of this we are just going to use what they are using and that is adapter add one book or product to the state so if we put that one here and we just need to provide our product and then let's do the same for the remove from the reading list where we are going to comment everything that we wrote and let's just put the adapter remove one that one does not exist here but we can find it in the documentation here in the entity adapter where we have the remove one method from the adapter in similar way as we added one to the state to the entity list we are just going to remove one uh by the product id and let's give it the state that it should remove it from and with any lock if we now try our application this should work and if we follow our state if we if i click to reading list of course there is nothing to the state being changed but that's not because of the ngrx entity that is because i actually never finished the integration of this product reading list to the store so let me quickly edit so this one needs to be from product's reading list we need our new release date and also here in the reducers provider we need to add from a product reading list products feature key actually this should not be products feature key this should be product list feature key product list feature key so that we know uh what are we referring to a bit easier and that needs to be from products reading list the reducer here not the method but only the reducer and uh yes this products typo here this is a products reading list reducer and this one is red because i have oh yeah i'm not reusing this reading okay i changed the from products so this one actually needs to be product feature key and here i need to use the products reading list feature key and that's not reading 2 but it's reading g in the same here let's see what our app complains about now and we can see the changes the state is changing if i would now go into a products module we have the products list empty if i add to products list we can see that there are some ids appearing here and if i try to add the first one multiple times nothing is being changed inside the store but i can remove it and i can remove the other ones just as easily and our store is updating and our state is changing so everything is basically behaving as expected the products are added to the store and then the products are removed from the store without us having to think about what is in the store should we double check about it if we need to remove it manually about the mutability of the store etc and now we can subscribe to this selector to this portion of the store and make a selector for it somewhere else inside our application and then we can list these products that are here inside our reading list or inside our shopping cart and continue with our application but that is uh for another tutorial and in the next video in ngrx series i will talk and show how to use the ngrx data and how it works and how it can simplify our code even more so make sure to subscribe to the channel to be notified when that video comes out and i'll see you then bye [Music] you

Channel: Applicable Programming

Views: 2,149

Keywords: programming, web development, tutorial, ngrx tutorial, ngrx store, ngrx entity adapter, ngrx entity example, ngrx entity vs ngrx data, angular ngrx tutorial, applicable programming

Id: g2R-2BRzUGA

Length: 20min 28sec (1228 seconds)

Published: Thu Oct 29 2020