Advanced ReactJS: parimad tavad React + Redux + Sagas jaoks

kohv mõtteks

Esiteks - kiire tutvustus reaalaine kohta. See on JavaScripti teek, mida kasutatakse kasutajaliideste loomiseks. Sellest ajast alates, kui see välja tuli, on see muutnud esiotsa arendusmaastikku. Niisiis, kui soovite saada eesrindlikuks veebiarendajaks, on selliste raamatukogude õppimine nagu React või Vue.js tänapäeva tööstuses peaaegu hädavajalik. Siin on suurepärane õpetus, kui hakkate alles reaalajas õppima. https://reactjs.org/tutorial/tutorial.html.

Ma mäletan, kui hakkasin Reacti õppima. Mul oli alati ärev tunne, et ma ei saa kunagi kõike vajalikku õppida, pidevalt muutuv JavaScripti keel kõlab mul pea kohal ja kui mul kunagi midagi õnnestub, küsin alati endalt, kas see on tõesti parim viis seda tegema? Pärast sõna otseses mõttes sadu veebijuhendeid, Youtube'i otsinguid ja lõpetamata (ja tõenäoliselt pesemata) kohvitassi, sain lõpuks kindlalt aru sellest, mida React üritab JavaScripti tabelisse tuua.

Olen aga alati näinud vaeva, et leida õpetus, mis koondaks kõik Reacti täpsemad kontseptsioonid ühte kompaktsesse õppematerjali.

Samuti mäletan, et mul oli raske neid mõisteid mõista, kui neid kasutati suure lähtekoodi sees. See on see lünk, mida see artikkel üritab täita. Täpsemad tööriistad ja kontseptsioonid on manustatud meie lihtsasse rakendusse. See on mõeldud ainult juhendamiseks ja te ei tohiks neid mõisteid kasutada, kui teie rakendus neid ei vaja.

Aitab jutuajamisest. Räägime koodist. Laadige valmis kood sellest repo alla ja järgige README, et näeksite ja tunneksite, mida me siin ehitama hakkame. https://github.com/jelorivera08/react-starter-pack.

Rakenduse maandumisleht

Üleval näete kuvatud loenduri olekut ja nelja nuppu, mis käivitavad nende vastavad toimingud. Nende tegevus on iseenesest mõistetav.

valijad

Liikuge faili selectors.js loenduri konteinerisse. Esimene edasijõudnute kontseptsioon, millega siin tegeleme, on createSelector. Koodi vaadates tõmbab const count muutuja esiteks loenduse oleku redux oleku puus, kasutades state.get ('count').

Seejärel loome valija, kasutades nimetatud meetodit. See aitab meil vormindada olekut / andmeid, mida saame redutseeritud olekupuult, ja säästes säästame sellega palju aega uute funktsioonide kodeerimisega, mis käsitlevad osariigi restruktureerimist või vormindavad sihtseisundit iga kord, kui vajame seda, et midagi esiplaanile tuua. -lõpp. Selles näites ei muutnud ma saadud olekut. Naasesin lihtsalt demo-eesmärkidel tavalisse riiki.

Seejärel kasutatakse saadud funktsiooni mapStateToProps sees ja mapStateToProps puhul on loomulikult järgmine konfigureeritav asi mapDispatchToProps.

looge toiminguid

Redutseerija toimingute saatmisel peame alati teatama selle tüübi ja vastava lülituskorpuse reduktorile, mille ta hiljem sisestab, et rakenduse olekut muuta. Redaxsauce paketi createActions abil saame kaks kivi lüüa kaks lindu. Peaksime reduktori vormistama ka reduksikastmega, et sellest paketist täielikku kasu saada.

reduktor

Ülal on meie rakenduse reduktor. Algne olek on suletud fromJS API-ga muutumatute eest ja kuna paketi nimi kehtib, kaitseb see algset olekut muteerimise eest. Reakt on selle kontseptsiooni suhtes väga range, nii et pidage seda alati meeles. redxsauce'il oleval createReducer API-l on kaks argumenti.

Esiteks algseisund. Teiseks, objekt, millel on võtmed toimingutüüpide ja väärtuste jaoks funktsioonina, mille reduktor käivitab, kui tüüp vastab väljastuskõnele. Ühendamine muudab redutseeritud olekupuu vastavalt. Pole ühtegi päriselu rakendust, mis ei tea, kuidas asünkroonsete API-kõnedega hakkama saada? Õige.

redux saaga

Siin on saaga osa meie programmist. Kõik on sama, välja arvatud viis, kuidas me oma tegevust nimetame. Kasutame varem loodud tüüptoimingut ja kasutame neid jälgija saaga sees asünkroonsete kõnede saatmiseks, mis mõjutavad hiljem meie redutseeritud olekupuud.

Viivitus on võrgu latentsuse mõnitamiseks, et rakenduse asünkroontunnetus oleks palju parem. Ja lõpuks, veendugem, et me ei unustaks jõudlust.

koodide jagamine

Koodide tükeldamine on suurepärane võimalus veebirakenduste toimivuse parandamiseks. JavaScripti kood võtab kõige enam kasutaja andmeid. Pidage meeles, et nii koodide jagamise korral võimaldab see lõppkasutajal alla laadida ainult selle koodi osa, mida ta vajab andmete tarbimise efektiivsuse tagamiseks.

Kokkuvõtteks,

Seal on palju pakette ja tööriistu, mis aitavad meil, tarkvarainseneridel luua puhtam ja palju tõhusam kood. kaasneb maksumus, selle aluseks oleva süsteemi mõistmise hind ja see on Reaktis mõtlemine.

Reaktiivi õppimine eeldab, et peate kodeerimise paradigma palju erinevamaks muutma, võrreldes varasema kodeerimise mõtteviisiga. Tööriistad ja paketid, mida ma selles artiklis arutasin, kapseldavad need põhimõtted, mida on vaja, et Reakt ilusti ja tõhusalt kodeerida, ja see teebki erakordse arendaja.

See on alati väike asi.

Sellega loodan, et aitasin teil selle väikese artikli abil teie arusaamist Reaktist edasi arendada. Terviseks!