Quelle est la principale différence entre redux et reflux dans l'utilisation d'une application basée sur React?
Récemment, j'ai mené une étude préliminaire sur le développement d'un site de commerce électronique et découvert que redux et reflux proviennent tous les deux de architecture de flux dans Facebook et que les deux sont populaires. Je suis confus quant à la différence entre les deux.
Quand dois-je utiliser redux vs reflux, et lequel est le plus flexible pendant la phase de développement d'une application web de commerce électronique?
Je voulais écrire une autre réponse en se concentrant sur la différence spécifique entre Reflux et Redux. @Mijamo va au coeur de la raison pour laquelle ils sont originaires de choses différentes et est un très bon résumé si vous avez un contexte, mais je suis venu à cette question pour savoir spécifiquement la différence entre les deux du point de vue du développement. Voyant comment je venais d'entrer et de lire toutes les choses, je voulais écrire une réponse. Je mettrai à jour cette réponse avec plus d'exemples de code.
Flux (aperçu rapide)
Avant d'entrer dans le détail, je pense qu'une chose que nous devons garder à l'esprit pour aller de l'avant est de penser au Flux actuel et à la façon dont il gère actuellement la mise à l'échelle d'une application avec de nombreux composants ou de nombreux états différents qui doivent être gérés. C'est un assez bon parler à React NYC: Scaling Flux qui va dans le problème et la solution à laquelle ils arrivent n'est pas trop loin de ce que Reflux et Redux permettent vous devez faire, mais en un mot, une grande question est " Que faisons-nous lorsque nous avons des composants qui ont un état partagé qu'ils doivent tous garder à l'esprit? Comment gérer et évoluer "En fin de compte, une grande partie de ces cadres parviennent à cette question: nous avons besoin de cette idée d'un état global. Inévitablement, les deux cadres introduisent des concepts similaires pour y parvenir que nous allons approfondir plus loin .
Parce que je devrai référencer une comparaison de Flux, je veux juste montrer un aperçu rapide du fonctionnement de Flux avec l'image ci-dessous:
Reflux
Dans Reflux, il n'y a pas de répartiteur et les composants d'affichage communiquent directement via les composants via des actions.
+---------+ +--------+ +-----------------+
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦
+---------+ +--------+ +-----------------+
^ ¦
+--------------------------------------+
En termes de différenciation de Flux, il n'y en a pas trop. Vous créez toujours vos propres actions et créez vos propres magasins, et vos magasins écoutent toujours les actions. Je crois que la plus grande différence est que pour que les composants View soumettent des actions directement au magasin plutôt que de passer par un répartiteur, les composants ont une propriété de magasin qui vient de l'extension de Reflux.Component plutôt que React.Component pour qu'il puisse se connecter directement à un magasin. c'est-à-dire cet exemple
class MyComponent extends Reflux.Component
{
constructor(props)
{
super(props);
this.state = {}; // our store will add its own state to the component's
this.store = StatusStore; // <- just assign the store class itself
}
render()
{
var flag = this.state.flag; // <- flag is mixed in from the StatusStore
return <div>User is {flag}</div>
}
}
Vous avez également la possibilité de vous connecter à plusieurs magasins (il y a un accessoire que je crois appelé stores qui prend un tableau et Reflux est également livré avec la possibilité de modifier mapStoreToState au cas où vous voudriez contrôler spécifiquement comment l'état des magasins passe aux composants.
Naturellement parce que vous utilisez un composant fourni avec Reflux, vous devriez probablement lire leur documentation sur le composant Reflux et comment créer correctement des composants en gardant cela à l'esprit.
La dernière chose que je noterai est ci-dessus, j'ai mentionné que le gros problème était l'état mondial et comment cela résout-il cela. Reflux a un Reflux.GlobalState auquel vous pouvez contribuer tant que vous définissez des identifiants sur vos magasins. Le lien ci-dessus contient beaucoup plus de détails, mais avec cela, vous pouvez y accéder via Reflux.GlobalState.[StoreID].[property] où StoreID est l'ID auquel vous affectez le magasin et property est le véritable état auquel vous souhaitez accéder.
Redux
Redux en soi change beaucoup de choses et tue également l'idée des répartiteurs. Avant d'entrer dans les détails, je veux souligner les trois principes qu'ils mentionnent dans leurs documents.
- Source unique de vérité
- L'état est en lecture seule
- Les modifications sont effectuées avec des fonctions pures
Dans Redux, il n'y a vraiment qu'un seul état global auquel vous devez faire face et c'est l'état global de votre application (pour résoudre le gros problème). Bien que vous ayez toujours des actions et des magasins, les magasins eux-mêmes sont simplement responsables du suivi de leur propre état dans l'arborescence d'état globale, vous permettant de répartir des actions pour apporter des modifications à l'arborescence d'état et vous permettant d'accéder à l'état. Vous pouvez également placer des écouteurs sur ces magasins via subscribe.
Une grande motivation de cela se retrouve dans les deux premiers principes. Dans Flux ou même Reflux, si vous vouliez vous assurer que rien ne mutait l'état quand vous ne le vouliez pas (parce que techniquement vous pouvez accéder et changer l'état dans les magasins quand vous le souhaitez), vous dépendriez de choses comme - ImmutableJS pour vous assurer que vous ne mutiez pas accidentellement l'état. Redux, d'autre part, fait en sorte que vous ne pouvez accéder à l'état que via les magasins/sélecteurs et apporter des modifications uniquement via des actions de répartition (le troisième principe).
Une chose intéressante à noter est que, tandis que Reflux et Flux avaient des actions où, dans les magasins, vous écoutiez et déterminiez le changement d'état à faire, les magasins de Redux envoient simplement un message avec la charge utile que vous souhaitez, puis cela passe par une déclaration de commutateur géant pour déterminer ce qu'il doit faire avec l'arbre d'état - c'est ce qu'ils appellent un réducteur . Ce n'est pas différent de la façon dont Flux a reduce dans ses magasins, mais Redux arrache ce concept comme son propre objet et votre arbre d'état global passe par un rootReducer (Redux est livré avec une fonction Nice pour vous de combineReducers et de faire un rootReducer). Une bonne façon d'y penser est d'envoyer un changement à l'arbre d'état géant et ensuite quels que soient les changements que vous voulez, il est réduit ou condensé à l'état final que vous voulez. Cela influence en fait la façon dont redux configure beaucoup de choses, donc il indique React comment rendre à nouveau (en supposant que vous utilisez Redux avec React).
Le flux de données de Redux a très bien parlé dans le lien que j'ai mentionné ci-dessus mais il y a aussi une assez bonne infographie que j'ai jointe
Donc, les différences fondamentales sont vraiment
- Redux a une approche complètement différente de la gestion des états - elle embrasse l'idée qu'il existe un état global et que, inévitablement, si vous vouliez apporter des modifications, cela devrait simplement se produire là d'une manière très spécifique (comment vous gérez quels composants ont accès à quel état vous appartient).
- Reflux essaie vraiment de prendre en charge en donnant aux composants la possibilité d'accéder à plusieurs magasins sans avoir à trop changer ce dont Flux était à l'origine (j'aimerais penser à Reflux c'est ce qu'aurait dû être Flux).
- Redux change vraiment la façon dont l'arborescence d'état est gérée et donne aux magasins différentes responsabilités, et change la façon dont les informations d'état sont mappées vers le bas pour les composants, tandis que Reflux arrache simplement l'homme intermédiaire afin que vos composants puissent accéder plus facilement aux magasins dont ils ont besoin. .
Espérons que cela donne un meilleur aperçu des différences fondamentales entre eux.
Flux, Reflux et Redux (et de nombreuses autres bibliothèques similaires) sont toutes des façons différentes de gérer la gestion transversale des données.
Les composants de base React fonctionnent bien avec les relations père-enfant, mais lorsque vous devez fournir et mettre à jour des données provenant de différentes parties de l'application qui ne sont pas directement connectées, cela peut devenir rapidement compliqué. Ces bibliothèques fournissent des magasins et actions (et autres mécanismes) pour maintenir et mettre à jour ces données.
Flux est la solution originale développée par Facebook (tout comme React), elle est puissante mais probablement pas la plus simple ou la plus lisible. Reflux a été développé en partie pour le rendre plus facile et plus clair. La principale différence est que dans Reflux, chaque élément de données a son propre magasin et ses propres actions, ce qui les rend très lisibles et faciles à écrire. Malheureusement, Reflux n'est plus tellement développé activement, l'auteur recherche des mainteneurs. Mais dans l'ensemble, je dirais que Reflux est une alternative plus élégante à Flux.
Redux est une autre solution, qui est devenue la plus populaire jusqu'à présent. Son avantage est qu'il fournit aux magasins imbriqués un contenu immuable afin que vous puissiez facilement implémenter la fonctionnalité précédente/suivante et avoir des actions transversales qui ont un impact sur de nombreuses parties du magasin. Les inconvénients de redux sont qu'il est assez verbeux et a beaucoup plus de concepts que Flux ou Reflux. Pour les mêmes actions de base, il faudra beaucoup plus de code et l'implémentation asynchrone n'est pas la plus propre. Il est définitivement puissant et évolutif.
Voici un lien qui en parle plus en détail: http://jamesknelson.com/which-flux-implementation-should-i-use-with-react/