logo

Reageer Flux-concept

Flux is een applicatiearchitectuur die Facebook intern gebruikt voor het bouwen van de client-side webapplicatie met React. Het is geen bibliotheek, noch een raamwerk. Het is noch een bibliotheek, noch een raamwerk. Het is een soort architectuur die React als weergave aanvult en het concept van het Unidirectionele Data Flow-model volgt. Het is handig als het project dynamische gegevens bevat en we de gegevens op een effectieve manier moeten bijwerken. Het vermindert de runtimefouten.

tekenreeks gesplitste java

Flux-toepassingen spelen drie belangrijke rollen bij het omgaan met gegevens:

  1. Verzender
  2. Winkels
  3. Weergaven (React-componenten)

Hier moet u niet worden verward met het Model-View-Controller (MVC) -model. Hoewel Controllers in beide voorkomen, staan ​​Flux-controller-views (views) bovenaan de hiërarchie. Het haalt gegevens op uit de winkels en geeft deze gegevens vervolgens door aan hun kinderen. Bovendien worden actiemakers - dispatcher-helpermethoden gebruikt om alle wijzigingen te beschrijven die mogelijk zijn in de applicatie. Het kan nuttig zijn als vierde onderdeel van de Flux-updatecyclus.

Structuur en gegevensstroom

Reageer Flux-concept

In de Flux-toepassing stromen gegevens in één richting (unidirectioneel). Deze gegevensstroom staat centraal in het fluxpatroon. De coördinator, winkels en weergaven zijn onafhankelijke knooppunten met in- en uitgangen. De acties zijn eenvoudige objecten die nieuwe gegevens en type-eigenschappen bevatten. Laten we nu de verschillende componenten van fluxarchitectuur een voor een bekijken.

Verzender

Het is een centrale hub voor de React Flux-applicatie en beheert de volledige gegevensstroom van uw Flux-applicatie. Het is een register van terugbelverzoeken naar de winkels. Het heeft geen echte eigen intelligentie en fungeert eenvoudigweg als een mechanisme om de acties naar de winkels te distribueren. Alle winkels registreren zich en zorgen voor een terugbelverzoek. Het is een plaats waar alle gebeurtenissen worden afgehandeld die de winkel wijzigen. Wanneer een actiemaker een nieuwe actie aan de coördinator geeft, ontvangen alle winkels die actie via de callbacks in het register.

De API van de coördinator heeft vijf methoden. Dit zijn:

tekenreeksfuncties java
SN Methoden Beschrijvingen
1. register() Het wordt gebruikt om de callback van een actiehandler van een winkel te registreren.
2. uitschrijven() Het wordt gebruikt om de terugbelactie van een winkel ongedaan te maken.
3. wachten op() Het wordt gebruikt om te wachten tot de opgegeven callback eerst wordt uitgevoerd.
4. verzenden() Het wordt gebruikt om een ​​actie te verzenden.
5. isVerzending() Het wordt gebruikt om te controleren of de coördinator momenteel een actie verzendt.

Winkels

Het bevat voornamelijk de applicatiestatus en logica. Het is vergelijkbaar met het model in een traditionele MVC. Het wordt gebruikt voor het handhaven van een bepaalde status binnen de applicatie, werkt zichzelf bij als reactie op een actie en verzendt de wijzigingsgebeurtenis om de controllerweergave te waarschuwen.

Keer bekeken

Het wordt ook wel controller-views genoemd. Het bevindt zich bovenaan de keten en slaat de logica op om acties te genereren en nieuwe gegevens uit de winkel te ontvangen. Het is een React-component die luistert naar veranderingsgebeurtenissen en de gegevens uit de winkels ontvangt en de applicatie opnieuw rendert.

Acties

Met de verzendmethode kunnen we een verzending naar de winkel activeren en een lading gegevens toevoegen, wat we een actie noemen. Het is een actiemaker of hulpmethode die de gegevens doorgeeft aan de coördinator.

voorbeelden van moore-machines

Voordeel van Flux

  • Het is een unidirectioneel gegevensstroommodel dat gemakkelijk te begrijpen is.
  • Het is open source en meer een ontwerppatroon dan een formeel raamwerk zoals MVC-architectuur.
  • De fluxtoepassing is gemakkelijker te onderhouden.
  • De fluxtoepassingsdelen zijn ontkoppeld.