Learn @ngrx/entity and Feature Modules

the worst thing about ng Rx is the sheer amount of code that it takes to build anything but you're rewarded for that extra effort with a global data store that's easy to test and debug and cool things like the Redux dev tools here on the right to address the amount of boilerplate code in ng rx they recently released a new package called entity it provides a standardized way to manage collections of objects and perform basic credence on them in this episode I'm going to use entity to build this basic Pizza ordering app here on the left and I'm also going to show you how to build feature modules with ng Rx if you're new to my channel make sure to subscribe and if you're new to ng Rx check out my previous QuickStart tutorial which is a much easier introduction into these concepts I am starting out with a brand new angular app called ng rx pizza so will CD into that directory and then install store and entity from there I create a new module called pizza this will be our feature module then I'm going to add a single component to it we'll just call that component pizza order then we'll open the module up and import the store module then I'm importing a reducer that has not yet been created but we're going to get into that a little bit later we're going to add the store module to the import section and then call for feature with the name of our reducer and the reducer itself this approach is trivial here because we only have one feature but when you have multiple features this will help keep your code much more organized so the next step is to create a directory called reducers in the app directory and then inside that create a file called index is then we'll import action reducer map and our pizza reducer and then we'll export all of our reducers as a single constant in this example we only have one but you can imagine how much more convenient this would be if you had 10 different reducers to manage at this point we're ready to jump over to the app module then import the store module as well as optionally the dev tools module and then we're going to import our pizza module that we just created as well as the reducers index file that we just created now we can just import the store module for route and pass it the reducers object then we can go ahead and add dev tools here and we'll also add our to module 2 imports that's it for our feature module now we can get into entity to start building an actual I'm going to start by building a pizza reducer ts file inside the pizza directory and then I'm importing actions here which we haven't created yet but we'll do that in the next step and a few other ng rx parts that we'll see in use here in just a second the first thing we'll do is create a basic interface that defines how our data is going to look the pizza interface is only going to have an ID and a size so extremely simple here then we use this interface to create an entity adapter which is going to format the data in a specific way as well as provide access to a number of different helpers for performing crud operations the next step is to make sure our Pizza interface is part of the main app state we do that by extending the state interface with the entity state interface type to our pizza interface that sounded extremely confusing so let's take a closer look at what the entity state really is by creating a plain JavaScript object out of it the entity state is just an interface that gives our data a consistent structure first we have an array of IDs and this makes it possible to order all of our entities then entities is an object where each key and that object corresponds to an ID in the array this structure means you can keep track of order based on the index in the array or you can just grab a single object by calling the key and the entities object so we're just going to use this default object as our initial state to do that we define a new variable called initial state and then on the adapter we call get initial state and finally pass it the default data that we want to set before we actually create the reducer function I'm going to create some actions to use in that reducer if you're already familiar with ng rx the actions work in exactly the same way as they do with the normal library as they do an entity let's start by creating three simple actions create update and delete for each of these will create its own custom class and that class will have a data payload that needs to be formatted in a certain way it's pretty intuitive the data is defined in the constructor and for a create operation we just want to pass it data that represents that object so in this case it would just be a pizza object that adheres to our Pizza interphase the update action is a little more interesting we want to change an existing object without affecting all of its other already defined properties so to do that we'll go ahead and pass the constructor an ID and then we'll also pass it some data but only do a partial on the pizza interface so this allows us to update single properties on an object with that interface and finally to delete an object we can just pass in an ID to look it up in the store and we'll finish it off by exporting all these actions as a single type I realize this has been super fast but remember you can get all of the source code at angular firebase.com or github now we're ready to go back and finish up the reducer function you might be used to using the spread syntax or object to sign in your reducer functions but now we're actually going to use the entity adapters instead just like any other reducer will pass at the previous state as well as the corresponding action and then we'll set up the switch statement and start updating our state keep in mind that entity provides a whole bunch of other adapter methods beyond the ones that I showed you here to add a single object to the store we just use the add one method and then pass that object payload from the action then we pass the previous state as a second argument from there we can move on to update and it's going to use the update 1 method this one needs the object ID as well as the data that we want to update at this point you're probably noticing how the action payloads correspond to the required arguments for these adapter methods lastly we'll set up delete and this one is handled by the remove 1 adapter method that takes care of the reducer now we need to set up some selectors so we can actually retrieve data from the store the cool thing about entity is it has a whole bunch of default ways for retrieving data for example we could get an array of IDs or just the entities or all the data together first we need to create a feature selector which I'm going to call get pizza state then we can export the default selectors then set them equal to the pizza adapter get selectors method with get pizza state as an argument we'll be able to use these when we call store select to get the data in a predefined format let's head over to the pizza order component to see this in action I'm going to import the actions as well as the reducer but I'm going to call the reducer from Pizza this is just a convention that is in the example app for NG rx first I set up a variable for the actual observable pizzas that will loop over in the HTML and then when I inject the store in the constructor I add the pizza state to it to get the actual pizzas observable I'm going to call store select and then from pizza with the selector that we want which in this case we'll just do select all that will get the data from the store now we're just going to set up a few event handlers here to trigger the various actions for the create action I'm just gonna create some dummy data here and give it a pseudo-random ID here by just calling some random milliseconds from the JavaScript data object but that's not something you want to do in a real app normally you would have that ID coming from a database or some other mechanism but for now we'll use this data to update the store by calling dispatch with an instance of the create action all of the other buttons will work in exactly the same way we just take the data from the HTML and then send it via the corresponding action we finally made it down to the HTML so I'm declaring that pizza order component in the app component and then I'll switch back to our pizza order component HTML and first we'll set up an ng for loop here with the async pipe to loop over our observable then right below that I set up a button to create a new pizza which should update the list that we're looking at in the front-end for each individual pizza inside the loop I'm just going to display some basic data and then I'll set up individual buttons to run the update action so we're gonna say if the pizza size is small and the user clicks the button we're going to pass the pizza ID as well as large so that I'll upgrade their pizza to a large size and then we'll do the exact opposite here if the pizza is large then we'll downgrade it to a small size for delete we can do the exact same thing but we only need to pass it the ID if we first load the app you can see we get the default pizza here which if you remember had an ID of one two three and then we can upgrade it or downgrade it or delete it then if we pull up Redux step tools we can get a better idea of what our state tree looks like every time we click create pizza you can see we get a new entity added to our state tree here overall I'd say I'm pretty impressed with this new addition to ng rx it can definitely provide more consistency to the way you deal with credence throughout the app if this video helped you please like and subscribe and if you want to take your ng rx app to the next level consider becoming a pro subscriber at angular firebase comm you'll get access to one on one project support as well as a whole bunch of exclusive content thanks for watching and I'll see you next time [Music] [Applause] [Music]

Channel: Fireship

Views: 46,903

Keywords: angular, angular 4, angular 2, webdev, app development, typescript, javascript, lesson, tutorial, ngrx, ngrx redux, ngrx entity, ngrx crud, ngrx tutorial, learn ngrx, angular redux, ngrx feature module

Id: 8Wy1AqY5gqE

Length: 9min 49sec (589 seconds)

Published: Thu Oct 26 2017