Skarga, którą często wyrażają niedoświadczeni programiści React, brzmi tak, że Redux w rzeczywistości komplikuje im pracę, zamiast ją upraszczać. To zrozumiałe – narzędzie to powstało do zarządzania przepływem danych w bardziej złożonych aplikacjach i przy prostych SPA czy stronach wydaje się przerostem formy nad treścią.
Problemy z nauką Reduxa:
- Programiści nie zawsze mają okazję popracować w dużym projekcie bez Reduxa - poznają tę technologię równolegle z rozpoczęciem pracy z Reactem. Przez to nie widzą, jakie problemy Redux miał rozwiązywać (no pain – no gain 🙂 ), jakie są alternatywy i dlaczego bywają wydajniejsze lub wygodniejsze
- Tutoriale Reduxa zwykle polegają na budowaniu prostych aplikacji lub funkcji, które równie dobrze można napisać w czystym JS. Dlatego pierwsze wrażenie programistów to zwykle konsternacja co do przeznaczenia tego narzędzia.
Dobrym przykładem kursu, który uczy mniej trywialnego materiału i dobrze tłumaczy Redux, jest „Advanced React and Redux: 2018 Edition” autorstwa Stephena Gridera.
Jakie problemy rozwiązuje Redux?
Oddzielenie „co się stało” od „co trzeba zrobić”
To nie jest oczywiste. Jeśli aplikacja powtarza wzorzec „komponent się wyrenderował i musi pobrać dane z API, żeby wyrenderować dzieci lub elementy listy”, będziemy po prostu wielokrotnie wywoływać akcje REQUEST i RECEIVE, bez niczego pomiędzy - to redundancja, którą można zastąpić prostymi wywołaniami asynchronicznymi. Nawet jeśli potrzebujesz Reduxa w aplikacji, powtarzanie tego samego wzorca w wielu reducerach uchodzi za złą praktykę. Możesz zastąpić je prostszym reducerem i użyć go ponownie (dodając parametr, na przykład paramName).
Przekazywanie propsów przez wiele komponentów, które ich nie używają
Ten problem nazywa się „prop drilling”. Takie propsy dokładają tylko dodatkowe linie kodu w komponentach. Możesz jednak rozwiązać ten problem za pomocą Contextu albo zmieniając kompozycję komponentów.
W powyższym przykładzie obiekt data jest dostępny dla wielu komponentów bez konieczności przekazywania go przez komponenty pośrednie (tutaj: ComponentWrapper).
Przekazywanie callbacków w górę przez komponenty, które ich nie potrzebują
Ten sam problem co z propsami (callbacki też są propsami), ale dane płyną w odwrotnym kierunku - co wydaje się sprzeczne z ideą Reacta (React renderuje bowiem z góry na dół).
Kiedy używać Reduxa?
Nawet twórcy i kontrybutorzy Reduxa powiedzą Ci, że powinieneś używać go z rozmysłem. Po dokładnym przemyśleniu architektury aplikacji możesz rozważyć to narzędzie w następujących przypadkach:
- Kiedy potrzebujesz middleware do różnych celów. Na przykład do logowania akcji, raportowania błędów, wysyłania kolejnych żądań zależnie od odpowiedzi serwera itd.
- Kiedy dane pochodzące z wielu endpointów wpływają na jeden komponent lub widok.
- Kiedy chcesz mieć większą kontrolę nad akcjami w swoich aplikacjach. Redux umożliwia śledzenie akcji i zmian danych, co bardzo upraszcza debugowanie.
- Kiedy nie chcesz, żeby odpowiedź serwera bezpośrednio zmieniała stan Twojej aplikacji. Redux dokłada warstwę, w której decydujesz, jak, kiedy i czy w ogóle te dane mają zostać zastosowane.
- Wzorzec obserwatora. Zamiast tworzyć wielu wydawców i subskrybentów w całej aplikacji, po prostu podłączasz komponenty do store'a Reduxa.
Kiedy Redux to przerost formy nad treścią, a Context API wystarczy?
Jeśli nie używałeś jeszcze Context API (jego nowa wersja pojawiła się w React 16.3, poprzednie API miało charakter raczej eksperymentalny i odradzano używanie go wprost w aplikacjach), warto spróbować go w sytuacjach, w których nie korzystasz z większości możliwości Reduxa. Oto warunki, w których Context może wystarczyć:
- Zarządzanie stanem dostępne z każdego komponentu. To za mało, żeby sięgać po Redux, który wprowadza zbyt dużo abstrakcji jak na taki cel.
- Middleware nie jest potrzebny. Reducery wykonują proste, przewidywalne działania, a kolejność otrzymywanych danych nie ma znaczenia dla aplikacji.
- Potrzebujesz czegoś w rodzaju danych globalnych („theme” to przykład, który często widuję, podglądając aplikacje w DevTools).
Podsumowanie
Redux to świetne narzędzie dla tych, którzy naprawdę je rozumieją i sięgają po nie wtedy, gdy wymaga tego architektura kodu. Dziś programiści mierzą się z wyzwaniami w utrzymaniu zastanego kodu, który bywa przekombinowany i mylący. Zastąpienie Redux Store Contextem z Reacta to propozycja, którą programiści React mogą rozważyć przy refaktoryzacji.
Jesteśmy Ideamotive – firmą tworzącą dedykowane aplikacje webowe. Budujemy najwyższej klasy aplikacje internetowe z kodem najwyższej jakości. Szukasz bohaterów, którzy pomogą Ci w kolejnym przedsięwzięciu? Napisz do nas!
