Iesācēja rokasgrāmata par reaģēšanu / samazināšanu - kā sākt mācīties un nepārspīlēt

Romāna Māgera fotoattēls vietnē Unsplash

Atsaukums: šī ir rokasgrāmata iesācējam, kuru izstrādājis React / Redux iesācējs.

Apgūt jaunu Javascript ietvaru 2017. gadā var būt biedējošs uzdevums. Saka, ka jūs beidzot esat galā ar Angular, bet visi ir pārgājuši uz šo spīdīgo jauno lietu ar nosaukumu React. Jūs izlasījāt pāris mācību materiālus un nevarat gaidīt, lai konfigurētu jauno React projektu. Pagaidiet, ir vēl viens raksts, kurā teikts, ka jūsu jaunās lietotnes stāvokļa pārvaldīšanai vajadzētu izmantot Redux. Iesācēji visi var attiekties uz šo rakstu. Es uzskatu sevi par starpnieku un joprojām jūtos šādi.

Mēģinot sākt savu React / Redux projektu, pārlūkoju neskaitāmus rakstus par to, kā strukturēt savu failu direktoriju: faili, kas sagrupēti pēc veida, sagrupēti pēc komponentiem, sagrupēti pēc domēna ... utt.

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

Es sapratu, ka man kaut kur jāsāk. Aha brīdis pienāks vēlāk. Šajā procesā es saprastu katras pieejas plusus un mīnusus. Tam var sekot sāpīga reakcija, taču tā būs vērtīga mācība. Un es tik un tā būvēju, lai mācītos.

1. solis: izvēlieties vērtētu pieeju un pieturieties pie tās

Es sekoju šai apmācībai.

Mana mācīšanās pieeja bija sākt kodēt savu lietotni, sekojot autora pārdomām. Es uzskatu, ka raksts ir viena no visnoderīgākajām apmācībām, kas tur atrodama. Tas joprojām var būt par daudz kādam, kurš sāk darbu React / Redux, tāpēc es dokumentēju savu ceļojumu un pārveidoju to par apmācības versiju, kas ir saīsināta.

2. solis: sāciet mazu

Mans mērķis sākumā bija patiešām vienkāršs: atveidot rakstu rakstu, ko apkopoju, izmantojot ziņu apkopotāju lietotni. Ziņu datubāzes atbilde būs rakstu krājums ar šādu datu struktūru.

Piedāvājiet rakstu sarakstu par Ethereum

3. solis: izvēlieties katlu plātni

Es izmantoju katlu plāksni, kuru izveidoja mani jauki pasniedzēji Fullstack akadēmijā. (Es tur neķēru React / Redux vilcienu. Mana kohorta ir pēdējā, kas mācās AngularJS) Es izvēlējos šo katlu plātni, jo tajā tiek izmantots pilna krājuma javascript: React / Redux priekšpusē un Express / Sequelize / PostgreSQL aizmugurē. Šī uzdevuma veikšanai esmu mazliet iztīrījis katlu plāksni, lai cilvēki bez Express / Sequelize / PostgreSQL varētu sekot līdzi. Turpmāk mēs sadarbosimies tikai ar React / Redux.

Šeit ir repo, kurā ir šī uzdevuma sākumpunkts un pabeigtais kods.

Šī ir faila struktūra.

src /
  komponenti /
    ListView.js
    ListRow.js
  konteineri /
    RakstiIndex.js
  pakalpojumi /
    raksti.js
  veikals /
    raksti /
      darbības.js
      darbībaTypes.js
      reduktors.js
    indekss.js

Pirms sekojat šai apmācībai, ja tādi termini kā darbība un reduktors nezvana nevienam zvanam, es ļoti iesaku jums izlasīt pamatkoncepciju oficiālajā Redux dokumentācijā vai rakstā, kuru es uzrakstīju:

4. solis: sāciet ar Redux stāvokli

Kāds ir mūsu lietotnes statuss? Mēs runājam par vienkāršu vienas lapas lietotni ar rakstu sarakstu. Mums jāuzglabā no servera izgūto rakstu saraksts. Apskatot rakstu.js sadaļā src / pakalpojumi / raksti, jūs redzēsit masīvu, kas aizpildīts ar rakstiem. Tā kā šī uzdevuma mērķis ir iepazīties ar React / Redux arhitektūras datu plūsmu, funkcija getAllArticles () tieši atgriež mums nepieciešamos rakstus. Reālajā pasaulē šī funkcija būs asinhrons zvans uz kādu attālu API.

Tagad jautājums ir par to, kā strukturēt mūsu valsti. Atbilde no servera (vai šajā gadījumā funkcija getAllArticles) ir objektu masīvs. Mēs to varam ievietot savā stāvoklī.

Bet vai tas ir labākais veids, kā modelēt stāvokli? Apsveriet scenāriju, kurā jums ir jāatjaunina raksta ieraksts. Lietotne atkārtos masīvu, lai atrastu meklētās ziņas. Ko darīt, ja masīva lielums ir patiešām liels? Šī pieeja nebūs ļoti rezultatīva.

