NgRx w aplikacjach Angular

NgRx w aplikacjach Angular

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.

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.

Spodobał Ci się artykuł?

Masz pytania? Zacznijmy rozmowę! 🙂

Klikając wyślij, zgadzasz się na wykorzystanie Twojego adresu email oraz imienia do kontaktu elektronicznego, a także do przesyłania wiadomości marketingowych. Administratorem Twoich danych osobowych jest Graphicbox Sp. z o. o. ul. Lwowska 6/201, Rzeszów. Więcej w polityce prywatności.

Form Men