Super Fast Stateful CRUD — A practical guide to NgRx Data

3 min readJul 22, 2019

I have been talking a lot about making CRUD faster since it is a big portion of all Frontend requests to the Backend. I made a post some weeks ago explaining how to create a Generic CRUD Service for Angular. Now let’s use significantly less code to make the same behavior, but set it on the ngrx store to use all the functionalities we love to use.

As always I have a Repository with some examples to help you.

Install and Configure

Let’s install some packages of @ngrx Stack:

yarn add @ngrx/{store,effects,entity,store-devtools,data}

First, let’s inject to AppModule the configurations we gonna create. The configurations we will add here is the entityConfig and the defaultDataServiceConfig.

The entityConfig will make all specifications of the entities we are going to add to the entityCache. We will define each entity we want to use in our application through ngrx data. The EntityDataModule will receive the entityConfig as a parameter to configure the application store.

The defaultDataServiceConfig will configure the endpoints to get the entity and the entity collections. Here we set the root endpoint to the backend and some not default endpoints, from another service endpoint, for example. It will override the EntityDataModule provider.

The Default Behavior

Suppose we need a collection of Post, by default the ngrx data will request from localhost:angular-port/posts, map the response body and store it.

The same occurs to fetch some post by id. Ngrx data will request from localhost:angular-port/post/:id, map the response body and store it.

It will always happen if you don’t configure:

Root endpoint will be the Angular Server;
Entity name will be the resource URL to LowerCase;
Collection endpoint will pluralize with ending-S;
Map the collections by id key;

By now I will not go deep into ngrx data configurations, but I will explain some basic improvements you can make to fit into your project.

The entityConfig

It will implement the interface EntityDataModuleConfig and contains the configurations of the of entityMetadata and others configs like pluralNames.

EntityMetadata is the most important config at this moment. It will have the hash of the entities we will store at entityCache.

At the code example, we have some entities mapped and I change the selectId from FooBar because of a FooBar instance has uuid instead of id.

At pluralNames we can fix the pluralize for no default pluralizes. Here we only need to modify the wrong ones, Hero to be Heroes, for example.

The defaultDataServiceConfig

As I defined above, here we can change the root endpoint from angular server to the real endpoint to fetch the entities.

We also can define some specific endpoints from the entityMetadata we defined.

At the example, we had to change the endpoints from Foobar to another backend service that is different from the rest of the application.

Using in the application

We can define a service to get the entries from the entityCache.

It will extend from the EntityCollectionServiceBase and inherit many methods and properties, including:

fetch Methods: getAll, getByKey, update, delete…;
state observables: entities$, loading$, loaded$

Just inject in the component and enjoy!

What else

At ngrx docs, we have some more explanations about the workflow and more examples.