Flux este o arhitectură de aplicație pe care Facebook o folosește intern pentru construirea aplicației web la nivelul clientului cu React. Nu este o bibliotecă și nici un cadru. Nu este nici o bibliotecă, nici un cadru. Este un fel de arhitectură care completează React ca vizualizare și urmează conceptul de model unidirecțional de flux de date. Este util atunci când proiectul are date dinamice și trebuie să păstrăm datele actualizate într-un mod eficient. Reduce erorile de rulare.
np punct
Aplicațiile Flux au trei roluri majore în tratarea datelor:
- Dispecer
- Magazine
- Vizualizări (componente React)
Aici, nu trebuie să fii confundat cu modelul Model-View-Controller (MVC). Deși, Controllers există în ambele, dar Controller-Views (vizualizări) Flux se găsesc în partea de sus a ierarhiei. Preia date din magazine și apoi transmite aceste date copiilor lor. În plus, creatorii de acțiuni - metode de ajutor de dispecer utilizate pentru a descrie toate modificările care sunt posibile în aplicație. Poate fi util ca o a patra parte a ciclului de actualizare Flux.
Structura și fluxul de date
În aplicația Flux, datele circulă într-o singură direcție (unidirecțională). Acest flux de date este esențial pentru modelul de flux. Dispecerul, magazinele și vizualizările sunt noduri independente cu intrări și ieșiri. Acțiunile sunt obiecte simple care conțin date noi și proprietăți de tip. Acum, să ne uităm la diferitele componente ale arhitecturii flux, una câte una.
Dispecer
Este un hub central pentru aplicația React Flux și gestionează tot fluxul de date al aplicației dvs. Flux. Este un registru al apelurilor înapoi în magazine. Nu are inteligență proprie și pur și simplu acționează ca un mecanism de distribuire a acțiunilor către magazine. Toate magazinele se înregistrează și oferă un apel invers. Este un loc care s-a ocupat de toate evenimentele care modifică magazinul. Când un creator de acțiuni oferă o nouă acțiune dispecerului, toate magazinele primesc acea acțiune prin apelurile inverse din registru.
API-ul dispecerului are cinci metode. Acestea sunt:
rhel vs centos
| SN | Metode | Descrieri |
|---|---|---|
| 1. | Inregistreaza-te() | Este folosit pentru a înregistra callback-ul unui handler de acțiuni al unui magazin. |
| 2. | anulați înregistrarea() | Este folosit pentru a anula înregistrarea apelului unui magazin. |
| 3. | asteapta pentru() | Este folosit pentru a aștepta ca primul apel invers specificat să ruleze. |
| 4. | expediere() | Este folosit pentru a trimite o acțiune. |
| 5. | isDispatching() | Este folosit pentru a verifica dacă dispecerul trimite în prezent o acțiune. |
Magazine
Conține în primul rând starea și logica aplicației. Este similar cu modelul dintr-un MVC tradițional. Este utilizat pentru menținerea unei anumite stări în cadrul aplicației, se actualizează ca răspuns la o acțiune și emite evenimentul de modificare pentru a alerta vizualizarea controlerului.
Vizualizări
Se mai numește și vizualizări de controler. Este situat în partea de sus a lanțului pentru a stoca logica pentru a genera acțiuni și a primi date noi din magazin. Este o componentă React care ascultă evenimentele de schimbare și primește datele din magazine și redă din nou aplicația.
Acțiuni
Metoda dispecerului ne permite să declanșăm o expediere către magazin și să includem o încărcătură utilă de date, pe care o numim o acțiune. Este un creator de acțiuni sau metode de ajutor care transmit datele către dispecer.
python snake vs anaconda
Avantajul Flux
- Este un model de flux de date unidirecțional care este ușor de înțeles.
- Este o sursă deschisă și mai mult un model de design decât un cadru formal precum arhitectura MVC.
- Aplicarea fluxului este mai ușor de întreținut.
- Părțile de aplicare a fluxului sunt decuplate.