Angular: Using NgRx Schematics & NgRx Entity to Speed Up Your Startup Development Process

Nowadays, we developers are so lazy that coding becomes stressful and annoying, but what if there is a way to lessen the pain? I bet that y’all have a “superscript” that can do everything that is needed while you are doing other work.

Today, I will share my experience of using Angular Schematics combined with NgRx Schematics and touch some of the NgRx topics like Store, Entity, and Effects.

What Are Schematics?

Schematics are simple commands for generating different parts of the source code faster by using a specific pattern.

• E.g.: Create components — ng generate component user-list.
• E.g.: ng generate module user.

Above you see the very basic Angular schematics. For more options and details refer to the Angular CLI.

Why Are Schematics Good?

The Angular framework has strict rules (MVC), so there is no point over-minding the structure. This is where schematics are helpful — they do pretty much the same as devs; write code, but faster.

If the developer knows the command-line interface well enough and uses it to type code, they will complete the setup of a new project pretty fast and use the time left for more complicated things.

Main App

I will introduce a simple application that will have Create, Read, and Delete using NgRx and which was mostly created using Angular/NgRx Schematics.

I should mention that this application was made very quickly and was meant to show how easy it is to create a simple CRUD with less effort.

Why NgRx?

• It is convenient.
• It makes you build a readable structure.
• It has schematics that will generate 70% of the code for you.

What makes them work as expected?

There are @ngrx/effects and HttpServices.

What they do is capture actions and execute @ngrx/entity actions that were generated. A simple flow to follow each time you create CRUD for an entity and that’s it.

But keep in mind that it is not necessary to use an entity for each part of your functionality. In general, it is all about how the reducer is written. You can completely ignore entity style and write a simple reducer using Actions, Effects, and Custom Reducer.

Flow

Create actions

ng generate @ngrx/schematics:action users/Users — group

Create reducer

ng generate @ngrx/schematics: reducer users/User — group

Create HTTP calls

It should be done custom. See the example above.

Create effects

ng generate @ngrx/schematics:effect users/Users -m users/users.module.ts — group

Create selectors

Always check if you need a custom selector, but I suggest always creating custom selectors inherited from base selectors.

Use selectors