Algajate juhend reageerimise / redutseerimise kohta - kuidas õppima asuda ja mitte üle lüüa

Foto Roman Mager saidil Unsplash

Kohustustest loobumine: see on React / Reduxi algajatele kirjutatud juhend algajatele.

Uue Javascripti raamistiku õppimine 2017. aastal võib olla hirmutav ülesanne. Ütleme, et olete lõpuks Nurgaga hakkama saanud, kuid kõik on liikunud edasi selle läikiva uue asja juurde, mille nimi on React. Lugesite paar õpetust ja ei jõua ära oodata oma uue Reacti projekti seadistamist. Oodake, on veel üks artikkel, mis ütleb, et peaksite oma uue rakenduse oleku haldamiseks kasutama Reduxit. Kõik algajad saavad selle artikliga suhelda. Pean ennast vahepealseks deviseks ja tunnen seda endiselt.

Kui proovisin oma React / Redux projekti käivitada, sirvisin lugematul hulgal artikleid, kuidas oma failikataloogi struktureerida: tüübi järgi rühmitatud failid, komponentide kaupa rühmitatud, domeeni järgi rühmitatud failid jne.

allikas: http://gph.is/2k9DFT4

Sain aru, et pean kuskilt alustama. Aha hetk saabub hiljem. Selle käigus mõistan iga lähenemisviisi plusse ja miinuseid. Sellele võib järgneda valus refrään, kuid see saab olema väärtuslik õppetund. Ja ma ehitasin niikuinii õppima.

1. samm: vali oma arvamusega lähenemisviis ja jää sellest kinni

Ma järgisin seda õpetust.

Minu õppimisviis oli hakata autori mõtteprotsessi jälgides oma rakendust kodeerima. Leian, et artikkel on seal üks kasulikumaid õpetusi. React / Reduxis alustavatele inimestele võib see ikka liiga palju olla, nii et dokumenteerisin oma reisi ja tegin sellest õpetuse kärbitud versiooni.

2. samm: alustage väikest

Minu eesmärk oli alguses väga lihtne: esitage uudiste koondaja rakendusega loetelu artiklitest, mida olen kogunud. Uudiste andmebaasist saadav vastus on artiklikogum, millel on järgmine andmestruktuur.

Esitage artiklite loend Ethereumi kohta

3. samm: Valige katla plaat

Ma kasutasin oma toredate instruktorite loodud katlaplaati Fullstacki Akadeemias. (Ma ei püüdnud sinna Reacti / Reduxi rongi. Minu kohord on viimane, kes õppis AngularJS-i) Valisin selle katlaplaadi, kuna see kasutab täisstacki javascripti: React / Redux esiotsa ja taustaprogrammi Express / Sequelize / PostgreSQL. Selle harjutuse jaoks olen natuke katlaplaati puhastanud, et inimesed, kellel pole Express / Sequelize / PostgreSQL, saaksid seda jälgida. Nüüdsest teeme koostööd ainult React / Reduxiga.

Siin on repo, mis sisaldab selle treeningu lähtepunkti ja lõpu koodi.

See on failistruktuur.

src /
  komponendid /
    ListView.js
    ListRow.js
  konteinerid /
    ArtiklidIndex.js
  teenused /
    artiklid.js
  kauplus /
    artiklid/
      toimingud.js
      actionTypes.js
      reducer.js
    index.js

Enne kui seda õpetust kirjeldate, kui sellised mõisted nagu tegevus ja reduktor ei helista, soovitame teil tungivalt läbi lugeda põhimõiste ametlikust Reduxi dokumentatsioonist või minu kirjutatud artiklist:

4. samm: alustage Reduxi olekust

Mis olek on meie rakendusel? Me räägime lihtsast ühelehelisest rakendusest koos artiklite loendiga. Peame talletama serverist hangitud artiklite loendi. Kui vaatate src / teenused / artiklid artikleidjs.js, näete artiklitega täidetud massiivi. Kuna selle ülesande eesmärk on tutvuda React / Redux arhitektuuri andmevoogudega, tagastab funktsioon getAllArticles () otse meile vajalikud artiklid. Päris maailmas saab see funktsioon asünkroonseks kõneks mõne serveri API-le.

Nüüd on küsimus selles, kuidas oma riik üles ehitada. Serveri (või antud juhul funktsiooni getAllArticles) vastus on objektide massiiv. Me võime selle oma riiki panna.

