Contact us
8 minutes read

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.

Custom code is written in the files below:

Service

Effects

User list component

What is more important is that NgRx suggests using @ngrx/entity for CRUD operations.

It has a lot of functionalities to help get rid of duplication of the same code again and again. Managing the state becomes easier and dispatch calls become readable because they do exactly what their names say.

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

Dispatch actions

See the example above. Below is the adding of a user.

Connect view (integrate received data into a template)

Summary

In a few steps, you can get a complete functional module that executes the basic CRUD operations.

I am 100% sure that advanced setup won’t be an issue. Use schematics, build quickly, and develop great apps using less effort because there are so many useful tools around and yet many of them remain unused.

Want to dig deeper? Let us know.

0 people like this

This website uses cookies to ensure you get the best experience on our website.

Learn more
Thank you for getting in touch!
We'll get back to you soon.
Sending error!
Please try again later.
Thank you, your message has been sent.
Please try again later, or contact directly through email:
Format: doc, docx, rtf, txt, odt, pdf (5Mb max size)
Validate the captcha
Thank you, your message has been sent.
Please try again later, or contact directly through email: