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

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

March 17, 2020
by Mykhailo Shevchenko

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 https://angular.io/cli

Why are schematics good?

Angular Framework has strict rules (MVC), so there is no point to overmind the structure. This is where schematics are helpful — they do pretty much all the same as devs — write code, but faster. If the developer knows the command-line interface well enough and uses it to type code — he will complete the setup of a new project pretty fast and use the time left for much more complicated things.

Main App

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

I should mention that this application was made very fast 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.

why ngrx

Custom code is written in files below:

Service

Service

Effects

Effects

User List Component

User List Component

What is more important is that NgRx suggests using @ngrx/entity for CRUD operations. And it has a lot of functionality 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 are.

Redux Entity Reducer

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

create actions

Create Reducer

create reducer

Create Http Calls

It should be done custom. See the example Above.

Create Effects

create effects

Create Selectors

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

Use Selectors

selectorsts

Dispatch Actions

See Example Above. Below is Adding of a user.

usercomponentts

Connect View (integrate received data into a template)

user-listcomponent

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 fast and develop great apps using less effort because there are so many useful tools around and yet many of them just remain without use.


COMMENTS
It`s all about People
151 New Park Ave, Hartford, CT 06106
Lviv 102, Ivan Franko str
Ivano-Frankivsk 34, Sakharova Str
Follow us