logo

Koncept React Flux

Flux je arhitektura aplikacije, ki jo Facebook interno uporablja za gradnjo spletne aplikacije na strani odjemalca z Reactom. Ni knjižnica niti ogrodje. Ni niti knjižnica niti okvir. Gre za nekakšno arhitekturo, ki dopolnjuje pogled React as in sledi konceptu modela enosmernega toka podatkov. Uporabno je, ko ima projekt dinamične podatke in moramo podatke učinkovito posodabljati. Zmanjša napake med izvajanjem.

java vzorčna koda

Aplikacije Flux imajo tri glavne vloge pri ravnanju s podatki:

  1. Dispečer
  2. Trgovine
  3. Pogledi (komponente React)

Tukaj vas ne sme zamenjati z modelom Model-View-Controller (MVC). Čeprav krmilniki obstajajo v obeh, vendar so pogledi (pogledi) krmilnikov Flux na vrhu hierarhije. Pridobi podatke iz trgovin in jih nato posreduje njihovim otrokom. Poleg tega se za opisovanje vseh sprememb, ki so možne v aplikaciji, uporabljajo metode za pomoč ustvarjalcem akcij – dispečerju. Lahko je uporaben kot četrti del cikla posodabljanja Flux.

Struktura in pretok podatkov

Koncept React Flux

V aplikaciji Flux podatki tečejo v eno smer (enosmerno). Ta tok podatkov je osrednji del vzorca toka. Dispečer, shrambe in pogledi so neodvisna vozlišča z vhodi in izhodi. Dejanja so preprosti objekti, ki vsebujejo nove podatke in lastnost vrste. Zdaj pa si poglejmo različne komponente flux arhitekture eno za drugo.

Dispečer

Je osrednje središče za aplikacijo React Flux in upravlja vse tokove podatkov vaše aplikacije Flux. Je register povratnih klicev v trgovine. Nima lastne prave inteligence in preprosto deluje kot mehanizem za distribucijo dejanj v trgovine. Vse trgovine se registrirajo in nudijo povratni klic. To je kraj, ki obravnava vse dogodke, ki spreminjajo trgovino. Ko ustvarjalec dejanj odpremniku zagotovi novo dejanje, vse trgovine prejmejo to dejanje prek povratnih klicev v registru.

API dispečerja ima pet metod. To so:

pretvori niz v javo
SN Metode Opisi
1. register() Uporablja se za registracijo povratnega klica upravljalnika dejanj trgovine.
2. odjavi() Uporablja se za odjavo povratnega klica trgovine.
3. počakaj na() Uporablja se za čakanje, da se navedeni povratni klic najprej zažene.
4. odprema() Uporablja se za pošiljanje dejanja.
5. isDispatching() Uporablja se za preverjanje, ali dispečer trenutno pošilja dejanje.

Trgovine

Vsebuje predvsem stanje in logiko aplikacije. Podoben je modelu v tradicionalnem MVC. Uporablja se za vzdrževanje določenega stanja znotraj aplikacije, posodablja se kot odgovor na dejanje in oddaja dogodek spremembe, da opozori pogled krmilnika.

Pogledi

Imenuje se tudi pogled krmilnika. Nahaja se na vrhu verige za shranjevanje logike za ustvarjanje dejanj in prejemanje novih podatkov iz shrambe. Je komponenta React, ki posluša dogodke sprememb in prejema podatke iz trgovin ter ponovno upodablja aplikacijo.

kako velik je ta monitor

Dejanja

Metoda odpremnika nam omogoča, da sprožimo odpremo v trgovino in vključimo obremenitev podatkov, kar imenujemo dejanje. Je ustvarjalec dejanj ali pomožne metode, ki posredujejo podatke dispečerju.

Prednost Fluxa

  • Je enosmerni model pretoka podatkov, ki ga je enostavno razumeti.
  • Je odprtokoden in je bolj oblikovni vzorec kot formalni okvir, kot je arhitektura MVC.
  • Aplikacija fluksa je lažja za vzdrževanje.
  • Deli za nanašanje fluksa so ločeni.