React Redux – co to jest?

React Redux – definicja

Redux to darmowa biblioteka zarządzania stanem obiektu, która działa na froncie aplikacji JavaScript, nadzorując stan każdego komponentu w UI.

Biblioteka Redux ułatwia oddzielenie kodu, który zarządza i przechowuje dane w aplikacji od kodu odpowiedzialnego za zarządzanie zdarzeniami i ich wpływem na różne komponenty UI aplikacji. Chociaż Redux jest niezależną biblioteką zarządzania stanem obiektu, używanie go z dowolnym frameworkiem lub biblioteką front-end wymaga powiązania go z biblioteką UI, która obsługuje logikę interakcji kontenera stanu.

Zespół Redux stworzył trzy biblioteki, a mianowicie Redux, React-Redux i Redux Toolkit. Wszystkie współpracują ze sobą, aby maksymalnie usprawnić pracę developerów.

Sam React (ReactJS) to właśnie biblioteka języka programowania JavaScript, która służy do tworzenia interfejsów graficznych. Wykorzystuje ona wirtualny DOM (Document Object Model – obiektowy model dokumentu).

React-Redux to oficjalna biblioteka wiążąca UI Redux dla aplikacji React, która jest regularnie aktualizowana i usprawniana przez zespół Redux.

Redux – podstawowe informacje

• Rodzaj technologii – biblioteka JavaScript
• Twórcy – Dan Abramov i Andrew Clark
• Technologia wykorzystana do stworzenia – TypeScript
• Rok wydania – 2015
• Oficjalna strona internetowa – redux.js.org
• Profil na GitHub – Redux

React – podstawowe informacje

• Rodzaj technologii – biblioteka JavaScript
• Twórca – Jordan Walke
• Technologia wykorzystana do stworzenia – JavaScript
• Rok wydania – 2013
• Oficjalna strona internetowa – reactjs.org
• Profil na GitHub – React

Połączenie React + Redux

Choć Redux może skutecznie działać z wieloma innymi frameworkami, to jednak najczęściej wykorzystuje się go w parze z React. Jest tak, gdyż React został zaprojektowany z koncepcją stanów obiektu i cykli życia. Oprócz tego w React stan nie może być modyfikowany bezpośrednio – da się to zrobić jedynie poprzez funkcję setState.

W rezultacie w przypadku Redux łatwiej zastosować koncepcję React, gdyż obie technologie podzielają to samo podejście w stosunku do stanu obiektu.

Zalety połączenia React-Redux

Oto inne powody, dla których React oraz Redux świetnie ze sobą współgrają:

1. Wydajność

Domyślnie, gdy komponent jest aktualizowany, React ponownie renderuje wszystkie elementy wewnątrz części danego drzewa je gromadzącego. W takim przypadku, gdy dane dla danego komponentu się nie zmieniły, wspomniane ponowne rendery są marnowane.

Redux pomaga w takiej sytuacji usprawnić wydajność, gdyż pomija tego typu niepotrzebne ponowne renderowania i dopilnowuje, aby zachodziły tylko wtedy, gdy faktycznie dojdzie do zmiany danych.

2. Przechowywanie wszystkich typów danych

Ponieważ dane przechowywane w Reduxie utrzymują się do czasu odświeżenia strony, technologia ta jest wykorzystywana do przechowywania długoterminowych danych, które są wymagane podczas nawigacji użytkownika w aplikacji.

React natomiast sprawdza się świetnie, gdy w grę wchodzi przechowywanie krótkoterminowych danych, które w wyniku interakcji użytkownika zmieniają się szybko.

3. Debugowanie podróży w czasie

W React śledzenie stanu aplikacji podczas debugowania jest żmudnym zadaniem. Redux usprawnia jednak ten proces, gdyż reprezentuje cały stan aplikacji w dowolnym momencie, co pozwala stosować debugowanie podróży w czasie (time-travel debugging).

Architektura Redux – na czym polega?

W przypadku Reduxa można wymienić 3 fundamentalne zasady funkcjonowania:

• zmiany wykonywane są w ramach czystych funkcji,
• stan jest tylko do odczytu,
• pojedyncze źródło prawdy.

Oprócz tego Redux bierze wiele inspiracji z architektury Flux i nawet sam autor Reduxa uważa go za świetną implementację tego podejścia.

Flux to z kolei architektura aplikacji (stanowiąca raczej wzorzec, niż konkretny framework), którą Facebook wykorzystuje do budowania aplikacji internetowych po stronie klienta. Uzupełnia ona kompozycyjne komponenty widoku Reacta poprzez wykorzystanie jednokierunkowego przepływu danych.