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.
Custom code is written in files below:
Service
Effects
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.
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 Reducer
Create Http Calls
It should be done custom. See the example Above.
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
Dispatch Actions
See Example Above. Below is 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 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.
