Création d’une application ANGULAR avec NGRX (PATTERN REDUX)

NGRX propose une conception du développement d’applications qui tourne autour des actions utilisateurs et serveur.

L’objectif est de supprimer la manipulation de données entre les composants et service ANGULAR pour les centraliser dans un objet global, qu’on pourra modifier seulement via des actions typées.

REDUX

REDUX est un pattern né de FLUX, une architecture créée par Facebook. Il apporte un workflow de données unidirectionnelles grâce à un dispatcher, qui recueille des actions distribuées par le serveur ou par l’utilisateur. Il conserve la nouvelle instance d’une donnée dans un ou plusieurs stores qui mettent à jour la vue.

Redux est une version moins complexe de Flux. Il se distingue en plusieurs points :

• Un store, donc une source de données ;
• Des états immuables / immutables (qui ne peuvent changer);
• Pas de dispatcher.

Le Store, la base de tout

Le store est une fonction qui contient l’état des reducers, un getter, une fonction de dispatch et des subscribers.

Elle utilise les Observables pour communiquer la mise à jour des états dans les composants Angular.

Installation

npm install @ngrx/effects @ngrx/entity @ngrx/store @ngrx/store-devtools rxjs-compat — save

Redux Devtools

Il existe une extension de Chrome pour le développement avec Redux : Redux DevTools. Pour l’installer sur le projet, il faut le package @ngrx/store-devtools.

Redux DevTools vous permettra de voir chaque changement de state, de conserver un historique et de faire un export de vos states (et inversement).

@Ngrx/Entity

Chaque action réalise une itération sur notre liste. Dans le cas où celle-ci contient des milliers de matières, une baisse de performances aura lieu.

Avec le module Ngrx/entity, il permet de prendre facilement en entrée un tableau, de créer une entité avec un adapter puis à rendre un tableau lors du selector. De plus, il nous fournit des méthodes pour traiter directement avec notre entité comme AddOne ou AddMany.

INTERFACE MATIERE

Les actions

Les actions sont des objets. Elles contiennent au minimum une propriété type.

Les actions sont des messages distribués pour mettre à jour l’état dans le store.

Reducers

Reducer est une fonction pure, il est à peu près équivalent à la table dans la base de données de manière à fournir une tranche de données.

Il prend deux arguments état et action et renvoie un nouvel état. Cela ne modifie pas l’état.

Le reducer est simple. Il est basé sur trois principes de base de redux :

1. Source unique de vérité : l’état de l’application entière est stocké dans un seul store.
2. L’état est en lecture seule : l’état ne peut être mis à jour que par l’envoi d’actions.
3. Les changements sont faits avec des fonctions pures : les reducers ne transforment jamais l’état précédent, ils retournent toujours le nouvel état basé sur l’état actuel et l’action.

Selectors

Les sélecteurs sont des fonctions pures qui prennent des tranches d’état en argument et renvoient des données d’état que nous pouvons transmettre à nos composants.

ENVIRONMENT

SERVICE MATIERE

Effects

Effects est un second module de NGRX. Il vous fournit des listenners d’actions qui peuvent effectuer des fonctions et retourner une nouvelle action. Par exemple , à la ligne 15 on appel la méthode getMatiere du serviceMatiere. Aussi à la ligne 16, on retourne une nouvelle action successInitMatieres.

Le root reducer

Le root reducer est un simple objet qui a pour propriété des fonctions. Celles-ci représentent l’ensemble des changements de l’application (voir ligne 8 à 10).

MISE A JOUR MODULE RACINE

COMPONENT MATIERE

Nous avons juste besoin d’envoyer (dispatcher) des actions depuis le composant MatieresComponent (voir ligne 28).

Nous aurions un store disponible dans le constructeur. NGRX fournit une fonction select pour récupérer l’état, et il renvoie observable afin que nous puissions y souscrire à chaque fois que le store est mis à jour.

TEMPLATE HTML

COMPOSANT AJOUT MATIERE

TEMPLATE HTML

MISE A JOUR DU MODULE RACINE

RESULTAT