Napredni ReactJS: Najbolje prakse za React + Redux + Sagas

kava za razmišljanje

Prvo stvari, brzi uvod o tome što je React. To je JavaScript knjižnica koja se koristi za izgradnju korisničkih sučelja. Izmijenila je prednji razvojni krajolik otkad je izašao. Dakle, ako se želite boriti za napredne web programere za razvojne programere kao što su React ili Vue.js, gotovo je nužno u današnjoj industriji. Evo sjajnog vodiča ako tek počinjete učiti React. https://reactjs.org/tutorial/tutorial.html.

Sjećam se kad sam počeo učiti React. Uvijek sam imao tjeskoban osjećaj da nikada neću moći naučiti sve što mi je potrebno, neprestano mijenjajući JavaScript jezik koji mi se nadvio nad glavom, a ako ikad uspijem nešto ispraviti, uvijek bih se zapitao, je li to zaista najbolji način to učiniti? Nakon doslovno stotina internetskih tutorijala, pretraživanja na Youtubeu i nedovršene (i najvjerojatnije neoprane) šalice kave, napokon sam čvrsto shvatio što React pokušava unijeti u JavaScript tablicu.

No, uvijek sam se trudio pronaći tutorial koji sve napredne koncepte Reacka spaja u jedan kompaktni tutorial.

Također, sjećam se da sam teško razumjela te koncepte kada su korišteni u velikom izvornom kodu. To je jaz koji ovaj članak pokušava popuniti. Napredni alati i koncepti ugrađeni su u našu jednostavnu aplikaciju, to je isključivo u svrhu udžbenika i ne biste trebali koristiti te koncepte ako vam njihova aplikacija ne treba.

Dosta sa ćaskanjem. Pričajmo kod. Preuzmite gotov kôd s ovog repo-a i slijedite README da biste vidjeli i osjetili što ćemo ovdje graditi. https://github.com/jelorivera08/react-starter-pack.

Odredišna stranica aplikacije

Gore možete vidjeti prikazano stanje brojanja i četiri gumba koji pokreću njihove radnje. Njihovi su postupci sami po sebi razumljivi.

selektora

Nastavite do datoteke selectors.js unutar spremnika Counter, prvi napredni koncept koji ovdje rješavamo je createSelector. Gledajući kôd, najprije, varijabla brojanja const dohvaća stanje broja unutar stabla redux stanja koristeći state.get ('count').

Zatim kreiramo selektor navedenom metodom. To nam pomaže da formatiramo stanje / podatke koje dobivamo iz redux stanja stabla i to, štedimo puno vremena kodirajući nove funkcije koje se bave prestrukturiranjem stanja ili formatiranjem ciljnog stanja svaki put kada nam zatreba da se napravi nešto ispred -kraj. U ovom primjeru nisam promijenio stanje koje sam primio. Upravo sam vratio običnu državu u demo svrhe.

Zatim će se rezultirajuća funkcija koristiti unutar mapStateToProps, a sa mapStateToProps, naravno, sljedeća stvar za konfiguriranje je mapDispatchToProps.

stvaraju radnje

Kad god je slanje akcija reduktora, uvijek moramo prijaviti njegov tip i odgovarajući slučaj preklopnika na reduktor koji će unijeti kasnije kako bismo promijenili stanje aplikacije. Paketom createActions iz reduxsaucea jednim kamenom možemo pogoditi dvije ptice. Trebali bismo također formatirati reduktor s redukcijskom čašom kako bismo u potpunosti iskoristili ovaj paket.

reduktor

Iznad je reduktor naše aplikacije. Početno stanje je od API-ja API od nepromjenjivog okruženja priloženo, a kako se primjenjuje naziv paketa, štiti početno stanje od mutiranja. React je vrlo strog s ovim konceptom, tako da uvijek imajte to na umu. API createReducer iz reduxsauce ima dva argumenta.

Prvo, početno stanje. Drugo, objekt koji ima ključeve za akcijske tipove i vrijednosti kao funkciju koju će reduktor aktivirati jednom kad tip odgovara dispečerskom pozivu. Spajanje tada u skladu s tim mijenja stablo reduksova stanja. Ne postoji aplikacija u stvarnom životu koja ne zna upravljati asinkronim API-jevima, zar ne? Pravo.

redux saga

Evo saga dijela našeg programa. Sve je isto, osim načina na koji nazivamo svoje postupke. Mi koristimo radnju tipa koju smo kreirali ranije i koristimo ih unutar naše sage promatrača kako bismo slali asinhrone pozive koji će kasnije utjecati na naše stablo redukcijskih stanja.

Odgoda je tu da ismijava kašnjenje mreže radi puno boljeg osjećaja asinhije u aplikaciji. I na kraju, budimo sigurni da ne zaboravimo na performanse.

dijeljenje koda

Dijeljenje koda je sjajan način poboljšanja performansi web aplikacija. JavaScript kôd uzima najviše plaćanja na podacima korisnika. Imajte na umu da, tako s dijeljenjem koda, omogućuje krajnjem korisniku da preuzme samo onaj dio koda koji mu je potreban za učinkovitost potrošnje podataka.

U zaključku,

Postoji puno paketa i alata koji nam pomažu, softverskim inženjerima da stvaraju čistiji i mnogo učinkovitiji kod. dolazi s troškovima, troškom razumijevanja temeljnog sustava i razmišljanja u React-u.

Učenje React zahtijeva od vas da svoje paradigme kodiranja prebacite u mnogo drugačiju onu u odnosu na prethodni mentalni skup kodiranja u prednjem kraju. Alat i paketi o kojima sam raspravljao u ovom članku obuhvaćaju one principe potrebne za lijepo i učinkovito kodiranje React-a, a to je ono što čini izuzetnog programera.

Uvijek su to sitnice.

S tim se nadam da sam vam pomogao u daljnjem razumijevanju React-a ovim malim člankom. Živjeli!