Une introduction au modèle architectural Flux

Discover Functional JavaScript a été nommé l'un des meilleurs nouveaux livres de programmation fonctionnelle par BookAuthority !

Flux est un modèle architectural proposé par Facebook pour la construction de SPA. Il suggère de diviser l'application en les parties suivantes:

  • Magasins
  • Répartiteur
  • Vues
  • Créateurs d'action / action

Boutique

Store gère l'état. Il peut stocker à la fois l'état du domaine et l'état de l'interface utilisateur.

Le magasin et l'état sont des concepts différents. State est la valeur des données. Store est un objet de comportement qui gère l'état via des méthodes. Dans le cas de la gestion des livres: la liste des livres est l'état et BookStore gère cette liste.

Un magasin gère plusieurs objets. C'est la seule source de vérité en ce qui concerne ces objets spécifiques. Dans une application, il peut y avoir de nombreux magasins. Par exemple: BookStore, AuthorStore, UserStore.

Il n'y a pas de méthodes de setter sur le magasin. Vous ne pouvez demander un changement d'état qu'en passant une action au répartiteur.

Un magasin écoute toutes les actions et décide de celles qui doivent agir. Cela signifie généralement une switchdéclaration. Une fois que le magasin a effectué les changements d'état, il émettra un événement de changement. Le magasin est un émetteur d'événements.

Les magasins ne prennent pas les autres magasins comme dépendances.

Répartiteur

Dispatcher est un objet unique qui diffuse des actions / événements à tous les magasins enregistrés. Les magasins doivent s'inscrire aux événements lorsque l'application démarre.

Lorsqu'une action intervient, elle la transmettra à tous les magasins enregistrés.

Vue

View est le composant de l'interface utilisateur. Il est responsable du rendu de l'interface utilisateur et de la gestion de l'interaction utilisateur. Les vues sont dans une structure arborescente.

Les vues écoutent les modifications du magasin et effectuent un nouveau rendu.

Les vues peuvent être davantage divisées dans les vues Présentation et Conteneur.

Les vues de présentation ne se connectent pas au répartiteur ou aux magasins. Ils communiquent uniquement à travers leurs propres propriétés.

Les vues de conteneur sont connectées aux magasins et au répartiteur. Ils écoutent les événements des magasins et fournissent les données pour les composants de présentation. Ils obtiennent les nouvelles données à l'aide des méthodes getter publiques des magasins, puis les transmettent dans l'arborescence des vues.

Les vues de conteneur distribuent des actions en réponse à l'itération de l'utilisateur.

Actions

Une action est un objet simple qui contient toutes les informations nécessaires pour effectuer cette action.

Les actions ont une typepropriété identifiant le type d'action.

Au fur et à mesure que les objets d'action se déplacent dans l'application, je suggère de les rendre immuables.

Les actions peuvent provenir de différents endroits. Ils peuvent provenir de vues résultant de l'interaction de l'utilisateur. Ils peuvent provenir d'autres endroits comme le code d'initialisation, où les données peuvent être extraites d'une API Web et des actions sont déclenchées pour mettre à jour les vues. L'action peut provenir d'un minuteur qui nécessite des mises à jour d'écran.

Créateurs d'action

La pratique consiste à encapsuler le code, en créant des actions dans les fonctions. Ces fonctions qui créent et distribuent des actions sont appelées des créateurs d'actions.

Appels d'API Web

Lorsque vous effectuez des appels d'API Web pour mettre à jour l'interface utilisateur, l'appel d'API Web sera suivi d'une action de mise à jour du magasin. Lorsque le magasin est mis à jour, il émet un événement de modification et, par conséquent, la vue qui écoute cet événement est de nouveau rendue.

Les appels d'API Web sont effectués dans les créateurs d'action. Nous pouvons extraire le code qui effectue l'appel API dans les fonctions Web API Utils.

Flux de données unidirectionnel

La mise à jour des vues s'effectue dans une seule direction:

Les vues ne modifient pas les données reçues. Ils écoutent les modifications de ces données, créent des actions avec de nouvelles valeurs, mais ne mettent pas à jour les données.

Les magasins, les vues et toute autre action ne peuvent pas modifier l'état dans (d'autres) magasins directement. Ils doivent envoyer une action via le répartiteur

Le flux de données est plus court dans les lectures en magasin que dans les écritures. Le flux de données dans les écritures en magasin diffère entre les actions asynchrones et synchrones.

Lectures de magasin

Stocker les écritures dans les actions synchrones

Stocker les écritures dans les actions asynchrones

Avantages

L'architecture de flux est meilleure dans une application où les vues ne correspondent pas directement aux magasins de domaines. En d'autres termes, lorsque les vues peuvent créer des actions qui mettront à jour de nombreux magasins et magasins peuvent déclencher des changements qui mettront à jour de nombreuses vues.

Les actions peuvent être conservées puis rejouées.

Les inconvénients

Flux peut ajouter une complexité inutile à une application où chaque vue correspond à un magasin. Dans ce type d'application, une séparation entre la vue et le stockage suffit.

Jetez un œil par exemple à Comment créer une application à trois couches avec React.

Conclusion

Les magasins gèrent l'état. Ils ne changent d'état qu'en écoutant les actions. Les magasins notifient les vues à mettre à jour.

Les vues rendent l'interface utilisateur et gèrent l'interaction de l'utilisateur. Les vues de conteneur écoutent les modifications du magasin.

Le répartiteur diffuse les actions à tous les magasins enregistrés.

Les actions sont des objets simples.

Discover Functional JavaScript a été nommé l'un desmeilleurs nouveaux livres de programmation fonctionnelle par BookAuthority !

Pour en savoir plus sur l'application des techniques de programmation fonctionnelle dans React, jetez un œil à Functional React .

Apprenez React fonctionnel , de manière basée sur un projet, avec une architecture fonctionnelle avec React et Redux .

Suivre sur Twitter