Simplifiez votre code angulaire avec les entités NgRx

Cet été, j'ai rafraîchi mes compétences NgRx en créant une petite application pour gérer mes endroits préférés. Au cours de ce processus, j'ai apprécié NgRx car j'avais un réel contrôle sur l'état de mon application.

Une chose qui a fait beaucoup de bruit était le nombre de sélecteurs et d'actions à définir pour les opérations CRUD. Dans mon projet personnel, cela n'a pas posé trop de problèmes, mais lorsque je construisais une grande application avec de nombreuses tranches et sections, ainsi que des sélecteurs et des réducteurs, le code devenait plus difficile à maintenir.

Par exemple, l'écriture d'actions de réussite, d'erreur, de mise à jour et de suppression, ainsi que des sélecteurs pour chaque opération, augmentait la complexité et nécessitait davantage de tests.

C'est là que les Entités NgRx entrent en jeu. Les Entités NgRx réduisent le code passe-partout, simplifient les tests, accélèrent les délais de livraison et maintiennent la base de code plus maintenable. Dans cet article, je vais vous guider dans la refactorisation de la gestion de l'état des lieux dans mon projet à l'aide de NgRx Entities pour simplifier la logique CRUD.

Quoi et pourquoi les entités NgRx ?

Avant de plonger dans le code, comprenons d'abord ce que sont les Entités NgRx et pourquoi vous devriez envisager de les utiliser.

Qu'est-ce que @NgRx/Entités

NgRx Entities est une extension de NgRx qui simplifie le travail avec les collections de données. Il fournit un ensemble d'utilitaires qui facilitent l'exécution d'opérations telles que l'ajout, la mise à jour et la suppression d'entités de l'état, ainsi que la sélection d'entités dans le magasin.

Pourquoi dois-je passer aux entités NgRx ?

Lors de la création d'opérations CRUD pour les collections, l'écriture manuelle de méthodes dans le réducteur et la création de sélecteurs répétitifs pour chaque opération peuvent être fastidieuses et sujettes aux erreurs. NgRx Entities décharge une grande partie de cette responsabilité, réduisant ainsi la quantité de code que vous devez écrire et maintenir. En minimisant le code passe-partout, NgRx Entities contribue à réduire la dette technique et à simplifier la gestion de l'état dans les applications plus volumineuses.

Comment ça marche ?

NgRx Entities fournit des outils tels que EntityState, EntityAdapter et sélecteurs prédéfinis pour rationaliser le travail avec les collections.

État d'entité

L'interface EntityState est le cœur de NgRx Entities. Il stocke la collection d'entités à l'aide de deux propriétés clés :

• ids : un tableau d'identifiants d'entité.

• entités : un dictionnaire où chaque entité est stockée par son identifiant.
  

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

En savoir plus sur l'état de l'entité

Adaptateur d'entité

Le EntityAdapter est créé à l'aide de la fonction createEntityAdapter. Il fournit de nombreuses méthodes d'assistance pour gérer les entités dans l'état, telles que l'ajout, la mise à jour et la suppression d'entités. De plus, vous pouvez configurer la manière dont l'entité est identifiée et triée.

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Le EntityAdapter vous permet également de définir comment les entités sont identifiées (selectId) et comment la collection doit être triée à l'aide du sortComparer.

En savoir plus sur EntityAdapter

Maintenant que nous comprenons les bases, voyons comment nous pouvons refactoriser la gestion de l'état des lieux dans notre application à l'aide de Entités NgRx

Projet de configuration

Tout d'abord, clonez le référentiel de l'article précédent et passez à la branche qui a la configuration de base de CRUD :

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

?Cet article fait partie de ma série sur l'apprentissage de NgRx. Si vous souhaitez suivre, veuillez le consulter.

https://www.danywalls.com/understanding-when-and-why-to-implement-ngrx-in-angular

https://www.danywalls.com/how-to-debug-ngrx-using-redux-devtools

https://www.danywalls.com/how-to-implement-actioncreationgroup-in-ngrx

https://www.danywalls.com/how-to-use-ngrx-selectors-in-angular

https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-c rud-avec-ngrx

https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store

Cette branche contient la configuration où NgRx est déjà installé et MockAPI.io est configuré pour les appels API.

Notre objectif est de utiliser les entités NgRx pour gérer les lieux, refactoriser les actionsions pour les opérations CRUD, mettre à jour les réducteur pour le simplifier à l'aide d'opérations d'adaptateur telles que l'ajout, la mise à jour et la suppression de lieux, utilisez des sélecteurs pour récupérer la liste des lieux du magasin.

Installation des entités NgRx

Tout d'abord, installez les dépendances du projet avec npm i, puis ajoutez des entités NgRx à l'aide de schémas en exécutant ng add @ngrx/entity.

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

Parfait, nous sommes prêts à démarrer notre refactor !

Refactoriser l'État

Dans la version précédente du projet, nous définissions manuellement des tableaux et des réducteurs pour gérer l'état. Avec NgRx Entities, nous laissons l'adaptateur gérer la logique de collecte pour nous.

