Flux je aplikačná architektúra, ktorú Facebook interne používa na vytváranie webovej aplikácie na strane klienta s Reactom. Nie je to knižnica ani rámec. Nie je to ani knižnica, ani rámec. Je to druh architektúry, ktorá dopĺňa pohľad React as a sleduje koncept modelu Unidirectional Data Flow. Je to užitočné, keď má projekt dynamické údaje a my potrebujeme údaje efektívne aktualizovať. Znižuje chyby pri behu.
centrovanie obrázkov v css
Aplikácie Flux majú pri práci s údajmi tri hlavné úlohy:
- Dispečer
- Obchody
- Zobrazenia (komponenty React)
Tu by ste sa nemali mýliť s modelom Model-View-Controller (MVC). Ovládače síce existujú v oboch, ale pohľady (pohľady) regulátora toku sa nachádzajú na vrchole hierarchie. Získava údaje z obchodov a potom ich odovzdá svojim deťom. Okrem toho, akčné tvorcovia - pomocné metódy dispečera používané na popis všetkých zmien, ktoré sú v aplikácii možné. Môže byť užitočný ako štvrtá časť cyklu aktualizácie Flux.
Štruktúra a dátový tok
V aplikácii Flux prúdia dáta jedným smerom (jednosmerne). Tento tok údajov je ústredným prvkom vzoru toku. Dispečer, sklady a pohľady sú nezávislé uzly so vstupmi a výstupmi. Akcie sú jednoduché objekty, ktoré obsahujú nové údaje a vlastnosť typu. Teraz sa pozrime na rôzne komponenty architektúry toku jeden po druhom.
Dispečer
Je to centrálny rozbočovač pre aplikáciu React Flux a spravuje všetok dátový tok vašej aplikácie Flux. Je to register spätných volaní do obchodov. Nemá žiadnu vlastnú inteligenciu a jednoducho funguje ako mechanizmus na distribúciu akcií do obchodov. Všetky obchody sa zaregistrujú a poskytnú spätné volanie. Je to miesto, ktoré riešilo všetky udalosti, ktoré upravujú obchod. Keď tvorca akcie poskytne dispečerovi novú akciu, všetky obchody dostanú túto akciu prostredníctvom spätných volaní v registri.
Dispečerské API má päť metód. Toto sú:
mockito kedykoľvek
| SN | Metódy | Popisy |
|---|---|---|
| 1. | Registrovať() | Používa sa na registráciu spätného volania obsluhy akcie obchodu. |
| 2. | zrušiť registráciu () | Používa sa na zrušenie registrácie spätného volania obchodu. |
| 3. | čakať na() | Používa sa na čakanie, kým sa najskôr spustí zadané spätné volanie. |
| 4. | odoslanie() | Používa sa na odoslanie akcie. |
| 5. | isDispatching() | Používa sa na kontrolu, či dispečer práve odosiela akciu. |
Obchody
Primárne obsahuje stav aplikácie a logiku. Je podobný modelu v tradičnom MVC. Používa sa na udržiavanie konkrétneho stavu v rámci aplikácie, aktualizuje sa v reakcii na akciu a vydáva udalosť zmeny, aby upozornila pohľad ovládača.
Názory
Nazýva sa aj ako kontrolné pohľady. Nachádza sa v hornej časti reťazca na uloženie logiky na generovanie akcií a prijímanie nových údajov z obchodu. Je to komponent React, ktorý počúva zmeny udalostí a prijíma dáta z obchodov a re-renderuje aplikáciu.
Akcie
Dispečerská metóda nám umožňuje spustiť odoslanie do obchodu a zahrnúť užitočné zaťaženie dát, ktoré nazývame akcia. Je to tvorca akcie alebo pomocné metódy, ktoré odovzdávajú údaje dispečerovi.
formátovať dátum na reťazec
Výhoda Flux
- Ide o jednosmerný model toku údajov, ktorý je ľahko pochopiteľný.
- Je to open source a je skôr dizajnovým vzorom než formálnym rámcom, akým je architektúra MVC.
- Aplikácia taviva je jednoduchšia na údržbu.
- Časti nanášania taviva sú oddelené.