Liaison de données bidirectionnelle (angulaire) vs flux de données unidirectionnel (réaction / Flux)

en angle vous avez beaucoup de contrôleurs. Un exemple serait un utilisateur qui déclenche une action sur la vue 1 gérée par le Controller 1. Le Controller 1 fait quelque chose mais déclenche aussi un événement qui est attrapé par un autre Controller 2. Controller 2 met à jour une propriété sur le $scope et la vue 2 est soudainement changée.

subitement une opération sur la vue 1, Vue mise à jour 2. Si nous lançons maintenant quelques callbacks Async et un peu plus de chaînes d'événements, vous pourriez ne plus savoir exactement quand/comment votre les vues sont en cours de mise à jour.

avec Flux / Redux, vous avez un flux de données à Sens Unique. La vue ne met jamais à jour le modèle, les vues peuvent seulement envoyer une action (intention de mettre à jour), mais laisse le magasin/réducteur décider comment gérer la mise à jour. Vous pouvez plus facilement raisonner au sujet du flux de données parce que vous pouvez facilement voir quelles actions peuvent être lancées par chaque vue. Un suivi pour voir comment cette action est gérée par le magasin et vous pouvez savoir exactement ce qui peut être mis à jour.

disons que votre application est juste un flux de magicien, mais il a quelques interactions complexes i.e. une étape modifier le comportement de l'étape suivante.

votre application fonctionne très bien, mais un jour un utilisateur signale un bug sur l'une des étapes délicates.

comment le débogage fonctionnerait-il sur la reliure bidirectionnelle et la reliure unidirectionnelle?

liaison bidirectionnelle

je commencerais à vérifier quel comportement est différent et avec un peu de chance, arriver au même point que le l'utilisateur et localisez le bug. Mais en même temps il pourrait y avoir une interaction étrange entre différentes parties de l'application. J'ai peut-être une liaison de données qui est incorrecte (par exemple répliquer l'état du modèle mais pas de liaison) ou une autre complexité étrange entre les composants qui est difficile à déboguer. Il peut être difficile d' isoler le bug.

Un moyen de liaison

il suffit de saisir le state objet. Il dispose de toutes les informations de l'application actuellement dans un grand objet javascript. Vous chargez le même état dans votre environnement de développement, il ya une grande chance votre application se comporte exactement de la même. Vous pouvez même écrire un essai avec l'état de régression et d'identifier précisément le problème qui se passe.

Conclusion

En quelques mots, un moyen de liaison rend très facile à déboguer des applications complexes. Vous n'avez pas à faire beaucoup, puis les copier sur l'état actuel de l'utilisateur.

Même cela ne fonctionne pas, vous pouvez consigner les actions. Il n'y a pas une façon facile de suivre tous les modifier l'état actions sur L'angle, par exemple. Avec Redux c'est assez, assez facile.

1. flux de Données voici un flux deécrire événements - c'est à dire l'état des mises à jour

2. ces événements circulent entre les vues et les controllers (et les services, tels que les backends HTTP)

3. flux unidirectionnel est essentiellement le cycle géant:

   • vue d'application utilise (lit, pas écrit) état de l'application pour rendre
   • quand l'application reçoit des stimuli de l'extérieur (l'Utilisateur a tapé du texte dans le champ d'entrée, ou le résultat de la requête HTTP est arrivé), il émet écrire événement - ou, dans Redux/Flux argot, distribue une action
   • tous les événements, de tous les controllers et vues, sont coulés dans la seule fonction sink - dispatch (réducteur); bien que la nature de la fonction dispatch permette de la composer à partir de fonctions de dispatch plus simples, conceptuellement, il n'y a qu'un seul dispatcher pour l'ensemble de l'app
   • répartiteur utilise un cas de figure qui de la part de l'état est mise à jour
   • allez à démarrer

4. flux bidirectionnel alias liaison de données lie deux pièces d'état: dans la plupart des cas, une à l'intérieur du contrôleur (E. G. quelques variables), et une à l'intérieur de la vue (E. G. contenu de textbox). reliure signifie que, lorsqu'un morceau changements, l'autre morceau changements et obtient la même valeur, de sorte que vous pouvez faire semblant qu'il n'y a qu'un morceau d'état impliqué (alors qu'Il ya deux en fait). Écrire événements sont un va-et-vient entre les contrôleurs et les vues - donc à double sens.

5. la liaison de données est cool quand vous avez besoin de comprendre quelle variable détient le contenu de cette zone de texte particulière - il montre immédiatement. Mais il nécessite complexe à maintenir l'illusion d'une pièce d'état où il y a deux morceaux vraiment. Habituellement, vous serez obligé d'utiliser syntaxe spécifique au Cadre pour écrire le code de vos vues - I. E. apprendre une autre langue.

6. flux de données unidirectionnel est cool quand vous pouvez tirer parti de ce flux supplémentaire entity-events. Et, habituellement, vous pouvez-c'est utile pour annuler/refaire, les actions de l'utilisateur rejouer (E. G. for debug), replication, etc,etc. Et le code pour supporter ceci est beaucoup, beaucoup plus simple, et peut habituellement être écrit en JavaScript simple au lieu de la syntaxe spécifique du cadre. D'autre part, puisque vous n'avez plus de liaison de données, il n'enregistre plus vous réutilisable.

Voir Aussi la grande explication visuelle dans cette réponse:https://stackoverflow.com/a/37566693/1643115. Les flèches à une seule tête et à deux têtes représentent visuellement le flux de données à Sens Unique et à deux sens, respectivement.

liaison de données bidirectionnelle D'Angular

C'est rendu possible par un mécanisme qui synchronise le modèle et la vue chaque fois qu'une modification. En angle, vous mettez à jour une variable et son mécanisme de détection de changement s'occupera de mettre à jour la vue, et vice versa. Quel est le problème? Vous ne contrôlez pas le mécanisme de détection des changements. J'ai dû recourir à ChangeDetectorRef.détecte les changements ou NgZone.exécutez pour forcer la vue à mettre à jour.

Pour ne pas plonger trop profond dans la détection de changement en angle, vous avez confiance qu'il mettra à jour ce dont vous avez besoin lorsque vous changez une variable, ou quand il est changé après une résolution observable, mais vous verrez que vous n'avez aucune idée de comment et quand il s'exécute, et parfois il ne mettra pas à jour votre vue après une modification de variable. Inutile de dire, il peut parfois être une douleur pour trouver où et quand un problème s'est produit.

Réagir d'une façon de flux de données

cela signifie que la vue tire toujours son état du modèle. Mettre la vue, vous devez d'abord mettre à jour le modèle, puis redessiner la vue. React rend le processus de redessination de la vue extrêmement efficace parce qu'il ne compare pas le DOM réel, mais un DOM virtuel qu'il garde en mémoire. Mais comment fonctionne la détection de changement dans cette dynamique? Vous le déclenchez manuellement.

dans React, vous définissez la nouvelle valeur de l'état, ce qui provoque alors un ReactDOM.render, qui provoque le processus de comparaison/mise à jour du DOM. Dans React / Redux vous envoyez des actions qui mettent à jour le magasin (source unique de vérité) et puis le reste. Le fait est que tu sais toujours quand les choses changent, et ce qui a causé le changement. Cela rend la résolution de problème assez simple. Si votre application dépend de l'état, vous le regardez avant et après l'action qui a déclenché le changement, et vous vous assurez que les variables ont la valeur qu'ils sont censés.

les implémentations mises de côté