Améliorer l'expérience de développement
En parlant avec des collègues de différentes entreprises, j'ai remarqué que tant d'équipes adorent NgRx. Lors de nos discussions, la pensée ne m'a pas quitté:
«Ce serait bien de conserver moins de code et de suivre davantage les guides d'écriture pour faciliter la mise à l'échelle ultérieure . »
Cela m'a incité à commencer à explorer diverses techniques de refactorisation Redux. J'ai regardé une vidéo, lu des articles et des documents Redux. Au final, j'ai écrit un plugin pour NgRx appelé NgRx Ducks
Buts
Fondamentalement, ngrx-ducks a été créé pour simplifier le travail avec NgRx.
- Gestion simplifiée des actions à l'aide de l' API Decorator , ce qui réduit la quantité de code qui doit être écrit afin de configurer à la fois le réducteur et le créateur d' action. NgRx Ducks génère automatiquement des créateurs d'action et des fonctionnalités de réduction.
- Moins d'assistance technique, car vous n'avez pas besoin d'écrire des énumérations ou des types d'union .
- Une logique d'application plus claire est fournie grâce à une API typée intuitive que vous pouvez utiliser en tant que service injectable , qui configure l'interaction avec le magasin pour vous.
Comment ça marche?
Cette bibliothèque fonctionne comme une couche supplémentaire sur NgRx. Il crée automatiquement des créateurs d'action et des fonctionnalités de réduction pour vous. De plus, vous obtenez un service que vous pouvez utiliser dans vos composants. Ce service fournit une API strictement typée qui permet à la fois de répartir les actions et de sélectionner les données du stockage.
La bibliothèque NgRx Ducks ne modifie pas le comportement NgRx existant. Il contrôle uniquement les référentiels observables et la méthode de répartition .
Étant donné que NgRx Ducks repose uniquement sur l' expédition et le fait que le référentiel fournit un observable, NgRx Ducks reste compatible avec NgRx, même s'il y a des changements critiques dans la version.
L'installation
NgRx Ducks s'intègre parfaitement avec un projet NgRx existant. Installez simplement le paquet npm et vous êtes prêt à partir.
npm install @co-it/ngrx-ducks
API Decorator
L'idée principale de NgRx Ducks est de combiner les types d'action et la logique des mutateurs ( également appelés réducteurs ). Par conséquent, le décorateur @Ducksify a été ajouté pour annoter une classe régulière.
import { Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter {}
Le décorateur vous permet de spécifier l'état initial de votre état. La réussite de initialState permet à NgRx Ducks de générer automatiquement une fonction de réduction ultérieurement.
Vous pouvez maintenant placer la logique de mutation directement dans la classe. Plus besoin d'écrire des expressions de casse de commutateur . Au lieu de cela, nous créons un mappage entre le type d'action et la logique de mutation à l'aide du décorateur d' action .
import { Action, Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ }) export class Counter { @Action('[Counter] Increase by passed value') increaseBy(state: number, payload: number): number { return state + payload; } }
NgRx Ducks mappe chaque action avec la logique de mutation correspondante. Duck contient toutes les informations nécessaires pour générer la fonction de réduction.
Fonction réducteur
Les fonctions de réduction sont générées automatiquement à l'aide de NgRx Ducks. La fabrique reducerFrom crée une table de recherche pour mapper chaque type d'action à sa logique de mutation correspondante.
import { reducerFrom, DucksifiedAction, ... } from '@co-it/ngrx-ducks'; export function reducer( state: number, action: DucksifiedAction): number { return reducerFrom(Counter)(state, action); }
Vous devez toujours encapsuler reducerFrom à l'intérieur de la fonction exportée pour fonctionner correctement avec le compilateur AoT .
Le réducteur généré doit être ajouté à ActionReducerMap à l' aide de NgRx ( voir l'exemple ci-dessous ).
Puissance de canard!
Le plus intéressant reste à venir! L'objectif de NgRx Ducks est de simplifier l'interaction avec l'entrepôt. Avec la génération automatique de la fonction de réduction, tout va bien, alors jetons un coup d'œil à la façade dynamique , qui est également créée ici.
Le décorateur @Ducksify s'occupe également d'enregistrer votre canard en tant que service dans le conteneur Angular IoC. Cela signifie que vous pouvez intégrer du canard dans votre composant!
Répartition des actions du coffre-fort
NgRx Ducks ajoute quelques correctifs à Duck qui vous permettent d'utiliser de simples appels de fonction au lieu de répartir les actions manuellement. Vous obtenez une API typée dans vos composants.
import { Duck } from '@co-it/ngrx-ducks'; @Component({ }) export class CounterComponent { constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.counter.incrementBy(42); } }
Vous implémentez Duck, pas Counter lui-même. Duck crée automatiquement un créateur d'action pour incrementBy qui envoie l'action avec la valeur transmise (charge utile). Grâce aux types dynamiques TypeScript, vous obtenez immédiatement la saisie semi-automatique dans l'EDI.
En bref, NgRx Ducks automatise l'ensemble du processus de traitement des actions. Vous configurez l'action une fois dans Duck, puis vous utilisez simplement la façade dynamique typée, générée et mise à jour automatiquement pour vous.
Récupération des données du stockage
Duck utilise des sélecteurs NgRx pour lire les données du stockage. Chaque canard a un choix d' aide qui accepte un sélecteur.
Imaginons que notre compteur soit enregistré en tant que fonction NgRx avec la clé " compteur ". Cela nous permettrait le réglage du sélecteur suivant.
import { createFeatureSelector, createSelector} from '@ngrx/store'; const visitCounter = createFeatureSelector<number>('counter'); const count = createFeatureSelector<number>(count => count); @Component({ }) export class CounterComponent { count$: Observable<number>;constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.count$ = this.counter.pick(count); this.counter.incrementBy(42); } }
Vous pouvez regarder la démo sur stackblitz.io .
Duck permet à la fois de déclencher des mutations d'état et d'interroger des données à partir du référentiel. Vous n'avez besoin que d'un seul service «utilisé», qui configure une API pratique pour interagir avec le stockage.
Et enfin
NgRx Ducks s'intègre également parfaitement avec Effects! MAIS nous n'analyserons cela en détail que dans le prochain article.
Si vous êtes impatient de le découvrir dès maintenant, vous pouvez vous référer à l'exemple complexe, qui est également disponible sur stackblitz.io.
TL; DR
- NgRx Ducks fonctionne comme une couche supplémentaire au-dessus de NgRx.
- Vous pouvez facilement intégrer NgRx Ducks dans des projets existants.
- Canard
... génère automatiquement des créateurs d'actions et des fonctions de réduction
. ... rend inutiles les énumérateurs d'actions et les types d'unions
... c'est une façade dynamique qui peut être intégrée dans un composant
. ... fournit une répartition automatique de type dynamique; actions désolées
... permet de lire les données du stockage en utilisant pick-API
. ... peut être utilisé par les effets (voir. Démo )
C'est tout les gars!
J'espère avoir réussi à vous convaincre d'essayer NgRx Ducks . Aussi, je me demande ce que vous pensez de cette bibliothèque. Si vous avez des idées, écrivez simplement sur GitHub