React
Utiliser ReactJS de manière Flux

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Recherche…


Introduction

Il est très pratique d'utiliser l'approche Flux, lorsque votre application avec ReactJS sur frontend est prévue pour croître, en raison des structures limitées et d'un peu de nouveau code pour faciliter les changements d'état lors de l'exécution.

Remarques

Flux est l'architecture d'application utilisée par Facebook pour créer des applications Web côté client. Il complète les composants de la vue composable de React en utilisant un flux de données unidirectionnel. C'est plus un modèle qu'un cadre formel, et vous pouvez commencer à utiliser Flux immédiatement sans beaucoup de nouveau code.

Les applications flux ont trois parties principales: le répartiteur , les magasins et les vues (composants réactifs). Celles-ci ne doivent pas être confondues avec Model-View-Controller. Les contrôleurs existent dans une application Flux, mais ce sont des vues de contrôleurs, des vues souvent situées en haut de la hiérarchie, qui récupèrent les données des magasins et transmettent ces données à leurs enfants. De plus, les créateurs d'actions - méthodes d'assistance du répartiteur - sont utilisés pour prendre en charge une API sémantique qui décrit toutes les modifications possibles dans l'application. Il peut être utile de les considérer comme une quatrième partie du cycle de mise à jour de Flux.

Flux évite MVC en faveur d'un flux de données unidirectionnel. Lorsqu'un utilisateur interagit avec une vue Réaction, la vue propage une action via un répartiteur central vers les différents magasins contenant les données et la logique métier de l'application, qui met à jour toutes les vues affectées. Cela fonctionne particulièrement bien avec le style de programmation déclaratif de React, qui permet au magasin d'envoyer des mises à jour sans spécifier comment effectuer la transition entre les vues.

Flux de données

Ceci est un aperçu de la vue d'ensemble complète.

Le modèle de flux suppose l'utilisation d'un flux de données unidirectionnel.

  1. Action - objet simple décrivant le type action et d'autres données d'entrée.

  2. Dispatcher - récepteur à action unique et contrôleur de rappel. Imaginez que c'est un hub central de votre application.

  3. Store - contient l'état et la logique de l'application. Il enregistre les rappels dans le répartiteur et émet des événements à afficher lorsque des modifications ont été apportées à la couche de données.

  4. View - Réagir à un composant qui reçoit un événement de modification et des données du magasin. Cela provoque un rendu lorsque quelque chose est changé.

    À partir du flux de données Flux, les vues peuvent également créer des actions et les transmettre au répartiteur pour les interactions utilisateur.

Renversé

Pour le rendre plus clair, nous pouvons commencer à la fin.

  • Différents composants React ( vues ) obtiennent des données de différents magasins à propos des modifications apportées.

    Peu de composants peuvent être appelés contrôleurs-vues , car ils fournissent le code de colle pour obtenir les données des magasins et pour transmettre des données dans la chaîne de leurs descendants. Les vues de contrôleur représentent toute section importante de la page.

  • Les magasins peuvent être considérés comme des rappels qui comparent le type d'action et d'autres données d'entrée pour la logique métier de votre application.

  • Dispatcher est un conteneur d'actions et de rappels d'actions communes.

  • Les actions ne sont rien que des objets simples avec une propriété de type requise.

    Auparavant, vous souhaiterez utiliser des constantes pour les types d'action et les méthodes d'assistance (appelées créateurs d'action ).



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow