Co to jest flux?
Hejka, hej.
Dzisiaj mam zamiar przedstawić bardzo podstawowe informacje o czymś co nazywa się flux. Jeżeli zadawaliście sobie kiedyś pytanie: „Co to jest flux?” albo „Po co mi to?”, to właśnie tutaj dostaniecie odpowiedź.
Co to jest?
Jest to architektura aplikacji webowych, która została zaprojektowana przez zespół facebooka. Jej celem jest uproszczenie zarządzania stanem aplikacji. Aby go osiągnąć, postanowiono tak zaprojektować aplikację, aby komunikacja odbywała się tylko w jednym kierunku. Co jest głównym założeniem fluxa.
Dlaczego powstał?
Jing z Fejsbuka opisuje problem, jaki mieli z messengerem. Mianowicie informacje powiązane z komunikatorem wyświetlały się w wielu miejscach. Przykładowo ikonka z nieprzeczytanymi wątkami, licznik z ilością oczekujących wiadomości od konkretnych znajomych oraz otwarte okna rozmowy.
Przy pierwotnym podejściu zaczęli mieć problemy z odświeżaniem interfejsu. Ponieważ jedne akcje wywoływały kolejne akcje, które wywoływały akcje. W związku z tym narastała ilość ifów słiczów itp… Podczas swojej pracy natknąłem się na podobny problem. Który był dodatkowo wzmocniony przez bindowanie, co powodowało, że jedna akcja powodowała całą lawinę zdarzeń, która było ciężko opanować.
Z czego się składa?
Ok. Kiedy już wstępnie przedstawiłem czym jest flux oraz jakie problemy powinien rozwiązywać. Możemy przejść do spraw bardziej konkretnych. Architektura flux ma cztery podstawowe elementy, które wyglądają następująco:
- Store – jest to miejsce, gdzie jest przechowywany stan aplikacji. Jest to źródło informacji zarówno o danych, jak i o stanie poszczególnych komponentow na stronie.
- View – czyli interfejs użytkownika. Przy tym podejściu jest bardzo ważne, że widok ma się wyrenderować na podstawie informacji ze Stora. Oraz, co równie ważne, widok nie powinien zmieniać Stora. Ale co najwyżej powinien emitować Akcję.
- Action – jest to pojedyncza stosunkowo prosta informacja o tym co wydarzyło się w systemie. Przykładowo, kliknięto przycisk „zapisz” lub dane zostały załadowane z serwera lub kliknięto w wiesz o id.
- Dispatcher – jest elementem, który reaguje na poszczególne Akcje, zmieniając stan.
Te cztery elementy powinny powinny ze sobą współpracować, ale najlepiej opisze diagram, zaczerpnięty od autorów stąd .
Więcej?
Chcesz więcej i dokładniej. To zapraszam na https://facebook.github.io/flux/.
Jeżeli chciałbyś poznać różne implementacje fluxa to idź tu.
0 Komentarzy