Advanced ReactJS: Cele mai bune practici pentru React + Redux + Sagas

cafea pentru gândire

Primele lucruri în primul rând, o introducere rapidă despre ceea ce este React. Este o bibliotecă JavaScript folosită pentru construirea de interfețe de utilizator. Acesta a schimbat peisajul de dezvoltare front-end încă de la apariția sa. Așadar, dacă aspirați să fiți un dezvoltator web de biblioteci care învață biblioteci precum React sau Vue.js este aproape esențial în industria de astăzi. Iată un tutorial excelent dacă tocmai începi să înveți React. https://reactjs.org/tutorial/tutorial.html.

Îmi amintesc când am început să învăț React. Am avut întotdeauna senzația de nerăbdare că nu aș putea învăța niciodată tot ce aveam nevoie, limbajul JavaScript mereu schimbător care îmi apare peste cap și, dacă aș face vreodată ceva corect, aș sfârși mereu să mă întreb, oare chiar a fost cel mai bun mod să o facă? După literalmente sute de tutoriale online, căutări de pe Youtube și căni de cafea neterminate (și cel mai probabil nespălate), am avut în sfârșit o înțelegere fermă a ceea ce React încearcă să aducă în tabelul JavaScript.

Totuși, m-am străduit întotdeauna să găsesc un tutorial care să grupeze toate conceptele avansate de React într-un singur tutorial compact.

De asemenea, îmi amintesc că am greșit să înțeleg aceste concepte atunci când au fost utilizate într-un cod sursă mare. Acesta este golul pe care încearcă să îl completeze acest articol. Instrumentele și conceptele avansate sunt încorporate în aplicația noastră simplă, aceasta este exclusiv în scop tutorial și nu ar trebui să folosiți aceste concepte dacă aplicația dvs. nu are nevoie de ele.

Suficient cu chit-chat-ul. Să vorbim de codul de vorbire. Descărcați codul terminat din acest repo și urmați README pentru a putea vedea și simți ce vom construi aici. https://github.com/jelorivera08/react-starter-pack.

Pagina de destinație a aplicației

Mai sus, puteți vedea starea de numărare afișată și patru butoane care declanșează acțiunile respective. Acțiunile lor sunt auto-explicative.

selectoare

Accesați fișierul selectors.js din containerul Counter, primul concept avansat pe care îl abordăm aici este createSelector. Analizând codul, mai întâi, variabila const constă în starea de numărare din arborele de stat redux folosind state.get („count”).

Apoi, creăm un selector folosind metoda menționată. Acest lucru ne ajută să formatăm starea / datele pe care le primim din arborele de stare Redux și, făcând acest lucru, economisim mult timp codând noi funcții care gestionează restructurarea de stat sau formatarea stării țintă de fiecare dată când avem nevoie de aceasta pentru a reda ceva în față. -Sfârșit. În acest exemplu, nu am modificat starea pe care am primit-o. Tocmai am returnat starea simplă în scop demo.

Apoi, funcția rezultată va fi utilizată în mapStateToProps, iar cu mapStateToProps, în mod natural, următorul lucru de configurat este mapDispatchToProps.

creați acțiuni

De fiecare dată când expediați acțiunile reductorului, trebuie să declaram întotdeauna tipul acestuia și carcasa de comutare corespunzătoare unui reductor pe care îl va intra ulterior pentru a schimba starea aplicației. Cu pachetul createActions de la reduxsauce, putem lovi două păsări cu o singură piatră. De asemenea, ar trebui să formatăm reductorul cu reduxsauce pentru a beneficia pe deplin de acest pachet.

reductor

Mai sus este reductorul aplicației noastre. Starea inițială este închisă de API-ul fromJS de la imuabil și, după cum se aplică numele pachetului, protejează starea inițială de a fi mutate. Reacția este foarte strictă cu acest concept, așa că rețineți întotdeauna acest lucru. API-ul createReducer din reduxsauce are două argumente.

În primul rând, starea inițială. În al doilea rând, obiectul care are chei pentru tipuri și valori de acțiune ca o funcție pe care reductorul o va declanșa odată ce un tip se potrivește cu un apel de expediere. Fuzionează apoi schimbă arborele de stare redux în consecință. Nu există o aplicație din viața reală care să nu știe cum să gestioneze apelurile asincrone API, nu? Dreapta.

saga redux

Iată partea saga a programului nostru. Totul este la fel, cu excepția modului în care ne numim acțiunile. Folosim acțiunea de tip pe care am creat-o mai devreme și le folosim în saga noastră de observatori pentru a trimite apeluri asincrone, care vor afecta ulterior arborele nostru de stare redux.

Întârzierea este aceea de a moca latența rețelei pentru o mai bună senzație asincică a aplicației. Oh, și în sfârșit, să ne asigurăm că nu uităm de performanță.

divizare de cod

Divizarea codurilor este o modalitate excelentă de îmbunătățire a performanței aplicațiilor web. Codul JavaScript are cel mai mare impact pe datele utilizatorului. Amintiți-vă că, la fel, cu împărțirea codului, permite utilizatorului final să descarce doar partea de cod de care are nevoie pentru eficiența consumului de date.

In concluzie,

Există o mulțime de pachete și instrumente care ne ajută, inginerii de software creează un cod mai curat și mult mai eficient. vine cu un cost, costul înțelegerii sistemului de bază și asta se gândește în React.

Learning React necesită să vă schimbați paradigma de codare într-una mult mai diferită în comparație cu setul mental anterior de codare în față. Instrumentele și pachetele despre care am discutat în acest articol încapsulează acele principii necesare pentru a codifica frumos și eficient în React și asta este ceea ce face un dezvoltator excepțional.

Întotdeauna sunt lucrurile mărunte.

Cu asta, sper că v-am ajutat să înțelegeți mai mult despre React cu acest articol mic. Noroc!