Advanced ReactJS: React + Redux + Sagas paraugprakse

kafija domai

Pirmkārt, ātrs ievads par to, kas ir React. Tā ir JavaScript bibliotēka, ko izmanto lietotāja saskarņu veidošanai. Kopš tā iznākšanas tas ir mainījis priekšējās daļas attīstības ainavu. Tātad, ja jūs tiecaties kļūt par tīmekļa izstrādātāju, kas mācās, piemēram, tādas bibliotēkas kā React vai Vue.js, mūsdienu industrijā ir gandrīz būtiskas. Šī ir lieliska apmācība, ja jūs tikai sākat mācīties reaģēt. https://reactjs.org/tutorial/tutorial.html.

Es atceros, kad es sāku mācīties React. Man vienmēr bija satraukta sajūta, ka es nekad nevaru iemācīties visu nepieciešamo, un man aiz galvas draud aizvien mainīgā JavaScript valoda, un, ja es kādreiz kaut ko saprastu, es vienmēr galu galā jautāšu sev, vai tas tiešām ir labākais veids to darīt? Pēc burtiski simtiem tiešsaistes apmācību, Youtube meklēšanas un nepabeigtām (un, visticamāk, nemazgātām) kafijas tasēm, es beidzot biju stingri sapratis, ko React mēģina ienest JavaScript tabulā.

Tomēr es vienmēr esmu cīnījies, lai atrastu apmācību, kurā visi sarežģītie React jēdzieni tiktu apkopoti vienā kompaktā apmācībā.

Turklāt es atceros, ka man bija grūti saprast šos jēdzienus, kad tie tika izmantoti lielā avota kodā. Šī ir plaisa, kuru šis raksts mēģina aizpildīt. Uzlabotie rīki un jēdzieni ir iestrādāti mūsu vienkāršajā lietotnē, tas ir paredzēts tikai apmācības nolūkiem, un jums nevajadzētu lietot šos jēdzienus, ja jūsu lietotnei tie nav nepieciešami.

Pietiekami ar chit-chat. Parunāsim kodu. Lejupielādējiet gatavo kodu no šī repo un sekojiet README, lai jūs varētu redzēt un sajust, ko mēs šeit veidosim. https://github.com/jelorivera08/react-starter-pack.

Lietotnes galvenā lapa

Augšpusē varat redzēt parādīto skaitīšanas stāvokli un četras pogas, kas aktivizē to attiecīgās darbības. Viņu rīcība ir pašsaprotama.

atlasītāji

Dodieties uz faila selectors.js Counter konteinerā. Pirmais uzlabotais jēdziens, kuru mēs šeit risinām, ir createSelector. Apskatot kodu, pirmkārt, ar const count mainīgo tiek iegūts skaitīšanas stāvoklis redux stāvokļa kokā, izmantojot state.get ('count').

Pēc tam mēs izveidojam selektoru, izmantojot minēto metodi. Tas palīdz mums formatēt stāvokli / datus, ko mēs saņemam no redux stāvokļa koka, un šādi rīkojoties, mēs daudz laika ietaupām, kodējot jaunas funkcijas, kas veic stāvokļa pārstrukturēšanu, vai mērķa stāvokļa formatēšanu katru reizi, kad tas ir nepieciešams, lai kaut ko izveidotu priekšpusē. -pabeigt. Šajā piemērā es nemainīju saņemto stāvokli. Es tikko atgriezu vienkāršo stāvokli demonstrācijas vajadzībām.

Pēc tam iegūto funkciju izmantos mapStateToProps, un, protams, ar mapStateToProps nākamā konfigurējamā lieta ir mapDispatchToProps.

izveidot darbības

Ikreiz, kad tiek nosūtīta reduktora darbība, mums vienmēr ir jādeklarē tā tips un atbilstošais pārslēgšanas korpuss reduktoram, kuru tas ievadīs vēlāk, lai mainītu lietojumprogrammas stāvokli. Izmantojot izveidoto pasākumu paketi no reduxsauce, mēs varam trāpīt diviem putniem ar vienu akmeni. Mums arī jāformatē reduktors ar reduxsauce, lai pilnībā izmantotu šo paketi.

reduktors

Augšpusē ir mūsu lietotnes reduktors. Sākotnējo stāvokli noJS API ieslēdz no nemainīgas, un, piemērojot paketes nosaukumu, tas aizsargā sākotnējo stāvokli no mutācijas. Reaģēt uz šo koncepciju ir ļoti stingri, tāpēc vienmēr to paturiet prātā. programmai createReducer API no reduxsauce ir divi argumenti.

Pirmkārt, sākotnējais stāvoklis. Otrkārt, objekts, kuram ir darbības veidu atslēgas un vērtības kā funkcija, kuru reduktors iedarbinās, tiklīdz tips atbilst nosūtīšanas zvanam. Pēc tam sapludināšana attiecīgi maina redux stāvokļa koku. Nav tādas reālās dzīves lietotnes, kas nezina, kā pareizi rīkoties ar asinhronajiem API zvaniem? Pa labi.

redux sāga

Šeit ir mūsu programmas sāgas daļa. Viss ir vienāds, izņemot veidu, kā mēs saucam par savu rīcību. Mēs izmantojam iepriekš izveidoto tipa darbību un izmantojam tos mūsu novērotāju sāgā, lai nosūtītu asinhronos zvanus, kas vēlāk ietekmēs mūsu redux stāvokļa koku.

Kavēšanās ir tāda, lai izsmietētu tīkla latentumu, lai lietotnei būtu daudz labāka asinsspiediena sajūta. Visbeidzot, pārliecināsimies, ka neaizmirsīsim par sniegumu.

koda sadalīšana

Koda sadalīšana ir lielisks veids, kā uzlabot tīmekļa lietojumprogrammu veiktspēju. JavaScript kods visvairāk uzliek datus par lietotāja datiem. Atcerieties, ka tāpat kā koda sadalīšana ļauj galalietotājam lejupielādēt tikai to koda daļu, kas nepieciešama datu patēriņa efektivitātei.

Noslēgumā,

Ir ļoti daudz pakešu un rīku, kas mums, programmatūras inženieriem, palīdz izveidot tīrāku un daudz efektīvāku kodu. nāk ar izmaksām, par pamata sistēmas izpratnes izmaksām, un tas ir domāšana React.

Lai mācītos React, jums jāpārveido kodēšanas paradigma daudz atšķirīgākā, salīdzinot ar iepriekšējo kodēšanas ideju kopu priekšpusē. Rīki un paketes, ko es apskatīju šajā rakstā, satur tos principus, kas nepieciešami, lai skaisti un efektīvi kodētu React, un tas padara to par izcilu izstrādātāju.

Tas vienmēr ir sīkumi.

Ar to es ceru, ka esmu palīdzējis jums uzlabot jūsu izpratni par React ar šo mazo rakstu. Priekā!