Ultimate NGRX: Optimizing Datastructures with Entities

so I want to pause for a moment and actually talk about optimizing our data structures for performance reason so what we're going to do in this lesson is jump into our reducers file and here we're just saying that we simply have an array of pizzas now in a bigger application this is not going to scale or handle well when we want to do things very fast so thinking about using objects instead of an array might be a better approach so in this lesson what we're going to do instead of using an array we're actually going to change our data structure over to what we call an entity now in the server side you might have entities and we might look things up by IDs so in this case you can think of ng rx store as some kind of data base for the client we can then use the selectors which we've already created in previous videos to query that database and compose new objects and return them to our component so what we want to do now is refactor this over to become an entity so we're going to create an object which holds our entities and we're going to store them via an ID which is going to be of type number now every single entity will hold each particular pizza so instead of just having one data property we're going to have entities which contains all of our pizzas and each pizzas ID is going to be the key inside the object so let's move down to our initial state now we can say entities and what we'll do is just initialize that with a brand new empty object so what this means is when we scroll down we will be greeted with a small type script error it's just picked up that we're trying to assign an array or assign a property which doesn't exist to our application state now what we need to do is essentially convert an array data structure so what we've got is something that looks like this we've got an ID with for example 1 and we've got another ID with for example 2 now what we're going to do with entities is we're basically going to create something looks a little bit like this so we're gonna then have the ID of one and the name of the pizza which will be a string so we just say pizza for now and then we'll also have that toppings array which is then come back from the server what I'll do is just say pizza equals so we can see this a bit clearly typescript is just moaning that this has an any type so for now what we could do is just type this as any so we could see what is actually happening so we want to essentially take this data structure which is given to us as we've seen by the action payload and we want to convert it into a simple object lookup now when we do things like subscribe to route params so for instance you've probably seen whilst clicking through the application then when you go to a pizza we actually go to products /the pizza ID so it could be ID of one ID of two or three so you can see that the key of the object will contain the value of the ID of the object so what this means is we can actually be very quick we can say pizza bracket and that could be ID so we could say Const ID equals one and we can look up the exact pizza that we need very very quickly we don't have to iterate through a gigantic data set every single time so let's carry on what we want to do is convert an array into this nice object structure so for now what we can do is just remove these we don't need these anymore and we're going to change the data over to become pizzas and then we can remove this data property we don't need that data property anymore we're going to then create the entity's constant and then we're going to rebind that constant to our returned state now you could obviously break these types of things into a particular file where you can bring them in and convert a data structure to an entity of your liking for now what we're going to do and through this course we're going to just code these inside of the reducers themselves there's nothing stopping you creating a small helper function that you could just import to do this multiple places for multiple objects so what we're going to say is the const entities equals the pizzas and because this is an array you can see that we have these array methods now we're actually going to use the reduce method now the first argument that we're going to give is in fact the entities and the second argument will be each particular pizza so inside the body of the function what we're then going to do is then return a new data structure each time that this function is called so the reduced function accepts an initial value which you can see here so we're actually going to supply a brand new object as the initial value and what we're going to do is just merge all of the current entities into that object so we're not leaving anyone behind we're going to copy them in and then this gets passed as the entities through our reduced function now we could optionally just quickly type this entities so we're going to say that the type is going to be an object and it's going to have that ID of type number and each entity will then be a pizza so when we go inside of here and save this out this will become a little bit clearer for us to read so we should end up with something like this we're passing in these state entities we're copying them across as an initial state and what we now need to do inside of here is say return a new object now because we get this entities we want to spread this every time so we're going to merge the entities into the existing state and all we need to do now is just simply bind each pizza by its key so we can do square brackets pizza ID this is a new es6 syntax where you can dynamically create the properties from the ID so this is dynamically going to create one two or three as the object's key and now the value which is our pizza which we can also just type as pizza as well just for clarity this is then going to hold that pizza so we end up with the new data structure and what we'll do is rebind this to our return statement and then we're going to check it out in the Redux dev tools so we can add this to our return state we can save this out and hopefully this makes sense what we're doing here we're taking an array and we're flattening the array into just pure objects so we can look them up really fast I think about it in future when we want to remove something from an array we don't have to iterate it if we want to update it we don't have to go and find it we can just look it up on our data structure and just simply replace it so it makes these things a little bit easier as well so we're going to save this out just will actually break our selectors because underneath here we do not actually export these get pizzas so what I'm going to do is change this over to get Pizza entities and then we're going to return the entity's property of what I'll do is add this above just for consistency so now that we've renamed this we'll actually see that in our selectors file that we actually have a bug at the moment so we've got get pizzas but what we need is get pizzas entities so what I'm going to do is change that over now to prevent this actually erroring because the ng4 in our template is actually expecting an array now we are just giving it an object at this point in time so what I'm going to do is save that you can see that this is just reformatted and we'll go into this products and just comment out the pizza is observable so this will allow us to see our data structure in the Redux dev tools so we'll save this go back to the browser and we'll come back and we'll fix things up so back in the browser we've commented this out we have no pizzas add one to get started however what we're interested in is our dev tools now we haven't installed this yet I've installed it but you haven't installed it just yet so what you can do to install the Redux dev tools go across to extension dot remote dev do now you need Chrome or you need Firefox to install this that's the current support for this extension I'd highly recommend using it you can see every single action every single step all the state changes are represented in this dev tools so go ahead and install it this should work right away because we've already got that module installed to allow us to use the store dev tools so go ahead install it and then we'll come back to here click on the Redux panel now typically this will not load up the first time so what you have to do is just give it refresh so it can pick up your application so we can see a few interesting things here we can see that we got this load pizzas the load piece is success and then we can actually look through the different states so we can see the actions the states so let's start with the load pizzas and this will kind of give you a nice walk through to the dev tools so here we can see the tree what I like to look at is the raw because it gives you kind of a a nice diff of what's actually changed at that point in time so in our products we then have the pizzas and we're changing that loading from false to true we can also do things like have a look at the action this is the action that has been dispatched at this point in time we do not have a payload because we're just instructing that we want to load now if we actually look at the piece of success we can see something different so we have this payload and then further down will have that type load piece of success and you can see that this payload is an array which contains all of our pizzas now the interesting part is when we actually go back and look at the state and we can just have a look inside of here so we've got our products we've got our pizzas now what we just changed from the data which was an array is now a completely flattened object so you can see here that we have a key of one and we have the name of the pizza the topping so we're looking for an ID of one for this particular pizza this pizza has an ID of two further down under the toppings we can see two and similarly with the last piece that we have that ID of three and then we also have the loaded state changes so this is really really nice you can have a click around and familiarize yourself with what's going on here when we click on chart this gives us a really nice view and a representation of each individual item in our store so here we can see we have the pizzas then we have the entities and these then branch out to different entities and you can see all the information associated with them so let's go back and create one more selector which will finish off this video so we can actually see the pizzas that have been rendered let's go ahead what we can do for now is actually uncomment this even though it will throw an error and we'll just switch to our index ts which is inside the reducers folder so at the moment we're saying give me all the pizzas and we're passing in our pizza state which returns us the state dog pizzas so we just saw this when we printed this out in the Redux dev tools but now what we're doing is actually passing the entities as the second argument to this selector which means that we need to create another selector to allow us to actually get all of these pizzas as an array value we want them as an array we don't want them as objects so what we can do instead instead of creating this as get all pizzas we can rename this to get pizzas entities so we're using the same function names as before but we're just exporting them one level up we're not clashing with names or anything like this we actually want to create the ability for us to select all of the pizzas as an array so what we can say is export Const get all pizzas so what we're actually doing is replacing the selector with a new one now we can say create selector and we want to pass the get pizza entities as the first value so what we can say is get pizza entities now because this is a selector we can also use it as a function like we're doing here so we don't have to use these functions that are exported from different levels we can use the selectors to compose brand new state so what we actually get here is a function and we get given the entities because that is what we're passing through here the selector will then get cooled to the next one which will give us those entities so what we actually want to do inside of this function is return now the way that we can convert this object data structure into an array is actually quite simple so we can say object dot keys and then entities so what this will essentially do is give us an array of one two and three because those are the IDS that correspond to the pizzas and we can simply just say map now because we are using IDs each one of them will be a number now the object got keys actually returns as a string so you can see here that it says string array although ours are made up of numbers so we need to just simply convert this string into a number momentarily now because we're mapping over just the entities of the object we actually want to return each entity square bracket and we can look that entity up by its ID so all we're simply doing is something that looks like this and then we're then mapping over it and returning the actual entity the corresponds with each ID now we can see that we have this red underline because at this point object Keys returns a string so what we can say is pass integer and we're just going to use a base 10 as the value so this is what we should end up with we should have get all pizzas get pizza entities we get the entities as the first argument we're returning the object keys which then gives us every single key as a string we're then looping over those we get each ID and we're using that entities which is above to then look each item up by its ID and we just simply just passing that string in but converting it to a number now it depends how you're structuring things in your database you may use a completely different string or a number approach you may use a string with a unique hash for example which in this case you wouldn't need to actually convert this back to a number so that's pretty much it at this point we will have an array of our entities which is pretty much what we started with before we refactored our reducer so we can save this and we can go into the products component this is all looking good now so there's no red underline so we can safely save that out and we'll go back to the browser and check out this finished piece so back in the browser we're pretty much back to where we were in the previous video where we're displaying all of our pizzas however these are displays slightly differently we're composing them in the reducer as entities and then with a selector we're converting those entities into just a nice array so that we can then feed this into our ng 4 ng fork and then iterate over it nicely now it might be in multiple places that we want to use the pizzas as an array so this makes perfect sense to create a selector and the beauty with the selectors as they are reusable functions so we can use them in multiple places and we can also use selectors with other selectors so once we actually click through and in the next couple of chapters we're going to be creating some more advanced selectors which tie in things like the route of state how we actually load the toppings and display these toppings but for now what we've done and we can take a look in the Redux dev tools again we'll give this a quick refresh we can see that we have these entities and we are simply using the selector to then map that across and have returned us a brand new array

Channel: Todd Motto

Views: 20,634

Keywords: angular, ngrx, rxjs

Id: al0LNgH3I4A

Length: 16min 27sec (987 seconds)

Published: Sun Dec 03 2017