Flux är en applikationsarkitektur som Facebook använder internt för att bygga webbapplikationen på klientsidan med React. Det är inte ett bibliotek eller ett ramverk. Det är varken ett bibliotek eller ett ramverk. Det är en slags arkitektur som kompletterar React as view och följer konceptet Unidirectional Data Flow-modell. Det är användbart när projektet har dynamisk data, och vi behöver hålla data uppdaterade på ett effektivt sätt. Det minskar körtidsfelen.
zip-kommando i linux
Fluxapplikationer har tre huvudroller när det gäller att hantera data:
- Avsändare
- Butiker
- Visningar (React-komponenter)
Här ska du inte förväxlas med modellen Model-View-Controller (MVC). Även om Controllers finns i båda, men Flux Controller-vyer (vyer) finns överst i hierarkin. Den hämtar data från butikerna och skickar sedan dessa data till sina barn. Dessutom, handlingsskapare - avsändarhjälpmetoder som används för att beskriva alla ändringar som är möjliga i applikationen. Det kan vara användbart som en fjärde del av Flux-uppdateringscykeln.
Struktur och dataflöde
I Flux-applikationen flyter data i en enda riktning (enkelriktad). Detta dataflöde är centralt för flödesmönstret. Avsändaren, butikerna och vyerna är oberoende noder med ingångar och utgångar. Åtgärderna är enkla objekt som innehåller ny data och typegenskap. Låt oss nu titta på de olika komponenterna i fluxarkitektur en efter en.
Avsändare
Det är ett centralt nav för React Flux-applikationen och hanterar alla dataflöden i din Flux-applikation. Det är ett register över återuppringningar till butikerna. Den har ingen egen intelligens utan fungerar helt enkelt som en mekanism för att distribuera åtgärderna till butikerna. Alla butiker registrerar sig och ger en återuppringning. Det är en plats som hanterade alla händelser som förändrar butiken. När en åtgärdsskapare tillhandahåller en ny åtgärd till avsändaren, får alla butiker den åtgärden via callbacks i registret.
Avsändarens API har fem metoder. Dessa är:
python sorteringsordbok
| SN | Metoder | Beskrivningar |
|---|---|---|
| 1. | Registrera() | Den används för att registrera en butiks åtgärdshanterares callback. |
| 2. | avregistrera() | Den används för att avregistrera en butiks återuppringning. |
| 3. | vänta på() | Den används för att vänta på att den angivna återuppringningen ska köras först. |
| 4. | avsändande() | Den används för att skicka en åtgärd. |
| 5. | isDispatching() | Den används för att kontrollera om avsändaren för närvarande skickar en åtgärd. |
Butiker
Den innehåller i första hand applikationstillstånd och logik. Den liknar modellen i en traditionell MVC. Den används för att upprätthålla ett visst tillstånd i applikationen, uppdaterar sig själva som svar på en åtgärd och sänder ändringshändelsen för att varna kontrollvyn.
java nollkontroll
Visningar
Det kallas också för controller-views. Den är placerad överst i kedjan för att lagra logiken för att generera åtgärder och ta emot ny data från butiken. Det är en React-komponent som lyssnar på förändringshändelser och tar emot data från butikerna och renderar om applikationen.
Handlingar
Dispatchermetoden tillåter oss att utlösa en utskick till butiken och inkludera en nyttolast av data, som vi kallar en åtgärd. Det är en handlingsskapare eller hjälpmetoder som skickar data till avsändaren.
Fördelen med Flux
- Det är en enkelriktad dataflödesmodell som är lätt att förstå.
- Det är öppen källkod och mer av ett designmönster än ett formellt ramverk som MVC-arkitektur.
- Fluxapplikationen är lättare att underhålla.
- Fluxapplikationsdelarna är frånkopplade.