Aloittelijan opas reagoimaan / vähentämään - kuinka aloittaa oppiminen ja olla turhautumatta

Kuva: Roman Mager Unsplash-kuvassa

Vastuuvapauslauseke: Tämä on aloittelijan opas, jonka on kirjoittanut React / Redux-aloittelija.

Uuden Javascript-kehyksen oppiminen vuonna 2017 voi olla pelottava tehtävä. Sano että olet vihdoin selvinnyt Angularista, mutta kaikki ovat siirtyneet tähän kiiltävään uuteen asiaan nimeltään React. Luet pari opetusohjelmaa etkä voi odottaa uuden React-projektisi määrittämistä. Odota, on toinen artikkeli, jonka mukaan sinun pitäisi käyttää Reduxia hallitaksesi uuden sovelluksesi tilaa. Aloittelijat voivat kaikki liittyä tähän artikkeliin. Pidän itseäni välitavoitteena ja tunnen silti sitä.

Kun yritin aloittaa React / Redux -projektini, selaan lukemattomia artikkeleita tiedostokansion jäsentelystä: tyypin mukaan ryhmitetyt, komponenttien mukaan ryhmitetyt, verkkotunnuksen mukaan ryhmitetyt tiedostot jne.

lähde: http://gph.is/2k9DFT4

Tajusin, että minun piti aloittaa jostain. Aha-hetki tulisi myöhemmin. Ymmärrän prosessissa kunkin lähestymistavan hyvät ja huonot puolet. Sitä voi seurata tuskallinen uudelleenreaktio, mutta se tulee olemaan arvokas opittu oppia. Ja minä rakensin oppimaan muutenkin.

Vaihe 1: Valitse omaksuttu lähestymistapa ja tartu siihen

Seurasin tätä opetusohjelmaa.

Oppimisen lähestymistapani oli aloittaa oman sovelluksen koodaaminen seuraamalla kirjoittajan ajatusprosessia. Minusta artikkeli on yksi hyödyllisimmistä ohjeista siellä. Se voi silti olla liian suurta jokaiselle, joka aloittaa React / Reduxista, joten dokumentoin matkani ja tein siitä leikatun version opetusohjelmasta.

Vaihe 2: Aloita pieni

Tavoitteenani oli alussa todella yksinkertainen: luo luettelo artikkeleista, joita olen kerännyt uutisten kerääjäsovelluksella. Uutetietokannan vastaus on artikkelikokoelma, jolla on seuraava tietorakenne.

Näytä luettelo artikkeleista, jotka koskevat Ethereumia

Vaihe 3: Valitse kattilalevy

Käytin kattolevyä, jonka rakkaat ohjaajani ovat luoneet Fullstack Academyssa. (En kiinni React / Redux-junaa siellä. Kohorttini on viimeinen oppiva AngularJS) Valitsin tämän kattilalevyn, koska siinä käytetään fullstack-javascriptiä: React / Redux käyttöjärjestelmä ja Express / Sequelize / PostgreSQL taustalle. Tätä harjoitusta varten olen puhdistanut kattilalevyn hiukan ihmisille, joilla ei ole Express / Sequelize / PostgreSQL-seurausta. Teemme yhteistyötä Reactin / Reduxin kanssa vain tästä lähtien.

Tässä on repo, joka sisältää tämän harjoituksen aloituspisteen ja valmis koodin.

Tämä on tiedostorakenne.

src /
  komponentit /
    ListView.js
    ListRow.js
  kontit /
    ArticlesIndex.js
  palvelut/
    articles.js
  store /
    artikkelia /
      actions.js
      actionTypes.js
      reducer.js
    index.js

Ennen kuin seuraat tätä opetusohjelmaa, jos termit, kuten toiminta ja reduktorit, eivät soi mitään kelloa, suosittelen, että luet ydinkonseptin läpi virallisessa Redux-dokumentaatiossa tai kirjoittamassani artikkelissa:

Vaihe 4: Aloita Redux-tilasta

Missä tilassa sovelluksemme on? Puhumme yksinkertaisesta yhden sivun sovelluksesta, jossa on luettelo artikkeleista. Meidän on tallennettava luettelo palvelimelta noudetuista artikkeleista. Jos tarkastelet src / palvelut / artikkelit artikkeleitajs.js, näet artikkeleilla täytetyn ryhmän. Koska tämän tehtävän tarkoituksena on tutustua React / Redux-arkkitehtuurin tietovirtaan, getAllArticles () -toiminto palauttaa suoraan tarvitsemamme artikkelit. Todellisessa maailmassa tämä toiminto on asynkroninen puhelu jollekin etäliittymäsovellukselle.

Nyt kysymys on siitä, kuinka valtiomme rakennetaan. Palvelimen (tai tässä tapauksessa getAllArticles-toiminnon) vastaus on joukko objekteja. Voimme laittaa sen tilaamme.

Mutta onko tämä paras tapa mallintaa tilaa? Mieti tilannetta, jossa sinun on päivitettävä artikkeli, sovellus aikoo iteroida taulukon läpi löytääksesi etsimäsi uutiset. Entä jos taulukon koko on todella suuri? Tämä lähestymistapa ei tule olemaan kovin toimiva.

Jos rakentelemme tilaamme objektin kanssa, artikkelin käyttöoikeudesta tulee haku. Artikkeleiden renderoimiseksi voimme tallentaa ylimääräisen joukon tunnuksia.

Vaihe 5: Suorita tilisi tietovirta alusta loppuun

Kuinka päivitämme tämän tilan? Tässä on toiminta ja pelkistin tulevat sisään. Mieti tätä vuokaaviota:

Mikä on käyttäjän vuorovaikutus? Haluamme tuoda artikkelikoko sivua ladattaessa, joten se ei ole paljon vuorovaikutusta. Tätä varten aloitamme komponenttiDidMountilla React-näkymässä. Voimme lähettää haun artikkeleille ja ilmoittaa siitä vähennyslaitteelle. Pelkistin arvioi toiminnan ja päivittää tilan. Päivitetty tila laukaisee komponentin renderoinnin.

Aloitetaan määrittelemällä sovelluksemme toimintatyypit. Se on yksinkertainen jatkuva määritelmä artikkeleiden noutamiselle. Myöhemmin voimme aina lisätä uusia määritelmiä, kuten päivittää merkintää tai poistaa merkinnät.

Mennään nyt toimintaan. Muista, että taustalta saamme vastaus on joukko objekteja, muuntamme siitä objektin käyttämällä Lodash-toimintoa keyBy.

Pelkistin arvioi tavallisen esineen, joka sisältää toiminnan tyypin ja sen hyötykuorman. Sitten se tallentaa tiedot tilaan.

Vaihe 6: Renderöinti

Aiomme yhdistää artikkelin tilaan nimeltään ArticleIndex. AritcleIndex on älykäs säilö, joka voi kommunikoida Redux-kaupan kanssa. ArticleIndexin sisällä on tyhmä komponentti nimeltään ListView, jonka on kirjoittanut Tal Kol, seuranneen Redux-opetusohjelman kirjoittaja. Voit tarkistaa toteutuksen komponentti-kansiosta.

ListView ottaa artikkelitById, joukon artikkeli-tunnuksia ja renderöintitoiminnon. Sitten se tuottaa luettelon artikkeleista.

Kuinka artikkeleitaById ja joukko artikkeleita saadaan tarkastelemaan? Tässä on katsaus Redux-ydinkonseptiin. React-näkymä on kytketty Redux-tilaan react-redux-kirjaston tarjoaman yhteystoiminnon kautta.

Tässä on koodi, joka tekee tämän kaavion kuvaaman. Sen alareunassa kartoitamme Reduxin tilan ja lähetämme React-rekvisiitta. KomponenttiDidMount-sovelluksessa kutsutaan loadArticles, joka lähettää fetchAllArticles-toiminnon. Kun tila on päivitetty artikkeleilla, mapsStateToProps siirtää artikkelitById React-näkymään.

Ja siinä kaikki! Meillä on luettelo artikkeleista selaimessa!

Vaihe 7: Anti-kuvio jossain koodissa?

React / Redux-tietovirtojen oppimisen vuoksi olemme toistaiseksi unohtaneet toisen Redux-konseptin. Reaktorikomponentin tulisi päästä Redux-tilaan valitsimien kautta. Valitsimet sijaitsevat yleensä reducer.js-tiedostoissa. Ne ovat puhtaita toimintoja, jotka käyttävät Redux-tilaa ja palauttavat joitain tilaominaisuuksia. Jos valitsimet ovat paikoillaan, jos muutat yhtä Redux-tilaasi, joka vaikuttaa useampaan kuin yhteen komponenttiin, sinun on vain päivitettävä valitsin.

Tässä on getArticles-valitsijamme:

ArtikkelinIndex.js mapStateToProps-toiminnosta tulee:

Bonus: Seuraa samaa ajatusprosessia ja rakenna suodatin

Artikkeliluettelon avulla voimme lisätä joukon erilaisia ​​toimintoja. Esimerkiksi kaikki artikkelit ovat uutisia Ethereumista. Ne luokitellaan kahteen tyyppiin: salausvaluuttayhteisön uutiset ja valtamedian uutiset. Esittämisen jälkeen luettelon artikkelista lisäsin tyyppisuodattimen samalla ajatteluprosessilla.

Huuhtele, toista, reaktori

Reaktion / Reduxin oppiminen on kuin hyppy kanin reikään, mutta se on muuttanut minut skeptiköstä uskovaiseksi. Toivon, että tämä artikkeli aloittaa oppimisen.

Alkuvaiheesta lähtien oppimisprojektistani on tullut uutisten kerääjä ja trendien seurantasovellus!

Kiitos, että luit!

Jos olet Steemitissä, blokkiketjun sosiaalinen media (sellainen kuin Redditin ja Mediumin rakkauslapsi) pudota täältä: