Redux

Redux to biblioteka Java Script, która służy do zarządzania stanem aplikacji zarówno frameworku React.js, opartego na komponentach, jak i Angular. Stanowi on swoiste rozwinięcie architektury flux – wzorca architektury aplikacji, której główną cechą jest jednokierunkowy przepływ informacji. Opiera się na założeniu, iż każdy stan komponentu jest wynikiem poprzedniego stanu, który został zmodyfikowany przez konkretną akcję, które to założenie umożliwia łatwe testowanie, zapisywanie i wznawianie tego stanu.

Architektura Redux

Redux opiera się na koncepcji jednokierunkowego przepływu danych i globalnego stanu aplikacji. Struktura tej biblioteki składa się z kilku kluczowych elementów, które razem pozwalają na efektywne zarządzanie stanem.

1. Store – centralne miejsce przechowywania stanu
   Redux posiada jedno centralne źródło prawdy, czyli store (magazyn). Jest to obiekt przechowujący całość stanu aplikacji. Dzięki temu różne komponenty mogą łatwo uzyskiwać dostęp do danych i nie muszą polegać na przekazywaniu ich przez wiele poziomów drzewa komponentów.
2. Actions – sposób na komunikację
   Zmiany w stanie aplikacji są inicjowane poprzez akcje (actions). Akcja to zwykły obiekt JavaScript, który zawiera obowiązkową właściwość type, określającą rodzaj operacji, oraz opcjonalne payload, czyli dodatkowe dane potrzebne do aktualizacji stanu. Akcje są jedynym sposobem na modyfikację stanu w Reduxie.
3. Reducers – mechanizm aktualizacji stanu
   Funkcje reducer są odpowiedzialne za obsługę akcji i modyfikację stanu aplikacji. Reducer przyjmuje dwa argumenty: poprzedni stan oraz akcję, a następnie zwraca nowy stan na podstawie przekazanych danych. Reducery muszą być czystymi funkcjami, co oznacza, że nie powinny modyfikować wejściowego stanu, lecz zwracać jego nową wersję.
4. Dispatch – wywoływanie akcji
   Aby zmienić stan, należy wywołać akcję za pomocą funkcji dispatch. Wywołanie store.dispatch(action) powoduje przesłanie akcji do reducera, który następnie generuje nowy stan.
5. Selectors – efektywne pobieranie danych ze store
   Chociaż aplikacje mogą uzyskiwać dostęp do stanu bezpośrednio, w praktyce często używa się selektorów. Są to funkcje, które pozwalają wydobywać określone fragmenty stanu w zoptymalizowany sposób, minimalizując niepotrzebne renderowanie komponentów.
6. Middleware – rozszerzanie funkcjonalności Reduxa
   Middleware w Reduxie pozwala na obsługę asynchronicznych operacji, np. zapytań do API. Najczęściej używane middleware to Redux Thunk i Redux Saga, które umożliwiają obsługę logiki biznesowej i efektów ubocznych, takich jak pobieranie danych czy logowanie akcji.

Czy szukasz wykonawcy Redux ?

Sprawdź case studies

Redux – debugowanie podróży w czasie

W każdym projekcie opartym o React.js lub Angular, wraz ze stopniem jego skomplikowania pojawia się problem przekazywania atrybutów z komponentów nadrzędnych (rodziców) do podrzędnych (dzieci). Redux pozwala wyeliminować ten problem, ponieważ za jego pomocą można oddzielić warstwę administrowania stanem aplikacji od kodu komponentów, które powinny odpowiadać jedynie za prezentację danych. Biblioteka ta ma wiele zalet, jednak korzystanie z niej wymaga doskonałej znajomości Java Script i jednego z jego frameworków. Przede wszystkim cechuje go spora przewidywalność kodu, dzięki czemu aplikacje zachowują się spójnie i działa poprawnie w różnych środowiskach (serwer, przeglądarka). Ułatwia również łatwe debugowanie kodu i śledzenie, w którym momencie zmienił się stan komponentu, czyli umożliwia tzw. debugowanie podróży w czasie. Redux oferuje przy tym swoistą centralizację stanu i całej logiki aplikacji, dzięki możliwości cofania, ponawiania czy utrwalania stanu. Jest niezwykle elastyczny, dlatego też działa poprawnie w każdej warstwie interfejsu, a ponadto posiada spore zaplecze dodatków ułatwiających pracę.

Użycie Reduxa - kiedy warto zdecydować się na tę bibliotekę?

Decyzja o użyciu Reduxa zależy od kilku czynników, takich jak skala projektu, ilość danych do przechowywania, złożoność architektury, liczba interakcji między komponentami oraz potrzeba zachowania spójności i przejrzystości kodu. Jest szczególnie przydatny w projektach o dużej skali i złożonej logice biznesowej, gdzie zarządzanie stanem na poziomie komponentów staje się nieefektywne i prowadzi do nieporządku w kodzie. Dodatkowo, może ułatwić testowanie aplikacji oraz zapobiegać błędom związanym ze stanem, ponieważ stan jest przechowywany w jednym, globalnym magazynie. Mimo że Redux wymaga dodatkowego kodu i czasu na jego implementację, jego korzyści w dużej mierze przewyższają koszty. 

SPRAWDŹ SWOJĄ WIEDZE Z TEMATU redux

Pytanie

 1/5

Kto stworzył bibliotekę Redux?

Ryan Florence i Michael Jackson

Dan Abramov i Andrew Clark

Jordan Walke i Christopher Chedeau

Max Stoiber i Guillermo Rauch

Sprawdź odpowiedź

Jak nazywa się funkcja, która jest odpowiedzialna za modyfikowanie stanu aplikacji w Redux?

Middleware

Dispatcher

Action

Reducer

Sprawdź odpowiedź

Co jest głównym celem Redux?

Wspomaganie nawigacji w aplikacji

Wirtualne drzewo DOM

Zarządzanie stanem aplikacji

Obsługa animacji

Sprawdź odpowiedź

Jakiej funkcji używa się, aby zarejestrować reducer w Redux?

combineReducers

registerReducer

applyMiddleware

createStore

Sprawdź odpowiedź

Jak nazywa się metoda, która pozwala na aktualizację stanu magazynu (store) w Redux?

update

dispatch

push

send

Sprawdź odpowiedź

Przykłady znanych firm korzystających z Reduxa w swoich projektach

Jednym z największych użytkowników Reduxa jest Facebook, który wykorzystuje go w swoich aplikacjach, takich jak Instagram i Messenger. Airbnb również  z niego korzysta w swojej aplikacji webowej. Kolejnym przykładem jest Netflix, który wykorzystuje go do zarządzania stanem swojej aplikacji desktopowej. Redux jest stosowany w projektach takich firm jak Microsoft, IBM, Uber czy Dropbox.