A la découverte de ngrx avec Angular 9–Etape 1

Si vous venez de ReactJs, vous devez sans connaître Redux, la librairie d’unification des états de votre application. Et bien, sachez qu’il existe une librairie qui s’en est inspirée pour Angular : ngrx.
Elle utilise les même principes : Actions, Reducers et Selectors. Découvrons ensemble comment l’intégrer dans votre projet Angular.

 

Première étape : ajout du package ngrx

Lancez la commande npm install @ngrx/store –save-dev

Ajout de Schematics spécifiques ngrx

Une seconde partie intéressante est d’ajouter les schematics pour avoir un CLI qui nous génère les bonnes classes tout bien comme il faut

npm install @ngrx/schematics –save

Puis de l’installer avec le CLI ng :

ng add @ngrx/schematics

 

Ajout des outils de debuggage pour ngrx

Lancez la commande

npm install –save @ngrx/store-devtools

 

Seconde étape : Paramétrage de notre application pour fonctionner avec ngrx

Rappelons ici l’architecture globale du fonctionnement de ngrx :

 

Nous notons l’importance du Store, qui est la classe référente, celle qui permet de centraliser les états de l’application Angular.

 

Nécessité d’avoir un index contenant tous les Reducers

Une norme proposée par les schematics dédiées à NgRx, est d’ajouter un fichier index.ts qui va être le proxy de tous les reducers.

 

Lancez la commande :

ng generate store State –root –statePath store/reducers –module app.module.ts

 

Vous devrez avoir dans votre projet :

1. 1. un dossier : store/reducers
   2. un fichier : index.ts
   3. une mise à jour de votre app.module, avec :

StoreModule.forRoot(reducers, {

metaReducers,

runtimeChecks: {

strictStateImmutability: true,

strictActionImmutability: true,

}

}),

 

Préparons notre premier composant qui va s’appuyer sur le Store nouvelle créé

Pour nous faciliter la création des components avec NgRx, les schematics nous propose de créer des Containers : ce sont des composants utilisant ngrx.

 

Lancez la commande :

ng g container wookies –state store/reducers/index.ts –stateInterface State

 

Vous devez obtenir un composant avec l’appel de votre Store nouvellement créé :

@Component({

selector: ‘app-wookies’,

templateUrl: ‘./wookies.component.html’,

styleUrls: [‘./wookies.component.css’]

})

export class WookiesComponent implements OnInit {

wookies$: Observable<Wookie[]>;

constructor(private store: Store<fromStore.State>) { }

ngOnInit(): void {

// this.wookies$ = this.store.select(fromStore.reducers.wookies)

  }

}

 

Next step : la création de notre reducer dédié à la récupération des wookies

Maintenant que nous avons l’index.ts, nous allons pouvoir le mettre à jour avec nos reducers.

Chaque reducer va gérer ses propres actions de mise à jour du store.

 

Lancez la commande :

ng g reducer store/reducers/wookies –reducers index.ts

Il vous invitera à gérer ou non les actions de succès et d’échec, et de gérer l’action d’initialisation.

 

Reste une dernière étape : Préparation de nos actions dédiées aux Wookies

Nous allons ajouter nos actions pour être appelées depuis notre composant, et lancer la mise à jour de notre Store.

 

Lancez la commande :

ng generate action store/actions/wookies

Vous allez obtenir une action dédiée pour les wookies.

 

Améliorer la présentation des actions créées, avec un enum, c’est plus propre quand même

 

import { createAction, props } from ‘@ngrx/store’;

export enum WookiesActionsType {

load = ‘[Wookie] Load Wookies’,

loadSuccess = ‘[Wookie] Load Wookies Success’,

loadFailure = ‘[Wookie] Load Wookies Failure’

}

export const loadWookies = createAction(

WookiesActionsType.load

);

export const loadWookiesSuccess = createAction(

WookiesActionsType.loadSuccess,

props<{ data: any }>()

);

export const loadWookiesFailure = createAction(

WookiesActionsType.loadFailure,

props<{ error: any }>()

);

 

 

Prochaine étape – Mise à jour de notre reducer et appel dans notre composant

Dans le prochain article, nous allons mettre à jour notre reducer, appeler l’action dans notre coposant.

Et puis, dans l’article d’après, nous verrons, grâce aux effects, la possibilité de mettre à jour réellement notre Store et son état.

 

Vous en pensez quoi de ngrx ? Une sacré architecture, non ?