Ja mēs strukturējam savu stāvokli ar objektu, piekļūšana rakstam kļūst par uzmeklēšanu. Rakstu renderēšanai mēs varam uzglabāt papildu ID masīvu.

5. solis. Ievietojiet sava stāvokļa datu plūsmu no sākuma līdz beigām

Kā mēs atjauninām šo stāvokli? Šeit nonāk darbība un reduktors. Apsveriet šo plūsmas diagrammu:

Kāda ir mūsu mijiedarbība? Mēs vēlamies padarīt rakstu sarakstu pēc lapas ielādes, lai tā nebūtu liela mijiedarbība. Lai to izdarītu, skatā React mēs sākam ar componentsDidMount. Mēs varam nosūtīt darbību, lai ielādētu izstrādājumus, un paziņot reduktoram. Samazinātājs novērtēs darbību un atjauninās stāvokli. Atjauninātais stāvoklis aktivizēs komponenta renderēšanu.

Sāksim ar darbības veida noteikšanu, ko veic mūsu lietotne. Tā ir vienkārša pastāvīga definīcija rakstu ienešanai. Vēlāk mēs vienmēr varam pievienot vairāk definīciju, piemēram, atjaunināt ierakstu vai izdzēst to.

Tagad ķersimies pie darbības. Atcerieties, ka reakcija, ko mēs saņemam no aizmugures programmas, ir objekta masīvs, mēs to pārvēršam par objektu, izmantojot funkciju “lodash” keyBy.

Reduktors novērtē vienkāršo objektu, kurā ir darbības veids un tā krava. Pēc tam dati tiek saglabāti štatā.

6. solis: Renderēšana

Mēs izstrādājuma statusam pievienosim konteineru ar nosaukumu ArticleIndex. AritcleIndex ir viedais konteiners, kas var sazināties ar Redux veikalu. ArticleIndex iekšpusē ir mēms komponents, ko sauc par ListView, un tā autore ir Tal Kol, Redux apmācības autore, kurai sekoju. Īstenošanu var pārbaudīt komponentu mapē.

ListView ņem articlesById, rakstu ID masīvu un renderēšanas funkciju. Pēc tam tas sastāda rakstu sarakstu.

Kā mēs iegūstam articlesById un masīvu rakstu ID, lai tos apskatītu? Šeit ir Redux pamatkoncepcijas pārskats. Reaktīvais skats ir savienots ar Redux stāvokli caur savienojuma funkciju, ko nodrošina react-redux bibliotēka.

Šis ir kods, kas atbilst diagrammai. Tā apakšā mēs kartējam Redux stāvokli un nosūtām uz React butaforiju. KomponentāDidMount mēs izsaucam loadArticles, kas nosūta fetchAllArticles darbību. Pēc tam, kad stāvoklis ir atjaunināts ar rakstiem, rakstiById tiek pārsūtīts uz React skatu, izmantojot mapStateToProps.

Un tas arī viss! Mūsu pārlūkprogrammā ir rakstu saraksts!

7. darbība: anti-modelis kaut kur kodā?

Lai mācītos datu plūsmu React / Redux, līdz šim esam aizmirsuši citu Redux koncepciju. Reaktīvajam komponentam vajadzētu piekļūt Redux stāvoklim caur selektoriem. Atlasītāji parasti atrodas reducer.js failos. Tās ir tikai funkcijas, kas piekļūst Redux stāvoklim un atdod dažus stāvokļa īpašumus. Ja atlasītāji ir uzstādīti, ja maināt kādu no Redux stāvokļiem, kas ietekmē vairāk nekā vienu komponentu, jums ir jāatjaunina tikai atlasītājs.

Tālāk ir parādīts mūsu izvēles artikuls.

Funkcija mapStateToProps vietnē ArticleIndex.js kļūst par:

Bonuss: ievērojiet to pašu domāšanas procesu un izveidojiet filtru

Rakstu sarakstam mēs varam pievienot virkni dažādu darbību. Piemēram, visos rakstos ir ziņas par Ethereum. Tos iedala divos veidos: ziņas no kriptovalūtas kopienas un ziņas no galvenajiem plašsaziņas līdzekļiem. Pēc rakstu saraksta sastādīšanas es pievienoju tipa filtru, izmantojot to pašu domāšanas procesu.

Noskalot, atkārtot, reaktoru

Mācīšanās React / Redux ir kā lēkšana truša caurumā, bet tas mani ir mainījis no skeptiķa uz ticīgu. Es ceru, ka šis raksts ātri uzsāks mācības.

Sākot ar mazuļa soli, mans mācību projekts ir kļuvis par ziņu apkopotāju un tendenču izsekošanas lietotni!

Paldies par lasīšanu!

Ja atrodaties Steemit, bloķēšanas ķēdes sociālajos saziņas līdzekļos (piemēram, Reddit un Medium mīlas bērns) varat nokļūt šeit: