Vodnik za začetnike, kako reagirati / zmanjšati - kako začeti učiti in ne biti preobremenjen

Fotograf Roman Mager na Unsplash

Izjava o omejitvi odgovornosti: To je vodnik za začetnike, ki ga je napisal začetnik React / Redux.

Učenje novega okvira Javascript v letu 2017 je lahko zastrašujoča naloga. Recimo, da ste končno ujeli Angularja, toda vsi so se pomerili v tej sijoči novi stvari, imenovani React. Preberete nekaj vaj in komaj čakate, da konfigurirate svoj novi projekt React. Počakajte, obstaja še en članek, ki navaja, da bi morali uporabljati Redux za upravljanje stanja za svojo novo aplikacijo. Vsi začetniki se lahko nanašajo na ta članek. Sama se štejem za vmesnega vraga in to še vedno počutim.

Ko sem poskusil zagnati svoj projekt React / Redux, sem brskal po neštetih člankih o strukturiranju mojega imenika: datoteke, razvrščene po vrsti, razvrščene po komponentah, združene po domeni… itd.

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

Spoznal sem, da moram nekje začeti. Aha trenutek bi prišel kasneje. V procesu bi razumel prednosti in slabosti vsakega pristopa. Morda mu bo sledilo boleče premišljanje, vendar bo to dragocena lekcija. In vseeno sem se gradil, da bi se učil.

1. korak: izberite domišljen pristop in se ga držite

Sledil sem tej vadnici.

Moj način učenja je bil začeti kodiranje lastne aplikacije, tako da sem sledil avtorjevemu miselnemu postopku. Članek se mi zdi eden najbolj koristnih vaj. Še vedno je lahko preveč, če nekdo začne v React / Reduxu, zato sem svoje potovanje dokumentiral in naredil v okrašeno različico vadnice.

2. korak: Začnite z majhnimi

Moj cilj je bil na začetku res preprost: predstaviti seznam člankov, ki sem jih zbiral z aplikacijo za zbiranje novic. Odziv iz novice bo zbirka člankov z naslednjo strukturo podatkov.

Pošlji seznam člankov o Ethereumu

3. korak: Izberite ploščo za ogrevanje

Uporabil sem ploščo, ki so jo ustvarili moji ljubki inštruktorji na Akademiji Fullstack (tam nisem ujel vlaka React / Redux. Moja kohorta je zadnji AngularJS) Izbral sem to kotlovnico, ker uporablja fullstack javascript: React / Redux sprednji del in Express / Sequelize / PostgreSQL za zaledje. Za namen te vaje sem malce očistil kotlovsko ploščo, da bodo ljudje brez Express / Sequelize / PostgreSQL nadaljevali. Od zdaj bomo sodelovali le z React / Redux.

Tukaj je repo, ki vsebuje izhodišče in končno kodo za to vajo.

To je struktura datotek.

src /
  sestavni deli /
    ListView.js
    ListRow.js
  zabojniki /
    ArticleIndex.js
  storitve /
    Članki.js
  trgovina /
    članki /
      dejanja.js
      actionTypes.js
      reducer.js
    index.js

Preden nadaljujete po tej vadnici, če izrazi, kot sta akcija in reduktor, ne zvonijo nobenega zvonca, toplo priporočam, da preberete osnovni koncept v uradni dokumentaciji Redux ali v članku, ki sem ga napisal:

4. korak: Začnite s stanjem Redux

Kakšno stanje ima naša aplikacija? Govorimo o preprosti aplikaciji na eni strani s seznamom člankov. Shraniti moramo seznam člankov, pridobljenih s strežnika. Če si ogledate Article.js v src / services / articles, boste videli matriko, napolnjeno s članki. Ker je namen te vaje seznaniti se s pretokom podatkov arhitekture React / Redux, funkcija getAllArticles () neposredno vrne članke, ki jih potrebujemo. V resničnem svetu bo ta funkcija asinhroni klic nekemu oddaljenemu API-ju.

Zdaj je vprašanje, kako strukturirati našo državo. Odgovor strežnika (ali v tem primeru funkcija getAllArticles) je niz predmetov. Lahko ga postavimo v svojo državo.

Je pa to najboljši način modeliranja države? Razmislite o scenariju, kje morate posodobiti vnos članka, aplikacija se bo pomerila skozi niz in poiskala novice, ki jih iščete. Kaj pa, če je velikost matrike res velika? Ta pristop ne bo zelo uspešen.

Če svoje stanje strukturiramo s predmetom, dostop do članka postane iskanje. Za upodabljanje člankov lahko shranimo dodaten niz ID-jev.

5. korak: Izvedite pretok podatkov za svoje stanje od začetka do konca

Kako posodobimo to stanje? Tukaj pridejo ukrepi in reduktorji. Upoštevajte ta diagram poteka:

Kakšna je naša uporabniška interakcija? Seznam člankov želimo obrisati ob nalaganju strani, tako da ne gre za veliko interakcijo. Če želite to narediti, začnemo s komponentoDidMount v pogledu React. Lahko odpremimo akcijo za pridobivanje izdelkov in obvestilo o reduktorju. Reduktor bo ocenil dejanje in posodobil stanje. Posodobljeno stanje bo sprožilo upodabljanje komponente.

Začnimo z določitvijo vrste dejanj, ki jih ima naša aplikacija. To je preprosta stalna definicija za pridobivanje člankov. Pozneje lahko vedno dodamo še več definicij, kot je posodabljanje ali brisanje vnosa.

Zdaj pa pojdimo na akcijo. Ne pozabite, da je odgovor, ki ga dobimo iz zaledja, niz predmetov, ki ga spremenimo v objekt s funkcijo tipash lodash.

Reduktor oceni navaden predmet, ki vsebuje vrsto dejanja in njegovo koristno obremenitev. Nato podatke shrani v stanje.

6. korak: upodabljajte

V stanje izdelka bomo povezali vsebnik z imenom ArticleIndex. AritcleIndex je pameten zabojnik, ki lahko komunicira s trgovino Redux. Znotraj ArticleIndex-a je neumna komponenta z imenom ListView, ki jo je napisal Tal Kol, avtor vadbe Redux, ki sem ji sledil. Izvedbo lahko preverite v mapi s komponentami.

ListView prevzame ArticleById, matriko ID-jev članka in funkcijo upodabljanja. Nato predstavi seznam člankov.

Kako dobimo na ogled ArticleById in matriko id-jev člankov? Tukaj je pregled osnove Redux Core. React view je povezan s stanjem Redux s pomočjo funkcije povezovanja, ki jo zagotavlja react-redux knjižnica.

Tu je koda, ki opisuje ta diagram. Na dnu zemljevida preslikamo stanje Redux in odpremo rekvizite React. V komponentiDidMount prikličemo loadArticles, ki odpre dejanje fetchAllArticles. Ko je stanje posodobljeno s članki, se članiById pošljejo v React view by mapStateToProps.

In to je to! V našem brskalniku imamo seznam člankov!

7. korak: Anti-vzorec nekje v kodi?

Zaradi učenja pretoka podatkov v React / Redux smo do zdaj spregledali še en Redux koncept. Komponenta React mora prek izbirnikov dostopati do stanja Redux. Izbirniki so običajno nameščeni v datotekah reducer.js. So čiste funkcije, ki dostopajo do stanja Redux in vrnejo nekatere lastnosti stanja. Če so izbirniki nameščeni, če spremenite stanje Redux, ki vpliva na več kot eno komponento, morate izbirnik posodobiti samo.

Tu je naš izbirnik GetArticles:

Funkcija mapStateToProps v ArticleIndex.js postane:

Bonus: Sledite istemu miselnemu postopku in sestavite filter

S seznamom člankov lahko dodamo kup različnih operacij. V člankih so na primer vse novice o Ethereumu. Razvrščamo jih v dve vrsti: novice iz skupnosti kripto valute in novice iz običajnih medijev. Po upodabljanju seznama člankov sem z istim miselnim postopkom dodal tipni filter.

Izperite, ponovite, reaktor

Učenje React / Redux je kot skok v zajčjo luknjo, vendar me je iz skeptika spremenilo v vernika. Upam, da bo ta članek hitro začel vaše učenje.

Od začetnega koraka dojenčka se je moj učni projekt spremenil v zbirko novic in aplikacijo za sledenje trendom!

Hvala za branje!

Če ste na Steemitu, se na spletnem mestu blockchain (podobno kot ljubezenski otrok Reddita in Medium-a) odpravite tukaj: