[JS] Po co została wymyślona architektura Flux?

Tworząc aplikacje internetowe z wykorzystaniem React.js trudno sobie wyobrazić nie korzystanie z jakiegokolwiek źródła danych dla aplikacji. W celu usprawnienia zarządzania danymi dla takiej aplikacji powstała architektura Flux.

Sekcja 1Najpierw trochę teorii o architekturze Flux

Flux jest architekturą aplikacji której główną cechą jest jednokierunkowy przepływ informacji. Flux samo w sobie jest wzorcem niż frameworkiem JS.

Wzorzec zakłada występowanie 3-ch elementów składowych: akcji, dispatcher'a i store'a. Za ich pomocą widoki są w stanie odpowiednio reagować na zmiany w danych aplikacji.

Akcje są ładunkami danych. Informują o tym, jakie zmiany nastąpiły w danych. Najczęściej są wywoływane przez interakcje z interfejsem użytkownika, np. poprzez kliknięcie w dany element.

Dispatcher jest miejscem, które jest odpowiedzialne za zbieranie akcji i interakcję ze storem. Poprzez interakcję rozumiem, aktualizację danych, usunięcie danych, pobranie dodatkowych informacji z zewnętrznego źródła, itd., itp.

Store natomiast jest źródłem danych dla aplikacji. To właśnie store jest odpowiedzialny za manipulację danymi na podstawie przesłanej akcji oraz za zwrócenie wyniku manipulacji danymi. Dzięki temu, aplikacja jest w stanie zawsze zareagować na zmiany.

Sekcja 2Architektura Flux w praktyce

Czytając powyższe definicje zdaję sobie sprawę, że mogą brzmieć dość enigmatycznie. Dlatego warto przeanalizować poniższy przykład.

Załóżmy, że mamy sklep internetowy w którym znajdują się produkty i koszyk zakupowy. Powyższe komponenty są w stanie wysłać akcje do store'a. Dzięki akcjom, store może aktualizować swój stan i przesyłać informacje ze zmianami do widoków zależnych.

Za każdym razem, gdy klikasz w przycisk "Dodaj do koszyka" zostaje wysłana akcja z informacją o dodawanym produkcie. Dispatcher przekazuje akcję do store'a, a ten aktualizuje informacje dotyczące wybranych przez użytkownika produktów i przesyła nowy stan - state, do koszyka zakupów. Tym samym, koszyk zakupów może wyświetlać aktualną informację na temat wyborów użytkownika sklepu.

Możemy założyć, że użytkownikowi wolno kupić tylko jeden produkt danego rodzaju. W takiej sytuacji, po dodaniu produktu do koszyka, wybrany produkt zmieni swój stan na "niedostępny" i nie będzie można już go dodać ponownie.

Gdyby użytkownik zdecydował się, w widoku koszyka zakupów, usunąć produkt z listy zakupów, to wtedy koszyk przesyła akcję z informacją o produkcie który został usunięty z koszyka. Tym samym, produkt zostanie odblokowany na liście produktów a stan koszyka ulegnie aktualizacji.

Sekcja 3Podsumowanie

Mam nadzieję, że udało mi się wyjaśnić na czym polega wzorzec Flux zaproponowany przez Facebooka jako sposób na architekturę aplikacji internetowej napisanej w języku JavaScript. Architektura Flux została zaimplementowana w znanej i popularnej bibliotece o nazwie ReduxJS. Możesz też zainteresować się wpisem dotyczącym przykładowej implementacji architektury Flux, tak aby pobrać dane z wielu źródeł po wykonaniu jednej akcji.

Zapraszam do komentowania i zadawania pytań.

Obrazki pochodzą ze strony: https://facebook.github.io/flux/docs/in-depth-overview.html