Poradnik dla początkujących, jak reagować / redux - jak zacząć się uczyć i nie być przytłoczonym

Zdjęcie Roman Mager na Unsplash

Oświadczenie: Jest to przewodnik dla początkujących napisany przez początkującego React / Redux.

Nauka nowej struktury JavaScript w 2017 roku może być trudnym zadaniem. Powiedzmy, że w końcu dogoniłeś Angulara, ale wszyscy przeszli na nową błyszczącą rzecz o nazwie React. Przeczytałeś kilka samouczków i nie możesz się doczekać konfiguracji nowego projektu React. Czekaj, jest jeszcze jeden artykuł mówiący, że powinieneś używać Redux do zarządzania stanem swojej nowej aplikacji. Wszyscy początkujący mogą odnosić się do tego artykułu. Uważam się za pośrednika i nadal tak się czuję.

Kiedy próbowałem uruchomić mój projekt React / Redux, przeglądam niezliczone artykuły na temat struktury mojego katalogu plików: pliki pogrupowane według typu, pogrupowane według komponentów, pogrupowane według domeny… itd.

źródło: http://gph.is/2k9DFT4

Uświadomiłem sobie, że muszę gdzieś zacząć. Chwila aha przyjdzie później. W trakcie tego procesu zrozumiałbym zalety i wady każdego podejścia. Po tym może nastąpić bolesne refaktoryzacja, ale będzie to cenna lekcja. I tak budowałem, żeby się uczyć.

Krok 1: Wybierz uparte podejście i trzymaj się go

Wykonałem ten samouczek.

Podejście do nauki polegało na rozpoczęciu kodowania własnej aplikacji, postępując zgodnie z procesem myślowym autora. Uważam ten artykuł za jeden z najbardziej pomocnych samouczków. Nadal może to być zbyt wiele dla kogoś, kto zaczyna w React / Redux, więc udokumentowałem swoją podróż i przekształciłem ją w skróconą wersję samouczka.

Krok 2: Zacznij od małego

Na początku mój cel był naprawdę prosty: wyrenderuj listę artykułów, które zbierałem za pomocą aplikacji do gromadzenia wiadomości. Odpowiedź z bazy danych wiadomości będzie zbiorem artykułów o następującej strukturze danych.

Renderuj listę artykułów o Ethereum

Krok 3: Wybierz płytę grzewczą

Użyłem płyty kotłowej stworzonej przez moich uroczych instruktorów w Akademii Fullstack. (Nie złapałem tam pociągu React / Redux. Moja kohorta jest ostatnią uczącą się AngularJS) Wybrałem tę płytę kotłową, ponieważ używa javascript Fullstack: React / Redux frontend i Express / Sequelize / PostgreSQL dla backendu. Na potrzeby tego ćwiczenia trochę posprzątałem płytę główną dla osób bez Express / Sequelize / PostgreSQL. Od teraz będziemy współpracować tylko z React / Redux.

Oto repozytorium zawierające punkt początkowy i ukończony kod do tego ćwiczenia.

To jest struktura plików.

src /
  składniki/
    ListView.js
    ListRow.js
  pojemniki /
    ArticlesIndex.js
  usługi /
    artykuły.js
  sklep/
    artykuły /
      action.js
      actionTypes.js
      reduktor.js
    index.js

Zanim przejdziesz do tego samouczka, jeśli terminy takie jak akcja i reduktor nie dzwonią, bardzo polecam przeczytanie podstawowej koncepcji w oficjalnej dokumentacji Redux lub w artykule, który napisałem:

Krok 4: Rozpocznij od stanu Redux

W jakim stanie jest nasza aplikacja? Mówimy o prostej jednostronicowej aplikacji z listą artykułów. Musimy przechowywać listę artykułów pobranych z serwera. Jeśli spojrzysz na artykuły.js w src / services / artykuły, zobaczysz tablicę zapełnioną artykułami. Ponieważ celem tego ćwiczenia jest zapoznanie się z przepływem danych architektury React / Redux, funkcja getAllArticles () bezpośrednio zwraca potrzebne artykuły. W prawdziwym świecie ta funkcja będzie asynchronicznym wywołaniem niektórych zdalnych interfejsów API.

Teraz pytanie brzmi: jak ustrukturyzować nasz stan. Odpowiedź serwera (lub w tym przypadku funkcja getAllArticles) to tablica obiektów. Możemy umieścić to w naszym stanie.

Ale czy to najlepszy sposób na modelowanie stanu? Zastanów się nad scenariuszem, w którym musisz zaktualizować artykuł, aplikacja będzie iterować po tablicy, aby znaleźć wiadomości, których szukasz. Co jeśli rozmiar tablicy jest naprawdę duży? To podejście nie będzie zbyt wydajne.