Tout d'abord, ouvrez places.state.ts et refactorisez PlacesState pour qu'il s'étende à partir de EntityState.

npm i
ng add @ngrx/entity

Ensuite, initialisez l'adaptateur d'entité pour notre entité Place à l'aide de createEntityAdapter :

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Enfin, remplacez le initialState manuel par celui fourni par l'adaptateur en utilisant getInitialState :

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

Nous avons refactorisé l'état pour utiliser EntityState et initialisé EntityAdapter pour gérer automatiquement la liste des lieux.

passons à la mise à jour des actions pour utiliser les entités NgRx.

Refactoriser les actions

Dans les articles précédents, j'ai géré manuellement les mises à jour et les modifications des entités. Maintenant, nous allons utiliser NgRx Entities pour gérer les mises à jour partielles à l'aide de Update.

Dans places.actions.ts, nous mettons à jour l'action Update Place pour utiliser Update, qui nous permet de modifier seulement une partie d'une entité :

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

Parfait, nous avons mis à jour les actions pour fonctionner avec les Entités NgRx, en utilisant le type Update pour simplifier la gestion des mises à jour. Il est temps de voir comment cela affecte le réducteur et de le refactoriser pour utiliser les méthodes de l'adaptateur d'entité pour des opérations telles que l'ajout, la mise à jour et la suppression de lieux.

Refactoriser le réducteur

Le réducteur est l'endroit où NgRx Entities brille vraiment. Au lieu d'écrire une logique manuelle pour ajouter, mettre à jour et supprimer des lieux, nous utilisons désormais les méthodes fournies par l'adaptateur d'entité.

Voici comment nous pouvons simplifier le réducteur :

npm i
ng add @ngrx/entity

Nous avons utilisé des méthodes telles que addOne, updateOne, RemoveOne et setAll à partir de l'adaptateur pour gérer les entités de l'état.

D'autres méthodes utiles incluent :

• addMany : ajoute plusieurs entités.

• removeMany : supprime plusieurs entités par ID.

• upsertOne : ajoute ou met à jour une entité en fonction de son existence.

En savoir plus sur les méthodes de réduction dans EntityAdapter.

Une fois l'état, les actions et les réducteurs refactorisés, nous allons maintenant refactoriser les sélecteurs pour tirer parti des sélecteurs prédéfinis de NgRx Entities.

Refactoriser les sélecteurs

NgRx Entities fournit un ensemble de sélecteurs prédéfinis qui facilitent grandement l'interrogation du magasin. J'utiliserai des sélecteurs comme selectAll, selectEntities et selectIds directement depuis l'adaptateur.

Voici comment nous refactorisons les sélecteurs dans places.selectors.ts :

export type PlacesState = {
  placeSelected: Place | undefined;
  loading: boolean;
  error: string | undefined;
} & EntityState<Place>;

Ces sélecteurs intégrés réduisent considérablement le besoin de créer manuellement des sélecteurs pour accéder à l'état.

Après avoir refactorisé les sélecteurs pour utiliser ceux prédéfinis, réduisant ainsi le besoin de définir manuellement mes sélecteurs, il est temps de mettre à jour nos composants de formulaire pour refléter ces changements et utiliser le nouvel état et les nouvelles actions.

Mise à jour des composants du formulaire

Maintenant que l'état, les actions et les réducteurs ont été refactorisés, nous devons mettre à jour les composants du formulaire pour refléter ces changements.

Par exemple, dans PlaceFormComponent, nous pouvons mettre à jour la méthode de sauvegarde pour utiliser la méthode Update tapez lors de l'enregistrement des modifications :

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Nous avons mis à jour nos composants de formulaire pour utiliser les nouvelles actions et états refactorisés, passons à autre chose, vérifions nos effets pour nous assurer qu'ils fonctionnent correctement avec Entités NgRx

Effets de refactorisation

Enfin, je vais faire fonctionner les effets avec les Entités NgRx, il nous suffit de mettre à jour le PlacesPageActions.updatePlace en passant le bon Update objet dans l'effet updatePlaceEffect$.

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

Fait ! J'ai fait que notre application fonctionne avec NgRx Entities et la migration a été si simple !, la documentation de l'entité ngrx est très utile et

Conclusion

Après avoir déplacé mon code vers NgRx Entities, j'ai senti que cela aidait à réduire la complexité et le passe-partout lorsque l'on travaillait avec des collections. NgRx Entities simplifie le travail avec les collections et les interactions grâce à son grand nombre de méthodes pour la plupart des scénarios, éliminant une grande partie du code passe-partout nécessaire aux opérations CRUD.

J'espère que cet article vous motivera à utiliser les entités ngrx lorsque vous devez travailler avec des collections dans ngrx.

• code source : https://github.com/danywalls/start-with-ngrx/tree/ngrx-entities

Photo de Yonko Kilasi sur Unsplash

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!