The Case for Always Using Ngrx/Entity

Angular: The Full Gamut Edition

Charlie Greenman
September 14, 2020
4 min read

What is Normalization

Normalization with regards to relational databases(a database structured to recognize relations among stored items of information) is to eliminate data redundancy, and anomalies regarding "Insertion", "Delete", and "Updating". Within a front end-setting, it is mostly the backend that deals with a large portion of eliminating data redundancy, and CRUD anomalies. However, there are many use cases "Insertion", "Delete", and "Updating" that can be solved by using normalization within the ngrx/platform.

If you want to read the very first publication by E. F. Codd on June 1970, on normalization, knock yourself out!


Why Ngrx/entity is Exciting!

"@ngrx/entity" for me personally, is the most exciting part of "@ngrx/platform" for two reasons:

  1. It is a library based on comp sci fundamentals of building relational databases.
  2. It introduces something novel to the Redux ecosystem (something

(For me personally, the Context and Hooks API did not give that sort of freshness)


Dissecting a Real World Example of @ngrx/entity

CodeBox Interface

Let’s imagine that we are building a Pixel Illustrator application. Something similar to this. One of our interfaces for the state contained within the CodeBox section would look something like this:

interface CodeBox {
  id: string;
  color: string;
  xPosition: number;
  yPosition: number;
}

Let’s imagine we have an array of CodeBox(AKA CodeBox[]) that we would like to use. If we want to select a specific slice of data within our database table, things can be tricky. We would need to loop through all the data and then find the set of data with the id/value that we want.

Instead, what would make our data table more efficient, is if we have an array of ids that corresponds directly to our dictionary of data. In our store, we can add some extra key values such as selectedId. This way, we can say the data that we would like is based on one or two parameters passed to a function. This can be re-used in other stores, as data is structured the same way, and selected in the same fashion.

@ngrx/entity Follows this Pattern

@ngrx/entity is a library which makes it, so that data within @ngrx/store is normalized. This means, within the context of using JSON data, that we have a dictionary, combined with an array of ids. The index of the ids directly correlates with the key/value in the dictionary. This is very powerful, and I will prove it by bringing up a couple of situations.


The Power of @ngrx/Entity Deep Dive

Scenario One

Updating one dictionary data set. Let’s imagine that we were to load for our Pixel Illustrator a set of coordinates to populate the pixel illustrator. However, let’s say we wanted to update one particular piece of that data set, by only a smaller portion of data, when loading the entire data set. Then, a larger portion when expanding details for a particular data set. @ngrx/entity allows us to maintain the same store, but simply update the one piece of data in the dictionary.

Scenario Two

Let’s say we have two independent components pulling data from the same store on the same page, but we do not want them to interact with each other. We would need to create a unique id for both that would allow us to follow this pattern. @ngrx/entity naturally allows us to pass in a unique id, that allows us to accomplish this correlation id pattern. This is such a powerful pattern.

Scenario Three

Let’s say we have a data table, and we would like to know which sets of data we have selected. We can pass in id, into another section of the data store, called selectedIds. We can then check multiple boxes(as an example), select multiple checkboxes, and know which data sets have been selected.

Scenario Four

Let’s say we want to delete, update, or upsert a certain subset of data. Being able to pass in the id only makes this process infinitely easier, and manipulating data scalable and maintainable.

These are just four real worlds scenarios, and the list goes on.


Choosing @ngrx/entity as the Default

This leads to the point this chapter is trying to make. In any situation with data, odds are that you are going to update, delete, upsert, or pull in more data for a specific subset of data. This means that anytime that you are going to use more data, using "@ngrx/entity" as the default makes sense.

Thank you for reading.

More articles similar to this

footer

Razroo is committed towards contributing to open source. Take the pledge towards open source by tweeting, #itaketherazroopledge to @_Razroo on twitter. One of our associates will get back to you and set you up with an open source project to work on.