React
Używanie ReactJS w sposób Flux
Szukaj…
Wprowadzenie
Uwagi
Flux to architektura aplikacji, której Facebook używa do tworzenia aplikacji internetowych po stronie klienta. Uzupełnia komponowane komponenty widoku React, wykorzystując jednokierunkowy przepływ danych. Jest to raczej wzorzec niż formalna struktura i możesz natychmiast zacząć korzystać z Flux bez dużej ilości nowego kodu.
Aplikacje Flux składają się z trzech głównych części: dyspozytora , sklepów i widoków (komponenty React). Nie należy ich mylić z Model-View-Controller. Kontrolery istnieją w aplikacji Flux, ale są widokami kontrolera - widoki często znajdowane na górze hierarchii, które pobierają dane ze sklepów i przekazują je swoim dzieciom. Ponadto twórcy akcji - metody pomocnicze dyspozytora - są używane do obsługi semantycznego interfejsu API, który opisuje wszystkie możliwe zmiany w aplikacji. Przydatne może być traktowanie ich jako czwartej części cyklu aktualizacji Flux.
Flux unika MVC na rzecz jednokierunkowego przepływu danych. Gdy użytkownik wchodzi w interakcję z widokiem React, widok propaguje akcję za pośrednictwem centralnego programu rozsyłającego do różnych sklepów, które przechowują dane aplikacji i logikę biznesową, która aktualizuje wszystkie dotknięte widoki. Działa to szczególnie dobrze z deklaratywnym stylem programowania React, który pozwala sklepowi wysyłać aktualizacje bez określania sposobu przenoszenia widoków między stanami.
Przepływ danych
Jest to zarys kompleksowego przeglądu .
Wzorzec strumienia zakłada wykorzystanie jednokierunkowego przepływu danych.
Akcja - prosty obiekt opisujący
typeakcji i inne dane wejściowe.Dyspozytor - odbiornik pojedynczego działania i kontroler oddzwaniania. Wyobraź sobie, że jest to centralne centrum Twojej aplikacji.
Store - zawiera stan i logikę aplikacji. Rejestruje wywołanie zwrotne w programie rozsyłającym i emituje zdarzenie, aby wyświetlić, gdy nastąpiła zmiana warstwy danych.
Widok - reaguje na komponent, który odbiera zdarzenie zmiany i dane ze sklepu. Powoduje ponowne renderowanie, gdy coś zostanie zmienione.
W przypadku przepływu danych Flux widoki mogą również tworzyć akcje i przekazywać je do dyspozytora w celu interakcji użytkownika.
Wycofane
Aby było to jaśniejsze, możemy zacząć od końca.
Różne komponenty ( widoki ) React uzyskują dane z różnych sklepów o wprowadzonych zmianach.
Niewiele składników można nazwać widokami kontrolera , ponieważ dostarczają one kod kleju, aby uzyskać dane ze sklepów i przekazać dane w dół łańcucha ich potomków. Widoki kontrolera reprezentują każdą znaczącą sekcję strony.
Sklepy można oznaczyć jako wywołania zwrotne, które porównują typ akcji i inne dane wejściowe dla logiki biznesowej aplikacji.
Dyspozytor to wspólny odbiornik akcji i kontener wywołań zwrotnych.
Akcje są niczym innym jak prostymi obiektami o wymaganej właściwości
type.Poprzednio będziesz chciał używać stałych dla typów akcji i metod pomocniczych (zwanych twórcami akcji ).