Wielu developerów wciąż kojarzy produkty zespołu NgRx wyłącznie z biblioteką do zarządzania globalnym stanem aplikacji. Często używają wręcz określenia “NgRx” jako synonim “@ngrx/store” – być może Ty także wciąż należysz do tej grupy?
Tak czy owak, zjawisko to przestaje nieco dziwić, gdy weźmiemy pod uwagę, że store jest najbardziej popularnym, flagowym wręcz projektem zespołu oraz że przez długi czas była to jedyna biblioteka przeznaczona do tego celu dedykowana Angularowi. 

 

Zespół NgRx także zauważył tę tendencję wśród developerów i wprowadzając nowości postanowił przy okazji trochę uporządkować sprawy. Dla bardziej dociekliwych na szczególne polecenie w tym temacie zasługuje prelekcja Mike’a Ryana: The State of NgRx  (ng-conf 2020). Zachęcam Cię także do odwiedzenia dokumentacji i nadrobienia ewentualnych zaległości, gdyż tutaj także sporo się zmieniło, co widać już na pierwszy rzut oka w samej tylko nawigacji: https://ngrx.io/docs (dla porównania poprzednia wersja: https://v9.ngrx.io/docs).

Nowa dokumentacja już od początku wspomina, że NgRx jest frameworkiem umożliwiającym budowanie reaktywnych aplikacji w Angularze. Zarządzanie globalnym stanem aplikacji jest tylko jednym z elementów układanki. Świadczy to o tym, że zespół NgRx całkiem na serio podchodzi do tematu reaktywności aplikacji. Jest to dobry krok w kierunku potraktowania tego tematu bardziej kompleksowo.

Jakie zatem biblioteki oferuje nam NgRx i do czego one służą? Przede wszystkim twórcy zaproponowali podział na trzy główne kategorie ze względu na przeznaczenie bibliotek: State, Data i View. Przyjrzyjmy się im nieco bliżej!

State

State jest chyba najlepiej znaną kategorią. Jak sama nazwa wskazuje, biblioteki do niej należące wspomagają nas w zarządzaniu stanem aplikacji. Część z nich przypominamy zapewne jedynie dla formalności, natomiast całkiem możliwe, że pewne z nich będą dla Ciebie nowością:

@ngrx/store – biblioteka inspirowana Reduxem, oparta o RxJS, stanowiąca trzon zarządzania globalnym stanem. Dostarcza kontener do przechowywania danych, dostępu do nich (selektory) oraz mechanizmy służące do ich modyfikacji (akcje i reducery). Nie trzeba jej raczej nikomu przedstawiać, gdyż jest właśnie najbardziej znanym elementem rodziny NgRx.

@ngrx/store-devtools – biblioteka pozwalająca nam na debugowanie stanu przy użyciu https://github.com/zalmoxisus/redux-devtools-extension/

@ngrx/effects – umożliwia nam definiowanie zachowań (efektów) jakie zachodzą w naszej aplikacji w reakcji na dane pojawiające się w strumieniach wejściowych. Najczęściej wykorzystywany strumień danych w efektach to strumień akcji. Najbardziej typowe zachowania to: wywołania metod serwisów, odwołanie się do warstwy dostępu do danych (np. zawołania do api) i wszelkiego rodzaju operacje asynchroniczne. Zwykle efekty zwracają kolejne akcje modyfikujące dalej stan (choć nie zawsze musi tak być).

@ngrx/router-store – stanowi most pomiędzy @ngrx/store a Angular Router. Przy wykorzystaniu tej biblioteki zdarzenia routingu są odzwierciedlane w akcjach, a dane nawigacji zapisywane przez reducer w store, skąd można je później łatwo odczytywać.

@ngrx/entity – biblioteka wspomagająca zarządzanie kolekcjami encji, które chcemy przechowywać w store. Umożliwia tworzenie reducerów, selektorów oraz wykonywanie operacji na całych kolekcjach jak i ich poszczególnych elementach.

@ngrx/schematics – zawiera schematics służące do generowania elementów składowych store a także komponentów, które z niego korzystają

@ngrx/component-store – ostatni element kategorii State i jednocześnie najbardziej ciekawy, ponieważ jest najnowszym konceptem w swojej grupie. Pojawił się dopiero w najnowszej, 10 wersji frameworka. Do tej pory rozwiązania NgRx dotyczące zarządzania stanem skupiały się tylko na stanie globalnym aplikacji. Biblioteka ta rozszerza dotychczasowe podejście i oferuje narzędzia do definiowania lokalnego stanu na poziomie pojedynczych komponentów (lub drzew komponentów). Należy też podkreślić, że rozwiązanie to jest z założenia zupełnie niezależne od @ngrx/store.

 

Data

Jest to pierwsza nowa kategoria, na chwilę obecną składa się tylko z jednej biblioteki:
@ngrx/data – bibliotekę tę jako niezależny projekt stworzyli Ward Bell i John Papa, dlatego początkowo była dostępna tutaj https://github.com/johnpapa/angular-ngrx-data. Została ona włączona do NgRx wraz z wypuszczeniem wersji 8. Głównym założeniem biblioteki jest redukcja boilerplate’u związanego z implementacją elementów state, co jest problematyczne zwłaszcza przy większych aplikacjach, zawierających wiele encji.
Biblioteka oferuje łatwo konfigurowalne serwisy do zarządzania danymi i wykonywania na nich operacji typu CRUD, jednocześnie za kulisami nadal używając do tego celu @ngrx/store i pozostałych bibliotek z kategorii state. Biblioteka została zaprojektowana tak, by w typowych przypadkach zaimplementowanie serwisu dla danej encji mogło odbyć się dosłownie w kilku linijkach. Oprócz tego przewidziano też całkiem liczne możliwości jej rozszerzania. 

 

View

Najnowsza kategoria, podobnie jak powyższa posiada tylko jedną bibliotekę, która jednak tym razem od początku należała do rodziny NgRx:
@ngrx/component – biblioteka ta jest niejako realizacją deklaracji NgRx mówiącej o promowaniu przez nich reaktywności także poza samym zarządzaniem stanem aplikacji. Jest ona przeznaczona do użycia w komponentach, a konkretnie ich widokach. Na ten moment zawiera dyrektywę *ngrxLet oraz pipe ngrxPush – obie będące odpowiedzią na konkretne problemy pojawiające się często w reaktywnych widokach przy wykorzystywaniu *ngIf czy async. Na szczególną uwagę zasługuje fakt, że działają one także w aplikacjach niekorzystających z zone.js. Przyszłość tego produktu jest niestety dość mocno niepewna. Niebawem na naszym blogu pojawi się artykuł dedykowany tej bibliotece, w którym opiszemy ją dokładniej. Poruszymy także temat jej obecnego statusu.

 

Podsumowanie

Po zapoznaniu się z prelekcjami Mike’a Ryana, dokumentacją NgRx czy nawet tylko naszym artykułem nietrudno dostrzec, że zespół NgRx stara się rozszerzyć zestaw oferowanych narzędzi i przestać być kojarzony wyłącznie z rozwiązań służących zarządzaniu globalnym stanem aplikacji. Niektóre z wymienionych wyżej bibliotek wchodzą bowiem w nowe obszary – choćby lokalnego stanu komponentów czy reaktywnych widoków. Choć przykład @ngrx/component pokazuje, że radość może być przedwczesna, to nadal rozszerzenie wachlarza bibliotek NgRx można uznać za dobry krok. Powinna na tym skorzystać cała społeczność.

A może ktoś z Was używa już nowości od NgRx w swoich projektach? Koniecznie dajcie znać w komentarzach!