Jeśli ustrukturyzujemy nasz stan za pomocą obiektu, dostęp do artykułu stanie się wyszukiwaniem. Aby renderować artykuły, możemy przechowywać dodatkową tablicę identyfikatorów.

Krok 5: Zaimplementuj przepływ danych dla swojego stanu od początku do końca

Jak zaktualizować ten stan? W tym miejscu wkraczają działania i reduktor. Rozważmy następujący schemat:

Jaka jest nasza interakcja z użytkownikiem? Chcemy wyświetlić listę artykułów po wczytaniu strony, aby nie była to interakcja. Aby to zrobić, zaczynamy od componentDidMount w widoku React. Możemy wysłać akcję pobierania artykułów i powiadomić reduktora. Reduktor oceni działanie i zaktualizuje stan. Zaktualizowany stan spowoduje wyrenderowanie komponentu.

Zacznijmy od zdefiniowania rodzaju działań, które ma nasza aplikacja. Jest to prosta stała definicja pobierania artykułów. Później zawsze możemy dodać więcej definicji, takich jak aktualizacja wpisu lub usunięcie wpisu.

Przejdźmy teraz do akcji. Pamiętaj, że odpowiedź, którą otrzymujemy z backendu, jest tablicą obiektu, zamieniamy go w obiekt za pomocą klawisza funkcyjnego lodash.

Reduktor ocenia zwykły obiekt zawierający typ akcji i jej ładunek. Następnie przechowuje dane w stanie.

Krok 6: Renderuj

Zamierzamy podłączyć kontener o nazwie ArticleIndex do stanu artykułu. AritcleIndex to inteligentny kontener, który może komunikować się ze sklepem Redux. W artykule ArticleIndex znajduje się głupi komponent o nazwie ListView, napisany przez Tal Kol, autora samouczka Redux, którego śledziłem. Możesz pobrać implementację w folderze komponentów.

ListView pobiera articleById, tablicę identyfikatorów artykułów i funkcję renderowania. Następnie renderuje listę artykułów.

W jaki sposób otrzymujemy artykułyById i tablicę identyfikatorów artykułów do wyświetlenia? Oto przegląd podstawowej koncepcji Redux. Widok React jest połączony ze stanem Redux za pośrednictwem funkcji Connect zapewnianej przez bibliotekę React-Redux.

Oto kod, który robi to, co opisuje ten diagram. Na dole mapujemy stan Redux i wysyłamy do rekwizytów React. W componentDidMount wywołujemy loadArticles, który wywołuje akcję fetchAllArticles. Po zaktualizowaniu stanu o artykuły, artykułyById są przekazywane do widoku React przez mapStateToProps.

I to wszystko! W naszej przeglądarce mamy listę artykułów!

Krok 7: Anti-pattern gdzieś w kodzie?

Aby nauczyć się przepływu danych w React / Redux, do tej pory przeoczyliśmy kolejną koncepcję Redux. Składnik React powinien uzyskać dostęp do stanu Redux poprzez selektory. Selektory zwykle znajdują się w plikach reduktora.js. Są to czyste funkcje, które uzyskują dostęp do stanu Redux i zwracają niektóre właściwości stanu. Gdy selektory są na miejscu, jeśli zmienisz jeden ze swoich stanów Redux, który wpływa na więcej niż jeden komponent, wystarczy zaktualizować selektor.

Oto nasz selektor getArticles:

Funkcja mapStateToProps w ArticleIndex.js staje się:

Premia: Postępuj zgodnie z tym samym procesem myślowym i zbuduj filtr

Z listą artykułów możemy dodać kilka różnych operacji. Na przykład wszystkie artykuły są wiadomościami o Ethereum. Są one podzielone na dwa typy: wiadomości ze społeczności kryptowalut i wiadomości z głównych mediów. Po wyrenderowaniu listy artykułów dodałem filtr typu, stosując ten sam proces myślowy.

Spłucz, powtórz, refaktoryzuj

Uczenie się React / Redux jest jak wskakiwanie do króliczej nory, ale zmieniło mnie ze sceptyka w wierzącego. Mam nadzieję, że ten artykuł przyspieszy naukę.

Od początkowego etapu, mój projekt edukacyjny zmienił się w agregator wiadomości i aplikację do śledzenia trendów!

Dziękuję za przeczytanie!

Jeśli korzystasz ze Steemit, mediów społecznościowych typu blockchain (trochę jak dziecko miłości z Reddit i Medium), wpadnij tutaj: