Jak się uczę: Redux

Angular

Dzisiaj czas na dawkę materiałów do nauki. Ostatnio było na blogu bardzo motywacyjnie, więc myślę, że teraz czas na konkrety. Chcę Wam przedstawić materiały, z których uczę się Reduxa.

Od razu uprzedzę, że za temat Reduxa warto się zabrać dopiero po dobrym opanowaniu JavaScriptu i w czasie opanowywania na przykład Reacta albo Angulara. Reduxa bowiem używa się w aplikacjach napisanych za pomocą bibliotek lub frameworków JS, a także czystego JS. Najczęściej używa się go z Reactem (bo dla Reacta właśnie powstał), ale można go też wykorzystywać np. z Angularem (co robię ja ;)). Ale wracając – jeśli jesteś początkujący lub początkująca, ten temat może być dla Ciebie trochę czarną magią. Nie przejmuj się, zawsze warto sobie poczytać o różnych rozwiązaniach, ale nie trzeba ich wszystkich od razu rozumieć w 100%. Na początek najlepiej skupić się na czystym JS, a dopiero potem ruszać dalej. Tym przydługim wstępem chciałam po prostu powiedzieć, że materiały przydadzą się bardziej osobom bardziej zaznajomionym z JS i frameworkami, niż tym, którzy dopiero zaczynają.

Pierwsze pytanie, które pewnie padnie brzmi – czym jest Redux? Jak podaje oficjalna strona dokumentacji:

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

Co to oznacza w praktyce? Redux pozwala na zarządzanie stanem aplikacji, zamiast bezpośrednich manipulacji w drzewie DOM. Nie będę tutaj zagłębiać się w teorię, ponieważ sama dopiero się uczę i nie jestem ekspertem. Dlatego skupię się na podaniu źródeł, które mi pomogły zrozumieć koncepcję Reduxa i zacząć go stosować w praktyce przy tworzeniu aplikacji. A muszę przyznać, że trochę czasu mi to zajęło. Dość szybko zrozumiałam, jak to ma działać teoretycznie, natomiast długo męczyłam się nad nauczeniem się tego, jak właściwie to zastosować w praktyce i jakie są korzyści z używania Reduxa w aplikacji. Mam nadzieję, że te materiały, pozwolą Wam dojść do tego samego 🙂

Jak już pisałam wyżej, najczęściej używa się Reduxa z Reactem, dlatego większość przykładów dostępnych w sieci opiera się na Reakcie. Jak potrzebowałam nauczyć się, jak używać Reduxa razem z Angularem i trochę musiałam się naszukać. Ale na sam początek warto zapoznać się z samą koncepcją. Tutaj tradycyjnie oczywiście polecam oficjalną dokumentację, którą znajdziecie tutaj. Szczególnie podoba mi się sekcja Examples, która pozwala zrozumieć, na czym ten Redux w ogóle polega i jak działa.

Nieczęsto korzystam z polskich źródeł, ale tym razem naprawdę bardzo pomogły mi dwa polskie blogi. Pierwsze był artykuły z bloga Na Frontendzie Podstawy Redux – zarządzanie stanem aplikacji w ReactJS oraz Redux i RxJS czyli użycie strumieni na przykładach. Sama nie używałam Reduxa z Reactem, natomiast oba artykuły pozwoliły mi zapoznać się ogólnie z mechaniką Reduxa. Kolejne polskie źródło to był artykuł z bloga NetteCode pt. Flux & Redux – moja ścieżka. W tym artykule znalazłam fajne materiały do dalszej nauki (m.in. kurs z EggHead, o którym zaraz napiszę więcej).

W jednym z powyższych artykułów przewinął się temat RxJS, czyli Reactive Extensions for JavaScript. Są to rozszerzenia, które pozwalają wprowadzić do JS ideę programowania reaktywnego. Bardzo często Redux i RxJs występują razem. Żeby dowiedzieć się więcej o samym RxJS, odeślę Was do oficjalnej dokumentacji. Jak już trochę poczytacie i temat Was zainteresuje, to zachęcam do zrobienia kursu Introduction to reactive programming na EggHead.

Powróćmy jednak do samego Reduxa – chyba największym przełomem dla mnie było przerobienie kursu Getting started with Redux na EggHead. Kurs jest cały czas darmowy, a przygotował go sam twórca Reduxa, czyli Dan Abramov. Kurs naprawdę świetnie tłumaczy działanie Reduxa na obrazowych przykładach. Jeśli wolicie czytać, niż oglądać, to mniej więcej to samo co w kursie znajdziecie w tej dokumentacji.

Podstawy też bardzo dobrze tłumaczy artykuł Build Yourself a Redux. Jeśli chodzi o użycie Reduxa już bezpośrednio z Angularem to pomógł mi ten artykuł oraz to video na YouTube.

Mam nadzieję, że zebrane materiały pomogą Wam zapoznać się z podstawami Reduxa. Na sam koniec mogę jeszcze tylko uprzedzić, że zrozumienie i używanie Reduxa może być problematyczne. Ale naprawdę warto zgłębić temat, bo to zupełnie zmienia podejście do pisania aplikacji 🙂 Sami zobaczycie!

Chcesz być na bieżąco? Polub fanpage Wake up and Code i dołącz do grupy Programuj, dziewczyno!

Dodaj komentarz