Dzieliłam się już swoją ścieżką nauki jeśli chodzi o React JS. Następnym krokiem było dla mnie opanowanie Flux i Redux’a.
Co znajdziesz w artykule?
➡ Redux? Ale po co?
➡ Flux a Redux
➡ Materiały na start (także po polsku 🙂 )
➡ Przydatna wtyczka do pracy z Redux’em
➡ Co przechowywać w Redux Store, a co poza?
Dlaczego?
React wprowadził coś naprawdę fajnego. Zamiast aktualizować drzewo DOM, przechowujesz stan aplikacji. Manipulujesz tym stanem, nie samym drzewem.
W wielu aplikacjach naprawdę jest to problem. Aktualizujesz jedno wyświetlane pole z pięciu różnych miejsc. Jeśli coś przestaje działać albo działa niezgodnie z oczekiwaniami, gdzie szukać problemu? Błędu? Co spowodowało niepożądany rezultat?
„Managing this ever-changing state is hard. If a model can update another model, then a view can update a model, which updates another model, and this, in turn, might cause another view to update. At some point, you no longer understand what happens in your app as you have lost control over the when, why, and how of its state.”
Źródło: http://redux.js.org/docs/introduction/Motivation.html
React rozwiązuje problem zgodności widoku ze stanem aplikacji. Jednak zarządzanie stanem pozostawia Tobie. I tu właśnie do gry wchodzi Flux i Redux!
Flux jest to architektura aplikacji zaprojektowana i wykorzystywana przez Facebook’a do budowy aplikacji webowych (po stronie klienta). Uzupełnia w działaniu React. Flux to bardziej wzorzec projektowy. Jedną z jego najpopularniejszych implementacji jest Redux.
Redux służy do zarządzania stanem aplikacji. Często stosowany jest razem z React’em, ale nie są nierozłączne. React nie jest wymogiem dla Redux’a, tak jak Redux nie jest wymogiem dla React’a.
W swoim projekcie korzystam właśnie z Redux’a.
Gdzie szukać informacji na start?
Tutaj z czystym sumieniem mogę polecić artykuły na blogu NaFrontendzie:
Naprawdę sensownie wytłumaczone!
Kolejnym źródłem wiedzy, do którego sięgnęłam był tutorial LearnCode.academy na Youtube.
Równie często sięgałam do dokumentacji na stronie Redux.js.org. Redux jest tam wytłumaczony na podstawie aplikacji Todo. Zresztą, jeśli czegoś nie rozumiałam, analizowałam przykłady zamieszczonych na Github aplikacji. W moim przypadku zwłaszcza Todos i TodoMVC.
Ogólnie uważam, że analiza cudzego kodu bywa świetnym sposobem na naukę. Tutoriale często pomijają pewne rzeczy. W kodzie innych możesz dostrzec prawdę. Ale i kłamstwo. Kłamstwo często nazywa się anty-wzorcem (anti-pattern). Jakie wzorce warto stosować, a na jakie anty-wzorce uważać w Redux’ie?
Ogólnie trafiłam jeszcze na kurs od samego autora Redux’a – Dan Abramov (@dan_abramov). I to za darmo – Getting Started with Redux na egghead.io. Niestety nie przerabiałam go jeszcze, ale zapewne do niego przysiądę niedługo.
Prywatnie uwielbiam kursy egghead.io. Są naprawdę świetnej jakości, a sporo z nich udostępnianych jest właśnie za darmo!
O ile Flux okazał się banalny (?), o tyle Redux taki prosty już nie był. W zasadzie mam teraz w planach zapoznać się bardziej szczegółowo ze stroną Redux.js.org… Choć wierzcie mi, jest tam całkiem sporo tej wiedzy 😉
Przydatne wtyczki
Zginęłabym bez Redux Dev Tools!
Dzięki niej jestem w stanie podejrzeć stan aplikacji. Zauważyć czy zmiany zapisują się w Redux Store, czy zapisują się poprawnie. Gdyby nie to rozwiązywanie wielu problemów trwałoby zapewne dużo dłużej.
Problemy i pytania
z którymi zetknęłam się na samym początku?
Co przechowywać w Redux Store, a co poza?
Bynajmniej nie wszystko. Chodzi bardziej o stan całej aplikacji. Dane, do których potrzebujesz dostępu w różnych miejscach, komponentach. Nie stan UI, jak np. nazwa widoku, w którym jesteś, nazwy przycisków.
Dla przykładu:
W Redux Store nie ma sensu przechowywać nazwy „Planuj nowy post” czy podpowiedzi „Nazwa”, „Opis” ani nawet nazw button’ów: „Anuluj”, „Dodaj”. To stan UI. Za to dostępne kanały (Facebook, Twitter, itp.), narzędzia (Buffer, Hoostuite, itd.) to już stan aplikacji. Głównie dlatego, że nie jest to stałe wyposażenie tego widoku. Jeśli użytkownik doda nowy kanał – znajdzie się on na liście. Także dostęp do tej listy musi być możliwy nie tylko w tym komponencie.
Wiem, że artykuł jest dość ogólny. Tak naprawdę na temat Redux’a można by dużo napisać. Miejsca, do których Was odsyłam dostarczają moim zdaniem wystarczającej i świetnej wiedzy z zakresu Redux’a. Myślę o tym, żeby za jakiś czas wejść głębiej w temat i wytłumaczyć pewne techniczne kwestie związane z Redux’em na przykładzie mojej aplikacji.
Zapraszam do komentowania. Wszelkie uwagi odnośnie tego, co powinnam, jak powinnam, itp. mile widziane.
Jeśli coś jest niezrozumiałe – również dawaj znać. Wytłumaczę.
