React Redux - zastosuj go w swoim projekcie

React-redux to niezwykle użyteczna biblioteka, która ułatwia zarządzanie stanem aplikacji w react. Dzięki połączeniu dwóch popularnych technologii - react i redux - tworzenie skalowalnych i łatwo zarządzalnych aplikacji staje się możliwe. W tym artykule omówimy, jak używać react-redux oraz zaprezentujemy podstawowe hooki, które pomogą Ci w pełni wykorzystać tę bibliotekę.

Aby rozpocząć korzystanie z react-redux, należy najpierw zainstalować odpowiednie paczki. Można to zrobić za pomocą menedżera pakietów npm lub yarn:

lub

Aby korzystać z możliwości tej biblioteki wymaga ona też wcześniej zainstalowanej paczki reduxa i sprawdza się głównie w przypadku, gdy chcemy dodać react-redux już do istniejącego projektu. W przypadku, gdy rozpoczynamy pracę nad nowym projektem dokumentacja sugeruje, aby używać specjalnie utworzonych do tego narzędzi.

Następnie, w głównym komponencie aplikacji, należy utworzyć tzw. "store" - centralne miejsce przechowywania stanu. Store przechowuje cały stan dla komponentów (szerzej opisany w poprzednim artykule), a react-redux zapewnia mechanizmy, które pozwalają komponentom na dostęp do tego stanu i reagowanie na jego zmiany.

Aby utworzyć store, należy użyć funkcji createStore z redux i przekazać do niej reduktor (reducer) - funkcję, która określa, jakie akcje powinny zmieniać stan aplikacji. Następnie, za pomocą komponentu <Provider> z react-redux, przekazujemy store do wszystkich komponentów aplikacji (w tym przypadku, gdyż wrappujemy wszystko co zwraca główny komponent). Przykład tego procesu znajduje się poniżej:

Możemy również to zrobić w następujący sposób, w głównym pliku .js wrappować cały komponent App, a store z kolei importować z zewnątrz i przekazywać go do propsa store w <Provider>.

Po skonfigurowaniu store'a możemy w pełni korzystać z funkcjonalności oferowanych przez react-redux (opis, jak to zrobić w dalszej części).

React-redux dostarcza również kilka hooków, które umożliwiają korzystanie z funkcjonalności biblioteki w komponentach funkcyjnych. Oto dwa najważniejsze:

Ten hook pozwala na odczytywanie konkretnych danych ze stanu store'a. Możemy przy jego pomocy, po przekazaniu do niego, jako argumentu: funkcji selektora, która może być najprostszą funkcją np. pobierającą dane lub wybierającą tylko ukończone zadania (oczywiście jeśli w store takie todos posiadamy) efektywnie pobierać i wykorzystywać tylko te dane ze store'a, których potrzebujemy w danym komponencie, co przyczynia się do lepszej wydajności i organizacji kodu. Aby te dane odczytywać logiczne wydaje się też przypisać zwróconą wartość do zmiennej. Hook useSelector przyjmuje jako argument funkcję selektora, która określa, jakie dane ze stanu chcesz odczytać. Przy pierwszym renderowaniu komponentu useSelector wywoła przekazaną funkcję selektora i przekaże cały obiekt stanu redux. Cokolwiek zwróci selektor, zostanie zwrócone przez hook do twojego komponentu. Pamiętaj też, że używanie jakichkolwiek hooków będzie działać tylko wewnątrz komponentu. Implementacje funkcji selektora nie muszą się tam znaleźć.

Wiesz już, jak odczytać dane ze store redux do swoich komponentów. Ale jak możemy wysyłać akcje do store z naszego komponentu? Ponieważ nie mamy dostępu do store w pliku komponentu, potrzebujemy jakiegoś sposobu, aby uzyskać dostęp do funkcji dispatch w naszych komponentach, zatem użyjemy hooka. Zwyczajnie w komponencie wywołujemy funkcję useDispatch() przypisujemy ją do zmiennej i wywołujemy ją z wybraną akcją:

Powyższe hooki umożliwiają wygodne korzystanie z funkcjonalności react-redux w komponentach funkcyjnych. Pozwalają one na odczytywanie stanu i wysyłanie akcji.

Jest to funkcja łącząca reactowy komponent z store reduxa. Dostarcza ona podłączonemu komponentowi fragmenty danych oraz funkcje, których potrzebuje.

jeśli określimy tą funkcję to za każdym razem, gdy store zostanie zaaktualizowany mapStateToProps zostanie wywołane. Wynikiem tej funkcji musi być obiekt, który będzie połączony z propsami łączonego komponentu. Z racji iż wszystkie parametry funckji connect() są opcjonalne, to w przypadku gdybyśmy nie chcieli wykorzystać funkcji mapStateToProps, to w jej miejsce przekazujemy null lub undefined.

mapStateToProps to funkcja, która mapuje część stanu Redux na props komponentu, połączonego przy użyciu connect, dostarczając mu odpowiednie dane ze stanu Redux.

głównym zadaniem tej funkcji (jeśli ją określimy) jest mapowanie akcji na funkcje, które są dostępne jako props w połączonym komponencie. Przykładowo, w funkcji mapDispatchToProps można zdefiniować funkcję addTodo, która tworzy akcję dodawania nowego zadania. Następnie, korzystając z tej funkcji, można przekazać ją jako props do połączonego komponentu, dzięki czemu komponent będzie mógł wywołać akcję addTodo w odpowiednim momencie.

Myślę, że podany niżej przykład pozwoli Ci lepiej zrozumieć działanie tych funkcji:

Co niezwykle istotne wspominam tutaj o funkcji connect(), i jej używaniu abyś miał pojęcie jak ona funkcjonuje, natomiast mimo, że jest nadal wspierana to oficjalna dokumentacja rekomenduje używanie hooków zamiast tej funkcji. I może Cię dziwić dlaczego w ogóle wobec tego o tym piszę? Odpowiedź jest bardzo prosta, mianowicie pamiętaj, że cały czas możesz spotykać kod tzw. legacy, czyli taki, który został napisany w starszej wersji języka programowania lub używa technik, które nie są już powszechnie stosowane lub zalecane. Co za tym idzie warto znać stosowane jeszcze do niedawna podejście, aby łatwiej odnaleźć się w kodzie, który został napisany np. przez innego programistę.

React-redux to potężna biblioteka, która ułatwia zarządzanie stanem aplikacji w react. Dzięki hookom takim jak useSelector i useDispatch, możemy łatwo odczytywać i aktualizować stan oraz wysyłać akcje. Połączenie react i redux zapewnia skalowalność, łatwość zarządzania stanem i reaktywne odświeżanie widoku aplikacji.

W tym artykule przedstawiliśmy zaledwie podstawowe koncepcje, poznanie dobrze reduxa, którego przedstawiliśmy w poprzednim artykule pozwoli lepiej wykorzystywać możliwości react-redux. Dzięki tym informacjom powinieneś być w stanie skutecznie korzystać z react-redux i zbudować aplikacje react o bardziej zaawansowanym zarządzaniu stanem.

Nie zapomnij zagłębić się w dokumentację react-redux, aby poznać więcej szczegółów i zaawansowanych technik. Powodzenia w tworzeniu aplikacji react z wykorzystaniem react-redux!