Stany danych w aplikacjach Angular mogą powodować niejednokrotnie problemy, stopień trudności zarządzania nimi rośnie wraz z rozwojem aplikacji. W artykule chcę wyjaśnić jak zacząć pracę ze stanami za pomocą zbioru bibliotek NgRx.
Architektura aplikacji Angular
W celu uzyskania najlepszej architektury zarządzania danymi w aplikacji, skorzystamy NgRx. Składa się z dwóch bibliotek RxJS oraz Redux. Dzięki bibliotece RxJS reaktywne programowanie jest ułatwione. Służy ona do pracy ze strumieniami danych asynchronicznych. Funkcje opisane w tej bibliotece działają w czasie rzeczywistym, a wywołanie samej funkcji następuje w momencie interakcji ze zdarzeniem przez użytkownika. Natomiast Redux polega na koncepcji zbierania i przechowywania stanów w sytemie. Fundamentem danego frameworku są:
- Store – odpowiada za przechowywanie danych w aplikacji
- Action – jest opisem zdarzenia w odrębie danego store
- Dispatcher – służy do obierania zdarzeń „Action” i aktualizacji zmian w „Store”
Zacznijmy od stworzenia projektu za pomocą następującej komendy:
Dodatkowe parametry takie jak routing, style, prefix przyspieszą proces konfiguracji aplikacji. Po całkowitym zakończeniu tworzenia aplikacji musimy przejść do katalogu z jej zawartością.
W nim musimy wygenerować kilka komponentów tak jak poniżej:
Wrócimy do pracy z komponentami nieco póżniej. Następnie trzeba zadeklarować stowrzone komponenty w app.routing.module.ts. Pozwoli to nam na powiązanie stron z linkami w przeglądarce.
Poniżej struktura poprawnej implementacji stworzonych elementów w aplikacji.
Interesujesz się biznesem?
Zapisz się do newslettera i otrzymuj dawkę biznesowej wiedzy!
Store w NgRx
Następnym naszym krokiem będzie tworzenie katalogu store oraz kilku plików w jego środku. Nieco później omówimy również każdy stworzony plik osobno.
Pierwszy stworzony plik song.model.ts reprezentuje strukturę piosenki. Będziemy z niego korzystać do typizacji danych w plikach.
Następny plik songs-list.ts zawiera listę piosenek, których użyjemy w naszej aplikacji.
Przejdźmy do struktury pliku song.actions.ts. W nim tworzymy klasę z rodzajami zdarzeń, które będziemy obsługiwać w innych plikach. Tutaj zdefiniujmy zmienne statyczne i przypiszemy do nich akcje frameworka NgRx. W tych funkcjach możemy wkładać opis zdarzenia w formacie tekstowym. W celu przekazania danych do tej funkcji służy nam 2 opcjonalny parametr.
Plik song-reducer.ts bierze opisy zdarzeń z poprzedniego pliku i reaguje na każdy z nich. Na przykład, aby dodać piosenkę do ulubionych, bierzemy tablicę z piosenkami i łączymy z nowym utworem. Podczas usuwania po prostu filtrujemy piosenkę z listy już polubionych utworów. Po całkowitym czyszczeniu zwracamy pustą tablicę.
W aplikacji można tworzyć kilka miejsc zarządzania danymi za pomocą NgRx. Można stworzyć store, który będzie np. zarządzać procesem autoryzacji użytkownika, aktualizacją danych oraz wysyłką danych na serwer. Dane w aplikacji można również zsynchronizować z localStorage, żeby użytkownik poczuł się, że korzysta z natywnej aplikacji i zwracać dane natychmiast. NgRx również pozwala całkowicie izolować store w różnych modułach, dzięki temu można być pewnym braku wycieków danych w aplikacji. Zarejestrować nasz store musimy w app.module.ts.
Gratulacje, podłączyłeś swój pierwszy store z frameworku NgRx i już można z niego korzystać. W tym celu musimy użyć store jako Injector w komponencie.
Użycie NgRx w aplikacjach Angular
Na tym etapie omówmy sobie strukturę komponentów. Pierwszy komponent lista odpowiada za wyświetlania pojedyńczych piosenek. W metodzie OnInit musimy nasłuchiwać aktualizacji dodania/usuwania piosenek z listy ulubionych.
Najmniejsza jednostka wyświetlająca dokładny opis piosenki SongItemComponent przyjmuje model piosenki oraz posiada metody do wywołania zmian na liście ulubionych. Wykorzystajmy w tym pliku nasze akcje z pliku song.actions.ts. Żeby je wywołać musimy skorzystać z tzw. metody dispatch. Tę metodę można porównać z wbudowanym
EventEmitter, ponieważ wykonuje te same funkcje czyli dostarcza dane do całej aplikacji. Natomiast reducer o którym była mowa wyżej obsługuje już te zdarzenia.
Trzeba zaznaczyć, że zdarzenia wykonane w obrębie tej aplikacji będą nasłuchiwane przez wszystkie jej komponenty, które mają dostęp do stworzonego Store. Klikając na serduszko zostaje wywołany reducer ADD_FAVOURITE lub DELETE_FAVOURITE w zależności czy był polubiony już dany utwór. W pliku FavouriteComponent pobieramy nasze polubione utwory podczas inicjalizacji komponentu. W templatce polubionych utworów korzystamy z elementu music-song-item, aby wyświetlić polubione piosenki. Zakodowaliśmy dodawanie i usuwanie utworów w jednym miejscu, więc możemy się cieszyć z możliwości natychmiastowej możliwości odznaczenia utworów.
