4/4 Angular NgRx Data installation tutorial | Real life implementation

you can reduce this many files and this amount of code to a single line of code when you have a lot of entities to manage in this video i will show you how to use the ngrx data extension if you watched the first video in this series we had to make the store with all of its reducers then we had to make a lot of actions for each action that we are going to do right and then a lot of reducers and also selectors and in the second video we also made the effects that are going to communicate with the backend to make a complete circle in the redux pattern using the ngrx library if you remember the graph from the first video we basically had to make each and every part of the ngrx circle so the store the reducers the actions selector and the effects that are going to communicate with the services the ngrx data is an abstraction that is built on top of those store effects and entity that reduces the amount of code that we need to write for simple entities so instead of writing everything that we've written in several videos in several previous videos we only need to write one of these methods like get all or delete or add and the extension will do all the heavy work for us it has the built-in actions selectors effects reducers and everything this is actually very good documented part of the ngrx so the documentation here is very clear and easy to follow because in essence it automates a lot of configuration and definition of the store that we had to do manually before so all the effects and all the reducers and everything as i mentioned it all come it all comes out of the box so we gain some simplicity and but some of the work is actually being hidden from us and also probably some of the control as well because things are now go happening automatically however ngrx data is not taking away anything from the ngrx store it's not a replacement it's just another layer of abstraction then that we can use when needed and uh when we don't need it or where we have the requirements to change things manually we can just use the ngrx the regular way so it's not a replacement or or an alternative it's just a tool to help us to help us in some situations like a majority of the tools are but first i have to mention some limitations before you get all excited about this extension like i did when i found out about it there are some limitations and also some requirements and most of them are not the problems i have in cart encountered in my projects at least not on the tasks that i needed to do with the ngrx data but one of the biggest uh limitations or one of the biggest requirements for the ngrx data is and we've used this in our previous videos when we were using the google books apis is actually that this response that comes from google is not normalized it is containing the entities under this items here which means that it the entities are not the top level citizens in this response the google api actually contains also information about the pagination under the root level so we have this key entity this key items here that actually contains all of our entities and this is one of the things that's not supported by ngrx extension at least not that i could find the easy way to do it because to get this to work is almost not worth the trouble as you would basically have to change every part of the extension so you might just as well do it manually rather than relying on this extension so because we cannot use this google api that we used in previous example i will actually quickly make one fake back end that will just normalize this data and it will return us this uh data these books from google on on a root level from that so for that i will be using the json server library that you can just google basically json server and here you can see how it's used it's very easy to use so we just need to install it globally and once it is installed we need to make one database json file that will basically fake our data or it will listen to this key here to this endpoint on the api and it will return what we have put inside that file and for that i can just copy basically several items from the google and i will just put them inside one file here in root that i'm going to call database.json now these are the books that are coming from the google i need to surround this json these items with another level as displayed here inside documentation so we need to make this as posts or in our case the products because that's what we are calling our books the products and if i close this one we now have four books that are being listed inside of our fake server and i just noticed that these two have the same id that is probably some google thing that will not work because the this library one of the requirements is that each entity needs a unique id field so that the library can manage them and now if i would just run this server by watching this database file if we open that we can see that we are basically getting our books in the root of the response by calling the products here so there are four books coming from our server and now we can start with implementation so to implement this ngrx data we can just look at the documentation and inside the overview we can we can see that we need to define the entities first so there is basically one entity made one entity metadata typescript file that will contain the definition of what kind of entities are we expecting from the backend we can define several of them i will just make this entity metadata file inside of our root because it can contain multiple entities entity types but it can be in a feature module is just a typescript file so it's not that important i'll just copy everything from here and then adjust it for our needs so instead of hero we are going to need the product let's import the entity metadata uh however i cannot import it because i didn't actually even install this library so first thing first we need to install it and the installation is done by just using the npm or yarn or whatever you're using the ng for example and if i paste it in the npm will install the ngrx data extension of course you need the mjrx base extension for this to work and now i can import this entity metadata map and here inside the product we can put some parameters so that we can change the entity name that is going to be mapped towards the backend in our case i just made it the same as we have it here that's matching these products the library will even take care of the product and products so the plural names will be correct but you can change that if you wish you can define here the plural names we don't need that basically but we can say that product is actually products just to have it similar and we don't need anything here for the configuration and now we need to register the entity store basically and we can see here that it requires to have the store module configured and the effects module and one thing that is not mentioned anywhere but you need to put the entity data module last behind the effects module and store module because if you do it in a different order it will not just not send anything to the back and then you will lose a lot of time figuring out why it's not working don't ask me how i know let's just put this entity data model module here inside our app module at the very end so after our effects and we need to import all these live classes one thing to note is that we have already store module with our matcher meta reducers and root reducers we can actually remove this now because our products are not going to be working with with the ngrx data so if i remove this i have to provide actually the empty object for users and the next thing is to create some entity data service and this service allows us to overwrite some of the functionality from the ngrx data to extend it to redefine it however it can work practically without this but let's just make one hero service typescript not a hero but rather the product service and here we are going to export one class that will extend the entity collection service base and instead of the hero here we are going to provide the product and let's import all other necessary libraries and here we will basically tell the ngrx data that for the product we want to use this service elements factory we can again extend a lot of these things but depending on the level of configuration you need you might as well either work without ngrx data or adjust your back end so that it fits to what the front end is expecting then this service has some hero service that actually needs to be the product service it has the mentioned methods that we talked about so that we can just use the this product service to get all the entities from the back end now let's see what is going on with our application maybe it's working still nothing that's because we are not even calling this service so if i would now to call this method that will retrieve all the uh entities inside of our smart component here the list display component so i can do what they are doing basically we can get the entities and the loading state here inside of constructor so we don't need this store anymore and we can just say that these products are hero not the hero entities but it should be the private products service product service right the one that we've just made this product service will then give us all the entities and all the loading parameters let's create this field for the loading observer or the observable and that will show us when the ngrx data library is doing something on the on the back end when the effects are active now on the init we can just call this product service and we can see that we have the get all or even get with query get one etc we will start with get all just to see what's going on if we try our application now and if we go to our products module we can see that it is actually trying to call the slash api slash products endpoint even without us configuring anything inside of our service we don't need to tell it where it should look it will by default go go to the slash api and slash products in this case because that's our entity definition however in our case uh our back end is not on localhost 42 4200 it is actually in the localhost 3 000. so we need to tell this ngrx data extension uh where we want it to look for the data because some sometimes our api will be on a maybe different server or a different endpoint than what they are expecting and that is very easy to extend we can just follow the documentation for that and go with the entity data service which is basically doing the communication with the backend and we can see that we can here have the default data service configuration where we can put some different parameters like the root of the web server that we are going to use or the timeout and if i would just to put that inside of our for example at modules for now it doesn't matter of course you can put it where you where it suits most for your project project and here instead of this uh sample we are going to provide the local host 3000 and we can remove this request timeout let's use the default and if i were to refresh now let's see what happens there are some there is an error and that is because i'm not even providing this data service config and that is being done by using the uh this object that will basically tell our application that when it is expecting to use the default data service config we are going to provide this our value that we've just initialized here so this even though they have a similar name we can just change the name to make it more clear so we can say that provide default data service configuration and then use value we can just call it custom data service configuration and that will be this one here so we are just overwriting the default uh configuration that our ngox data library is using and if we go now to our website we can see that it is getting the four books that we've copied the two similar ones and the ford and it is fetching that from the products localhost 3000 slash products our fake json backend and that is basically all there is needed to installing and to use this extension without us having to write a single reducer single action single selector no effects nothing that is why it's very easy to use the ngox date as long as our project and our problem fits inside those limitations that it has so now instead of having to use all these actions here we can just remove these actions delete the file completely we can then remove these effects that are communicating with the backend and we can even remove this reducer index file and remove the reducer itself and all the selectors that come with it and we will get a lot of uh import problems because we just deleted the files but if i quickly remove this product actions expectations and if i would remove this code that we used before and all these imports from there we can see that our products are being retrieved and that is all done by the ngrx data extension by default so it's doing a lot of heavy lifting behind the scenes of course again adding to riddling list and removing for reading list it's a different part of our store so we would need actions and things for that but for the retrieving the data we can just use the get all we can just uh when we need to update the data back to the server then we can just use this method called update or we can even delete from the back end or add the new hero which is basically a most useful tool for the credit the typical create read update and delete operations that we might do on the backend if you're making the administration part of your application for example where all these methods can be used there are several more for example in our case here we had uh the search if you recall so using this search will basically require us to post to uh provide some get parameters uh with our request and for that we can use this uh not this get all but we can use the get with query here in the data services and then we can provide the query parameters so let's quickly just do that to show how it's used so instead of our app module here sorry our component using the get all we can provide the get with query and then we can provide that the query parameter q should have the value of njrx for example or something that we are providing from our application and then we can release all those uh values and parameters and we can see that the q value here is being actually appended to our query so we can see that it's being called with that additional parameter so that the server can filter our data and this is a similar way you would do the backend pagination again assuming that your back end is actually following this clean way of returning entities and not to the nested way as the google books is returning here so you cannot have several levels of it maybe you can easily make it to work i never had a need to use this library that deep so again this library is very useful if you're making for example administration for your own systems where it can save you a lot of time if you have several of the api points with the entities that are provided in a similar fashion you can just quickly put the something on the front end that will list delete and update and add new entities inside of your uh api so i hope that this was useful like and subscribe and i will see you in the next video and here is a joke for you you

Channel: Applicable Programming

Views: 3,769

Keywords: programming, web development, tutorial, php oop project, NgRx tutorial, NgRx Store, NgRx data, NgRx Data Angular, NgRx Data Angular 8, NgRx Data Angular 10, ngrx entity vs ngrx data, angular ngrx data, angular ngrx data tutorial, angular ngrx tutorial, angular ngrx store crud example, ngrx store angular 10, applicable programming, ngrx data angular, ngrx data john papa, ngrx store tutorial, ngrx angular 10, ngrx angular 8

Id: TenetyDn4XM

Length: 17min 23sec (1043 seconds)

Published: Tue Dec 22 2020