Napredni ReactJS: Najboljše prakse za React + Redux + Sagas

kava za razmišljanje

Najprej stvari, hiter uvod o tem, kaj je React. To je knjižnica JavaScript, ki se uporablja za gradnjo uporabniških vmesnikov. Odkar se je pojavila, je spremenila razvojno pokrajino. Če si torej prizadevate postati napredne spletne knjižnice za razvijalce, kot sta React ali Vue.js, je v današnji industriji skorajda nujno. Tu je odlična vadnica, če se šele začnete učiti React. https://reactjs.org/tutorial/tutorial.html.

Spomnim se, ko sem se začel učiti React. Vedno sem imel zaskrbljen občutek, da se ne bi mogel nikoli naučiti vsega, kar sem potreboval, nenehno spreminjajoč se JavaScript jezik mi visi nad glavo, in če bi kdaj kaj dobil, bi se vedno vprašal, ali je to res najboljši način narediti? Po dobesedno na stotine spletnih vadnic, iskanj na Youtube in nedokončanih (in najverjetneje neopranih) skodelic kave, sem končno dojel, kaj React poskuša vnesti v mizo JavaScript.

Vendar sem se vedno trudil najti vadnico, ki bi vse napredne koncepte Reacka združila v eno kompaktno vadnico.

Prav tako se spomnim, da sem težko razumel te koncepte, ko so bili uporabljeni znotraj velike izvorne kode. To je vrzel, ki jo ta članek poskuša zapolniti. Napredna orodja in koncepti so vgrajeni v našo preprosto aplikacijo, in sicer samo za vadbene namene in teh konceptov ne bi smeli uporabljati, če jih vaša aplikacija ne potrebuje.

Dovolj s klepetanjem. Pogovorimo se s kodo. Prenesite končno kodo s tega repo-ja in sledite README-u, da boste lahko videli in začutili, kaj bomo tukaj gradili. https://github.com/jelorivera08/react-starter-pack.

Ciljna stran aplikacije

Zgoraj lahko vidite prikazano stanje števca in štiri gumbe, ki sprožijo njihova dejanja. Njihova dejanja so samoumevna.

izbirniki

Pojdite na datoteko selectors.js znotraj vsebnika Counter, prvi napredni koncept, ki se ga lotimo tukaj, je createSelector. Najprej s pregledovanjem kode spremenljivka števila const pridobi stanje števila znotraj drevesa redukcijskega stanja s pomočjo stanja.get ('count').

Nato izdelamo izbirnik po omenjeni metodi. To nam pomaga oblikovati stanje / podatke, ki jih prejmemo iz drevesa stanja reduksov in s tem prihranimo veliko časa, kodiramo nove funkcije, ki upravljajo s prestrukturiranjem ali formatiranjem ciljnega stanja vsakič, ko ga potrebujemo, da spredaj nekaj naredimo. -končam. V tem primeru nisem spremenil stanja, ki sem ga prejel. Ravno stanje sem vrnil v demo namene.

Nato bo dobljena funkcija uporabljena znotraj mapStateToProps, pri mapStateToProps pa je seveda naslednja stvar, ki jo konfigurirate, mapDispatchToProps.

ustvarite dejanja

Kadar koli se odprejo ukrepi reduktorja, moramo vedno izjaviti njegovo vrsto in ustrezni preklopni slučaj na reduktorju, ki ga vnesemo pozneje, da spremenimo stanje aplikacije. S paketom createActions iz reduxsauce lahko z enim kamnom udarimo dve ptici. Prav tako bi morali oblikovati reduktor z reduxsauce, da bi lahko v celoti izkoristili ta paket.

reduktor

Zgoraj je reduktor naše aplikacije. Začetno stanje je od API-ja API nepremenljivo priloženo, in ker uporablja ime paketa, ščiti začetno stanje pred mutiranjem. React je pri tem konceptu zelo strog, zato to vedno upoštevajte. API createReducer iz reduxsauce ima dva argumenta.

Najprej začetno stanje. Drugič, predmet, ki ima ključe za akcijske vrste in vrednosti kot funkcijo, ki jo bo reduktor sprožil, ko se tip ujema z odpremnim klicem. Spojite torej ustrezno spremenite drevo stanja redux. Ni aplikacije v resničnem življenju, ki ne bi znala ravnati z asinhronimi klici API, kajne? Prav.

reduks saga

Tukaj je del sage našega programa. Vse je enako, razen načina, kako imenujemo svoja dejanja. Izkoristimo vrsto tipa, ki smo jo ustvarili prej, in jih uporabimo v naši sagi opazovalcev, da pošljemo asinhrone klice, ki bodo pozneje vplivali na naše drevo stanja reduksov.

Zamuda se lahko zasmehuje z zamudami v omrežju za veliko boljši občutek asinhronizacije aplikacije. Oh, in nazadnje, poskrbimo, da ne pozabimo na uspešnost.

delitev kode

Delitev kode je odličen način za izboljšanje učinkovitosti spletnih aplikacij. Koda JavaScript najbolj plačuje podatke uporabnika. Ne pozabite, da tako s delitvijo kode končni uporabnik omogoča nalaganje le tistega dela kode, ki ga potrebuje za učinkovitost porabe podatkov.

V zaključku,

Obstaja veliko paketov in orodij, ki nam pomagajo, programskim inženirjem ustvariti čistejšo in veliko bolj učinkovito kodo. prihaja s stroški, stroški razumevanja osnovnega sistema in tega razmišljanja v React.

Learning React od vas zahteva, da spremenite svojo paradigmo kodiranja v veliko bolj drugačno v primerjavi s prejšnjo miselno vrsto kodiranja v sprednjem delu. Orodja in paketi, o katerih sem govoril v tem članku, vključujejo ta načela, ki so potrebna za lepo in učinkovito kodiranje v Reactu in to je tisto, kar je izjemen razvijalec.

Vedno so malenkosti.

S tem upam, da sem vam pomagal nadaljevati vaše razumevanje reakcije s tem majhnim člankom. Na zdravje!