Advanced ReactJS: najlepsze praktyki dotyczące React + Redux + Sagas

kawa do namysłu

Po pierwsze, krótkie wprowadzenie do React. Jest to biblioteka JavaScript używana do budowy interfejsów użytkownika. Zmieniło krajobraz rozwoju front-end od czasu jego pojawienia się. Jeśli więc chcesz zostać front-endowym programistą, uczenie się bibliotek takich jak React lub Vue.js jest prawie niezbędne w dzisiejszej branży. Oto świetny samouczek, jeśli dopiero zaczynasz się uczyć React. https://reactjs.org/tutorial/tutorial.html.

Pamiętam, kiedy zacząłem uczyć się React. Zawsze czułem niepokój, że nigdy nie będę mógł nauczyć się wszystkiego, czego potrzebuję, ciągle zmieniającego się języka JavaScript wyłaniającego się z mojej głowy, a gdybym kiedykolwiek dostał coś dobrego, zawsze zapytałbym siebie, czy to naprawdę najlepszy sposób zrobić to? Po dosłownie setkach samouczków online, wyszukiwaniach na Youtube i niedokończonych (i najprawdopodobniej nieumytych) filiżankach kawy, w końcu dobrze zrozumiałem, co React próbuje wnieść do tabeli JavaScript.

Jednak zawsze starałem się znaleźć samouczek, który łączy wszystkie zaawansowane koncepcje React w jednym kompaktowym samouczku.

Pamiętam też, że miałem trudności ze zrozumieniem tych pojęć, gdy były one używane w dużym kodzie źródłowym. To jest luka, którą ten artykuł próbuje wypełnić. Zaawansowane narzędzia i koncepcje są wbudowane w naszą prostą aplikację, służy to wyłącznie do celów samouczkowych i nie należy ich używać, jeśli aplikacja ich nie potrzebuje.

Wystarczy z chit-chat. Porozmawiajmy kod. Pobierz gotowy kod z tego repozytorium i postępuj zgodnie z README, aby zobaczyć i poczuć, co tu zbudujemy. https://github.com/jelorivera08/react-starter-pack.

Strona docelowa aplikacji

Powyżej widać stan zliczania i cztery przyciski, które wyzwalają ich odpowiednie działania. Ich działania są oczywiste.

selektory

Przejdź do pliku selectors.js w kontenerze Counter, pierwszą zaawansowaną koncepcją, o której tutaj mówimy, jest createSelector. Patrząc na kod, najpierw zmienna const count pobiera stan count w drzewie stanu redux za pomocą state.get („count”).

Następnie tworzymy selektor przy użyciu tej metody. Pomaga nam to sformatować stan / dane, które otrzymujemy z drzewa stanu redux, a dzięki temu oszczędzamy dużo czasu na kodowaniu nowych funkcji, które obsługują restrukturyzację stanu lub formatowanie stanu docelowego za każdym razem, gdy potrzebujemy go do renderowania czegoś z przodu -koniec. W tym przykładzie nie zmieniłem stanu, który otrzymałem. Właśnie zwróciłem zwykły stan do celów demonstracyjnych.

Następnie wynikowa funkcja zostanie użyta wewnątrz mapStateToProps, a przy mapStateToProps, naturalnie, następną rzeczą do skonfigurowania jest mapDispatchToProps.

tworzyć akcje

Za każdym razem, gdy wysyłamy działania reduktora, zawsze musimy zadeklarować jego typ i odpowiednią skrzynkę przełącznika do reduktora, który wejdzie później w celu zmiany stanu aplikacji. Dzięki pakietowi createActions z reduxsauce możemy trafić dwa ptaki jednym kamieniem. Powinniśmy również sformatować reduktor za pomocą reduxsauce, aby w pełni skorzystać z tego pakietu.

reduktor

Powyżej znajduje się reduktor naszej aplikacji. Stan początkowy jest zawarty w API fromJS z niezmiennego, a ponieważ obowiązuje nazwa pakietu, chroni stan początkowy przed zmutowaniem. Reakcja jest bardzo surowa z tą koncepcją, więc zawsze miej to na uwadze. Interfejs API createReducer z reduxsauce ma dwa argumenty.

Po pierwsze, stan początkowy. Po drugie, obiekt, który ma klucze dla typów akcji i wartości jako funkcję, którą reduktor będzie uruchamiał, gdy typ pasuje do wywołania wysyłki. Scal następnie zmienia odpowiednio drzewo stanu redux. Nie ma prawdziwej aplikacji, która nie wiedziałaby, jak obsługiwać asynchroniczne wywołania API, prawda? Dobrze.

Saga Redux

Oto część saga naszego programu. Wszystko jest takie samo, z wyjątkiem sposobu, w jaki nazywamy nasze działania. Korzystamy z akcji typu, którą wcześniej stworzyliśmy i wykorzystujemy je w naszej sadze obserwatora, aby wywoływać asynchroniczne wywołania, które później wpłyną na nasze drzewo stanu redux.

Opóźnienie polega na naśladowaniu opóźnień w sieci w celu uzyskania lepszego asynchronicznego działania aplikacji. No i na koniec, upewnijmy się, że nie zapomnimy o wydajności.

dzielenie kodu

Podział kodu to świetny sposób na poprawę wydajności aplikacji internetowych. Kod JavaScript ma największy wpływ na dane użytkownika. Pamiętaj, że dzięki podziałowi kodu użytkownik końcowy może pobrać tylko część kodu, której potrzebuje do zwiększenia zużycia danych.

Podsumowując

Istnieje wiele pakietów i narzędzi, które nam pomagają, inżynierowie oprogramowania tworzą czystszy i znacznie wydajniejszy kod. wiąże się z kosztem, kosztem zrozumienia systemu bazowego i tak właśnie myśli React.

Uczenie się React wymaga zmiany paradygmatu kodowania na znacznie bardziej odmienny w porównaniu do poprzedniego sposobu kodowania w interfejsie. Narzędzia i pakiety, które omówiłem w tym artykule, zawierają te zasady, które są potrzebne do pięknego i wydajnego kodowania w React, i to czyni z nich wyjątkowego programistę.

To zawsze małe rzeczy.

Dzięki temu mam nadzieję, że pomogłem Ci lepiej zrozumieć React za pomocą tego małego artykułu. Twoje zdrowie!