Advanced ReactJS: Parhaat käytännöt React + Redux + Sagas -sovelluksille

kahvia ajattelua varten

Ensin ensin, nopea esittely siitä, mikä on Reakty. Se on JavaScript-kirjasto, jota käytetään käyttöliittymien rakentamiseen. Se on muuttanut käyttöliittymän kehitysmaisemaa siitä lähtien, kun se ilmestyi. Joten, jos haluat olla eturivin verkkokehittäjä, Reaktin tai Vue.js: n kaltaisten kirjastojen oppiminen on lähes välttämätöntä nykypäivän teollisuudessa. Tässä on loistava opetusohjelma, jos vasta aloitat oppia reagoimaan. https://reactjs.org/tutorial/tutorial.html.

Muistan, kun aloin oppia reagoimaan. Minulla on aina ollut levoton tunne siitä, etten voi koskaan oppia kaikkea mitä tarvitsin, jatkuvasti muuttuvaa JavaScriptin kieltä uhkaa pääni, ja jos saisin jotain oikein, kysyn aina itseltäni, oliko se todellakin paras tapa tehdä se? Saatuaan kirjaimellisesti satoja online-oppaita, Youtube-hakuja ja keskeneräisiä (ja todennäköisesti pesemättömiä) kahvikuppeja, sain vihdoin ymmärtää, mitä React yrittää tuoda JavaScript-taulukkoon.

Olen kuitenkin aina kamppaillut löytääkseni opetusohjelman, joka niputtaa kaikki Reaktan edistyneet käsitteet yhdeksi kompaktiksi opetusohjelmaksi.

Lisäksi muistan, että minulla oli vaikea ymmärtää näitä käsitteitä, kun niitä käytettiin suuren lähdekoodin sisällä. Tämän aukon tämä artikkeli yrittää täyttää. Edistyneet työkalut ja käsitteet on upotettu yksinkertaiseen sovellukseemme, tämä on tarkoitettu vain opetuskäyttöön. Sinun ei pitäisi käyttää näitä käsitteitä, jos sovelluksesi ei tarvitse niitä.

Tarpeeksi chit-chatin kanssa. Puhutaan koodi. Lataa valmis koodi tästä reposta ja seuraa LUKU-painiketta, jotta näet ja tuntevat, mitä aiomme rakentaa täällä. https://github.com/jelorivera08/react-starter-pack.

Sovelluksen aloitussivu

Yllä näet näytössä olevan laskurin tilan ja neljä painiketta, jotka laukaisevat vastaavat toiminnot. Heidän toimintansa selittävät itsensä.

valitsimet

Siirry valitsimille.js-tiedostoon Counter-säilön sisällä, ensimmäinen edistyksellinen konsepti, jota käsittelemme täällä, on createSelector. Tarkastelemalla koodia ensin, const count -muuttuja hakee laskennallisen tilan redux-tilapuussa sisällä state.get ('count').

Sitten luomme valitsimen käyttämällä mainittua menetelmää. Tämä auttaa meitä muotoilemaan tilan / tiedot, jotka saamme redux-tilapuulta, ja säästämällä näin säästät paljon aikaa koodaamaan uusia toimintoja, jotka käsittelevät valtion uudelleenjärjestelyä tai muotoilevat kohdetilaa aina, kun tarvitsemme sitä, jotta jotain saadaan eteen -end. Tässä esimerkissä en muuttanut saamani tilaa. Palautin juuri tavallisen valtion demoa varten.

Sitten tuloksena olevaa toimintoa käytetään mapStateToProps: n sisällä, ja mapStateToProps: n kanssa luonnollisesti seuraava konfiguroitava asia on mapDispatchToProps.

luoda toimia

Aina kun lähetetään pelkistimen toimenpiteitä, meidän on aina ilmoitettava sen tyyppi ja vastaava kytkinkotelo pelkistimelle, joka se tulee myöhemmin sovelluksen tilan muuttamiseksi. Reduxsauce-paketin createActions-paketin avulla voimme lyödä kaksi lintua yhdellä kivillä. Meidän tulisi myös muotoilla pelkistin reduksikastikkeella, jotta hyötyisimme tästä paketista täysimääräisesti.

alennusvaihde

Yllä on sovelluksemme vähennysventtiili. FromJS-sovellusliittymä sulkee alkutilan muuttumattomalta ja paketin nimen ollessa suojaa se alkuperäisen tilan mutaatiolta. Reaktio on erittäin tiukka tämän käsitteen suhteen, joten pidä tämä aina mielessä. reduxsauce -sovelluksen createReducer API: lla on kaksi argumenttia.

Ensinnäkin alkutila. Toiseksi objekti, jolla on avaimet toimintotyypeille ja arvot funktiona, jonka pelkistin laukaisee, kun tyyppi vastaa lähetyspuhelua. Yhdistäminen muuttaa sitten redux-tilapuuta vastaavasti. Ei ole mitään tosielämäsovellusta, joka ei osaa käsitellä asynkronisia API-kutsuja? Oikea.

redux-saaga

Tässä on saaga-osa ohjelmastamme. Kaikki on samaa paitsi tapaa, jolla me kutsumme toimintaamme. Käytämme aiemmin luomaamme tyyppitoimintoa ja hyödynnämme niitä tarkkailijasagassamme sisällä lähettääksemme asynkronisia puheluita, jotka vaikuttavat myöhemmin redux-tilapuuseemme.

Viive on pilkata verkon latenssia sovelluksen asynkitunnisteen parantamiseksi. Voi, ja viimeiseksi, varmistakaamme, että emme unohda suorituskykyä.

koodin jakaminen

Koodien jakaminen on hieno tapa parantaa verkkosovellusten suorituskykyä. JavaScript-koodi vie suurimman osan käyttäjän tiedoista. Muista, että koodin jakamisen kanssa se antaa loppukäyttäjälle ladata vain osan koodista, jota se tarvitsee tiedonkulutuksen tehostamiseksi.

Tiivistettynä,

Siellä on paljon paketteja ja työkaluja, jotka auttavat meitä, ohjelmistosuunnittelijoita luomaan puhtaamman ja paljon tehokkaamman koodin. mukana tulee kustannukset, taustalla olevan järjestelmän ymmärtämisen kustannukset, ja tämä ajattelee Reaktissa.

Reaktion oppiminen edellyttää, että siirrät koodausparadigman paljon erilaisempaan verrattuna edeltävän koodauksen ajattelutapaan. Työkalut ja paketit, joista olen käsitellyt tässä artikkelissa, kapseloivat ne periaatteet, joita tarvitaan, jotta koodi reagoidaan kauniisti ja tehokkaasti, ja se tekee poikkeuksellisesta kehittäjästä.

Se on aina pieniä asioita.

Toivon, että olen auttanut sinua ymmärtämään Reaktiasi tällä pienellä artikkelin avulla. Kippis!