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 :
-
- un dossier : store/reducers
- un fichier : index.ts
- 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 ? 