Unstated: lekka i prosta biblioteka do zarządzania stanem w React
Zarządzanie stanem to trochę czarny charakter, jeśli chodzi o Reacta — zapytaj tych, którzy nie chcą się w to zagłębiać, a prawdopodobnie właśnie to Ci powiedzą. Zarządzanie stanem rzeczywiście staje się coraz bardziej pracochłonne wraz z rozwojem aplikacji i często potrzebujesz do tego specjalnych bibliotek. To właśnie odstrasza wielu ludzi, bo większość deweloperów, którzy mieli styczność z Reactem, ma swoją top 5 bibliotek do zarządzania stanem, jeśli nie top 10. Albo po prostu zostali przy Reduxie i nigdy nie szukali innych opcji.
Redux to najpopularniejsza biblioteka do zarządzania stanem, ale z pewnością nie jedyna, a część z nich bazuje jedna na drugiej, jak Rematch na Reduxie, co sprawia, że trudno się dziwić, iż wszystko to jest sporym zniechęceniem dla osób chcących zacząć pracę z Reactem. Cały temat wydaje się skomplikowany, wymagający sporo nauki, żeby znaleźć właściwe rozwiązanie, a nawet wtedy możesz mieć do czynienia z dużą ilością kodu powtarzalnego lub musisz sięgać po jeszcze bardziej zaawansowaną bibliotekę, zbudowaną na tej, której używałeś. To powoduje często spotykane przekonanie, że zarządzanie stanem w React jest uciążliwe — albo trzymasz się najczęściej używanego narzędzia (które i tak jest szeroko krytykowane w społeczności), albo wchodzisz w niekończący się cykl szukania najświeższej biblioteki z dodatkowymi funkcjami i możliwościami. Jeśli brzmi to jak kłopot, na szczęście istnieje znacznie prostsza biblioteka, która może być właśnie tym, czego szukasz.
Unstated
W React stan domyślnie żyje w komponentach, co czyni go przewidywalnym, przejrzystym i łatwym do obsługi lub testowania. Nawet jeśli nie znasz Reacta, krótki rzut oka na te komponenty zazwyczaj wystarczy, by zrozumieć, do czego służą. Kontynuując tę ideę wszystko, w tym stan, jest przekazywane przez Context — przekazujesz stan do komponentu Provider, a komponent Consumer go odbiera. To proste i efektywne rozwiązanie, bo stan nie musi przechodzić przez całe drzewo komponentów i trafia dokładnie tam, gdzie chcesz. Brzmi świetnie, ale co jeśli chcesz dzielić stan między wieloma komponentami? Właśnie tutaj z pomocą przychodzi Unstated — chodzi o połączenie Component State i Context, jednocześnie zachowując prostotę. To naprawdę mała biblioteka składająca się z trzech rzeczy:
- Containers: to klasa, która jest właściwie jak komponenty, ale służy wyłącznie do przechowywania stanu. Wystarczy przekleić swój stan do Container i komponenty mogą się do niego subskrybować.
- Subscribers: komponenty, które służą do przekazywania stanu do tych komponentów, które go potrzebują. Każda zmiana stanu w Container automatycznie wywołuje ponowne renderowanie komponentów subskrybujących.
- Providers: komponenty, które przechowują wszystkie instancje Twoich Containerów i pozwalają dzieciom na subskrypcję. Umieszczasz je na najwyższym poziomie wokół komponentów, które mają subskrybować dany Container.
Unstated-next
Jak widać, Unstated był świetnym narzędziem, które pozwalało szybko i prosto dzielić logikę i stan — coś, czego React długo nie miał. Tymczasem React wprowadził później Hooks, które praktycznie wypełniły niszę, jaką zajmował Unstated, i szczerze mówiąc, sprawiły, że stał się trochę zbędny. Twórca Unstated, Jamie Kyle, zdał sobie z tego sprawę, ale zauważył też inną niszę — tak narodził się pomysł na Unstated-next. Problem polegał na tym, że wielu deweloperów nie wiedziało, jak używać Hooks do dzielenia stanu i logiki, więc celem było stworzenie duchowego następcy Unstated, który pomoże zrozumieć współdzielenie stanu i logiki w React, bazując na tej samej koncepcji.
- keep it simple: Unstated-next zachęca do pełnego wykorzystania React Hooks i Context, stosując ten sam system containerów co Unstated
- keep it small: około 200 bajtów i tylko kilka minut, by zrozumieć bibliotekę — to naprawdę miniatura w świecie bibliotek
- componentize everything: zamknięcie wszystkiego w komponentach znakomicie wpływa na wydajność i testowanie, a integracja z dowolną inną biblioteką React będzie płynna, bo możesz to robić komponent po komponencie
Wszystko kręci się wokół React
Kluczową sprawą w Unstated jest to, że motywuje do korzystania po prostu z Reacta, a jednocześnie oferuje sprytne rozwiązania jak Container do użycia wtedy, gdy zajdzie taka potrzeba. Odpowiednie użycie razem z Hooks i Context, które same w sobie są potężnymi narzędziami, zdecydowanie ułatwia zarzadzanie stanem bez konieczności uczenia się bardziej skomplikowanych bibliotek lub zmagania się z dużą ilością boilerplate'u. Oczywiście są sytuacje, kiedy potrzebny jest bardziej rozbudowany tool i minimalistyczne podejście Unstated-next nie wystarczy, ale jeśli dopiero zaczynasz z Reactem albo po prostu chcesz, aby zarządzanie stanem było proste i przyjemne — zdecydowanie warto po niego sięgnąć.