Tuesday, 19 June, 2018 UTC

Angular ngrx with schematics

Angular ngrx with schematics

Summary

I found ngrx one of the really cool things that has been added in the Angular universe and I tried to use it as much as I can from the really beginning.
The biggest problem I had all the time I started a new project was to set up the envirornment and the boilerplate that I have to copy paste all the time so I ended up to not using it a lot being conscious that is really cool and use-full to use.
Yesterday however on twitter I saw the twit from @ngHouston about NgRx Schematics with Vitali Borov and despite it’s a really great video I got slightly confused so I decided to write down all the step that he did and finalise the StarWars example
As usual the first thing we need to do is setup our project with cli and install all the dependencies:
 ng new swkb -p=swkb --style=scss
ng add @angular/material
We’ll generate all the modules and components we need to use:
ng g module heroes
ng g component heroes/hero-list
ng g component heroes/hero
ng g interface heroes/models/Hero
ng g service heroes/swapi
We Include the HeroModule and MatToolbarModule (from material) in the app.module.ts:
imports: [
 ...
 MatToolbarModule,
 HeroesModule
],
We Change the heroes.module.ts:
  • import same material modules;
  • add the provider SwapiService;
  • export the component HeroListComponent.
404: Not Found
and we remove the `root` from the swapi.service.ts because we want it available just in our module:
@Injectable()
It’s always good practice to define an interface that define our data structure. We implement the interface model/hero.ts in modules:
404: Not Found
We pass the hero list as input in hero.component.ts:
@Input() hero: Hero;
And some good UI to display all we want – hero.component.html:
404: Not Found
Is time to move to our list component that will display the list of hour star wars heroes:
404: Not Found
Define hero-list.component.html:
404: Not Found
The swapi.service.ts will display the list of heroes fetching the data from the public api `https://swapi.co/api/` :
404: Not Found
Finally we open app.component.html and replace the content as follow:
404: Not Found
Our scaffolding is done if we run ng serve we should see the toolbar and the prev and next button. Now is time to add @ngrx and use the schematics provided by @angular/cli.
yarn add @ngrx/{store,effects,entity,store-devtools}
yarn add -D @ngrx/schematics
One really cool command is the follow:
ng config cli.defaultCollection @ngrx/schematics
It will extend the base behaviour of cli, so, instead of typing 
ng g @ngrx/scchematics:store
we can type: 
ng g store
It will add at the end of angular.json:
"cli": {
    "defaultCollection": "@ngrx/schematics"
  }
Let’s use now the cli to generate our ngrx stuff for us:
1)
ng g store State --root --module=app.module.ts
will generate a reducer (State) and will setup our app module to use ngrx.
If we open our app.module.ts will see :
404: Not Found

2) 
ng g effect App --root --module=app.module.ts
that generates the app.effects.ts and will include it in our app.module.ts
3)
ng g feature heroes/Heroes --reducers=../reducers/index.ts
will generate actions,reducer and effects for the heroes.
In the video Bobrov will show how to set up your schematics to generate also actions with the cli…I can say that is not so straightforward so I’ll do manually but if you interested on it have a look on the video linked at the end of the post to see how he does it.
Our schematics have pretty much setup everything for use, so we just need to implement the code to make everything working correctly.
1) We start from the heroes.actions.ts defining 3 action for Fetch, Success and Error and one to paginate(prev, next):
404: Not Found
2) We implement the reducer (heroes.reducer.ts):
2.1) We describe what our state will contain
404: Not Found
2.2) The initial state:
404: Not Found

2.3) How we behave when we’ll receive a specific action (FetchHeroes, FetchHeroesSuccess, FetchHeroesError, ChangePage):
404: Not Found

3)In the heroes.effect.ts we’ll fetch the heroes from the service and we paginate the results
404: Not Found

4) in the file reducer/index.ts we export all the selector we created:
404: Not Found

Last but not least we need to use them in our hero-list component.
In the module:
4.1) in the heroes.module.ts we need to import our effects:
EffectsModule.forFeature([HeroesEffects])
In the hero-list.component.ts and implement the methods that we defined at the beginning:
4.2) In the constructor:
constructor(private store: Store) { }
4.2) onInit we select from the store the current status of heroes, first, last and if isLoading and we dispatch the action to load the heroes:
404: Not Found
4.3) on prev and next we dispatch the 2 actions:
404: Not Found
And voila’ we implemented our star Wars hero list.
If you get lost in some step this is the full repo(https://github.com/vitaliy-bobrov/ngrx-swkb)
If you enjoyed it follow me on twitter @DZurico.
Resources
– https://www.youtube.com/watch?v=qyymWyiZYNY&index=8&t=10s&list=PLzY4oXoQckIYIkysMNG1MwZE3MRoWZULx
The post Angular ngrx with schematics appeared first on Angular and Javascript blog.

... more @ dzurico.com

dzurico.com