Kuid kas see on parim viis oleku modelleerimiseks? Mõelge stsenaariumile, kus peate artiklikirjet värskendama; rakendus kavatseb otsitud uudiste leidmiseks itereerida massiivi kaudu. Mis siis, kui massiivi suurus on tõesti suur? See lähenemisviis ei ole eriti tulemuslik.

Kui struktureerime oma oleku objektiga, muutub artikliks ligipääs otsinguks. Artiklite renderdamiseks saame salvestada täiendava ID-massiivi.

5. samm: rakendage oma oleku andmevoog algusest lõpuni

Kuidas me seda olekut värskendame? Siin tulevadki toime ja reduktor. Vaatleme seda vooskeemi:

Milline on meie kasutaja suhtlus? Tahame artiklite loendi kuvada lehe laadimisel, nii et see ei ole suur osa interaktsioonist. Selleks alustame reaktoris vaadet komponentDidMount. Saame saata artiklite allalaadimistoimingu ja teavitada reduktorit. Redutseerija hindab toimingut ja ajakohastab olekut. Uuendatud olek käivitab komponendi renderdamise.

Alustame määratledes meie rakenduse toimingute tüübi. See on lihtne ja pidev määratlus artiklite toomiseks. Hiljem saame alati lisada rohkem määratlusi, näiteks kirje värskendamine või kustutamine.

Vaatame nüüd tegevust. Pidage meeles, et taustprogrammist saadav vastus on objektide massiiv, me muudame selle objektiks, kasutades funktsiooni keyBy.

Redutseerija hindab tavalist objekti, mis sisaldab toimingu tüüpi ja selle kasulikku koormust. Seejärel salvestab see andmed olekusse.

6. samm: renderdamine

Ühendame konteineri, mille nimi on ArticleIndex, artikli olekuga. AritcleIndex on nutikas konteiner, mis suudab suhelda Reduxi kauplusega. ArticleIndexi sees on nukker komponent nimega ListView, mille on kirjutanud Talux, Reduxi õpetuse autor, mida jälgisin. Rakenduse saate kontrollida komponentide kaustas.

ListView võtab artiklidById, massiivi artikleid ja renderdusfunktsiooni. Seejärel kuvatakse artiklite loetelu.

Kuidas saada artiklidById ja rea ​​artiklite ID-sid vaadata? Siin on ülevaade Reduxi põhikontseptsioonist. Reaktvaade on ühendatud Reduxi olekuga ühendamisfunktsiooni kaudu, mida pakub react-redux teek.

Siin on kood, mis täidab seda, mida see diagramm kirjeldab. Selle allosas kaardistame Reduxi oleku ja lähetame React rekvisiitidele. KomponendisDidMount kutsume esile laadiartikli, mis saadab toimingu fetchAllArticles. Pärast oleku värskendamist artiklitega edastatakse artiklidById mapStateToProps reaalajas vaatesse.

Ja see ongi kõik! Meie brauseris on artiklite loend!

7. samm: kuskil koodis anti-muster?

React / Reduxi andmevoo õppimise huvides oleme seni unustanud teise Reduxi kontseptsiooni. Reaalne komponent peaks Reduxi olekusse pääsema selektorite kaudu. Valijad asuvad tavaliselt reducer.js failides. Need on puhtad funktsioonid, mis võimaldavad juurdepääsu Reduxi olekule ja tagastavad mõned oleku atribuudid. Kui valijad on paigas, kui muudate ühte Reduxi olekut, mis mõjutab rohkem kui ühte komponenti, peate valijat ainult värskendama.

Siin on meie valija getArticles:

Funktsioon mapStateToProps on artiklisIndex.js järgmine:

Boonus: järgige sama mõtteprotsessi ja looge filter

Artiklite loendiga saame lisada hunniku erinevaid toiminguid. Näiteks on artiklid kõik uudised Ethereumi kohta. Neid liigitatakse kahte tüüpi: uudised krüptovaluuta kogukonnast ja uudised peavoolumeedias. Pärast artiklite loendi renderdamist lisasin sama mõtteprotsessi kasutades ka tüüpfiltri.

Loputage, korrake, reaktorit

React / Reduxi õppimine on nagu küüliku auku hüppamine, kuid see on muutnud mind skeptikust usklikuks. Loodan, et see artikkel käivitab teie õppimise kiiresti.

Alates esimesest beebietapist on minu õppeprojekt muutunud uudiste koondajaks ja trendide jälgimise rakenduseks!

Täname, et lugesite!

Kui olete Steemiti lehel, siis langetage siin blokeerivas sotsiaalmeedias (nagu näiteks Redditi ja keskmise armastuse laps):