Simplify Collection Management with ngrx Entity in Angular
Data manipulation on collections can be expensive because it is usually necessary to iterate over the collection at least once to perform any kind of update or selection to it. A common pattern for avoiding expensive iterations is to break a collection into a key-value store that allows for instantaneous lookup of value provided you have the key. We could handle this data transformation ourselves but ngrx entity was created to do all the heavy lifting for us. In this lesson, we will see how to update how we define our feature state to use EntityState, create an EntityAdapter, define our initial state using our adapter and most importantly, how to leverage the convenience methods that the adapter gives us in our reducer. We will also examine how ngrx entity changes the shape of our state by splitting our collection into ids and entities and how to update our feature selector to work with it.
@Lukas The remapping of projects to observable stream seems awkward. Why would we use an entity adapter to make this nice structure only to use an inefficient remapping of key value pairs.
this.projects$ = store.pipe(
select('projects'),
map(data => data.entities),
map(entity => Object.keys(entity).map(k => entity[k]))
);This seems bad. Is the entityAdapter overkill if we have to remap like this to show it in the view? What happens if our list of projects is >1000?
Keep watching 😀 I would never do this in "real life" as that is what selectors are for
Keep watching 😀 I would never do this in "real life" as that is what selectors are for
Haha, sorry. I spoke too soon!
No worries at all! #highFive