Flux to architektura aplikacji, której Facebook używa wewnętrznie do tworzenia aplikacji internetowej po stronie klienta za pomocą React. To nie jest biblioteka ani framework. Nie jest to ani biblioteka, ani framework. Jest to rodzaj architektury, która uzupełnia React as view i podąża za koncepcją modelu jednokierunkowego przepływu danych. Przydaje się, gdy projekt posiada dane dynamiczne i musimy je efektywnie aktualizować. Redukuje błędy wykonawcze.
ciąg znaków w C++
Aplikacje Flux pełnią trzy główne role w przetwarzaniu danych:
- Dyspozytor
- Sklepy
- Widoki (komponenty React)
W tym przypadku nie należy mylić z modelem Model-View-Controller (MVC). Chociaż kontrolery istnieją w obu przypadkach, ale widoki kontrolerów Flux (widoki) znajdują się na górze hierarchii. Pobiera dane ze sklepów, a następnie przekazuje je dzieciom. Dodatkowo kreatorzy akcji - metody pomocnicze dyspozytora służące do opisu wszystkich możliwych zmian w aplikacji. Może się przydać jako czwarta część cyklu aktualizacji Fluxa.
Struktura i przepływ danych
W aplikacji Flux dane przepływają w jednym kierunku (jednokierunkowo). Ten przepływ danych ma kluczowe znaczenie dla wzorca strumienia. Dyspozytor, sklepy i widoki to niezależne węzły z wejściami i wyjściami. Akcje to proste obiekty zawierające nowe dane i właściwość typu. Przyjrzyjmy się teraz po kolei różnym komponentom architektury strumieniowej.
Dyspozytor
Jest to centralny hub dla aplikacji React Flux i zarządza całym przepływem danych w aplikacji Flux. Jest to rejestr oddzwonień do sklepów. Nie ma własnej inteligencji i działa po prostu jako mechanizm dystrybucji działań pomiędzy sklepami. Wszystkie sklepy rejestrują się same i zapewniają oddzwonienie. Jest to miejsce, które obsłużyło wszystkie zdarzenia modyfikujące sklep. Gdy twórca akcji udostępni dyspozytorowi nową akcję, wszystkie sklepy otrzymają tę akcję poprzez wywołania zwrotne w rejestrze.
Interfejs API dyspozytora ma pięć metod. To są:
w porównaniu z Javą
| SN | Metody | Opisy |
|---|---|---|
| 1. | rejestr() | Służy do rejestracji wywołania zwrotnego procedury obsługi akcji sklepu. |
| 2. | wyrejestruj() | Służy do wyrejestrowania wywołania zwrotnego sklepu. |
| 3. | Poczekaj na() | Służy do oczekiwania, aż określone wywołanie zwrotne zostanie uruchomione jako pierwsze. |
| 4. | załatwić() | Służy do wywołania akcji. |
| 5. | isDispatching() | Służy do sprawdzenia, czy dyspozytor aktualnie wysyła akcję. |
Sklepy
Zawiera przede wszystkim stan aplikacji i logikę. Jest podobny do modelu w tradycyjnym MVC. Służy do utrzymywania określonego stanu w aplikacji, aktualizuje się w odpowiedzi na akcję i emituje zdarzenie zmiany, aby ostrzec widok kontrolera.
Wyświetlenia
Nazywa się to także widokami kontrolera. Znajduje się na górze łańcucha i przechowuje logikę generowania akcji i odbierania nowych danych ze sklepu. Jest to komponent React, który nasłuchuje zmian i odbiera dane ze sklepów oraz ponownie renderuje aplikację.
10 potęga 6
działania
Metoda ekspedytora pozwala na wywołanie wysyłki do sklepu i załączenie ładunku danych, co nazywamy akcją. Jest to kreator akcji lub metody pomocnicze, które przekazują dane do dyspozytora.
Zaleta Fluksa
- Jest to jednokierunkowy model przepływu danych, który jest łatwy do zrozumienia.
- Jest to oprogramowanie typu open source i bardziej przypomina wzorzec projektowy niż formalną strukturę, taką jak architektura MVC.
- Aplikacja topnika jest łatwiejsza w utrzymaniu.
- Części aplikacji strumienia są oddzielone.