Surtout pas de Redux avec Angular
Hello,
J'observe de plus en plus une très mauvaise pratique Angular, et je souhaite vous en alerter : si vous ajoutez du Redux à Angular, vous cassez tout ce qui fait l'intérêt d'Angular.
Angular est two-way data binding, donc l'état de toutes les variables est suivi en temps réel nativement (watched). Par conséquent ajouter du Redux pour conserver l'état d'une variable est absolument inutile.
Un store qui conserve l'état courant des variables est toujours une bonne pratique, voire une pratique nécessaire. L'utilisation d'un store Angular évitera les @Input() et @output() dans les composants, car cela rend la gestion de l'application inutilement complexe, et surtout casse la chaîne two-way data binding.
Mais en Angular un tel store est bâti grâce à un service, tout simplement. Toute modification d'une propriété de ce store, via le DOM autant que via le typescript, est nativement et automatiquement propagée à tous les composants important le store. Il est là le two-way data binding. A tout moment un dump de ce store vous donnera l'état complet de votre application.
Une fois le store défini, il faut l'utiliser directement dans les templates HTML des composants, sans besoin de déclarer une variable locale dans le composant. Par exemple <input [(ngModel)]="store.username" ...> évite de déclarer une variable "username" dans le composant. Il suffit d'importer le store dans le constructor du composant. La modification de cette variable (ici via le DOM) sera propagée automatiquement à tous les autres composants important le store.
Bien évidemment, si votre store est bien conçu, il n'est finalement rien d'autre que le datamodel JSON de votre application.
De plus Redux est très mal adapté à l'asynchronisme, alors que Angular est conçu pour cela. Redux oblige à ajouter des observables et à les traîner jusque dans le DOM, vous obligeant à utiliser le dramatique "| async" dans les templates HTML des composants, ce qui est officiellement déclaré comme une mauvaise pratique Angular. La gestion des observables est alors complexe et handicapante.
En revanche, afficher une variable asynchrone est prévu nativement en Angular : il suffit d'utiliser le "Elvis operator" (myvar?.myproperty). Par exemple <input [(ngModel)]="store?.username" ...> si le username du store est obtenu de façon asynchrone. Il n'y a donc qu'un seul caractère"?" à ajouter pour gérer l'asynchronisme en Angular, c'est tout.
Notez cependant qu'en général les retours asynchrones ne sont pas disponibles dans le constructor d'un composant (voir life cycle), ce qui oblige à initialiser le composant plutôt dans un ngOnInit(), voire avec un ngAfterViewInit() dans certains cas particuliers.
Cette méthode du "store as a service" est particulièrement adaptée aux applications riches et complexes (voir par exemple oceanvirtuel.eu développé en Angular 7).
Si vous avez un besoin irrépressible d'utiliser Redux, faites du React, du Vue, ou autre chose, mais surtout ne faites pas d'Angular.
Cordialement
Hervé
Répondre avec citation
Partager