Išplėstinė „ReactJS“: „React + Redux + Sagas“ geriausia praktika

kavos mintims

Pirmiausia reikia greitai pristatyti, kas yra „React“. Tai „JavaScript“ biblioteka, naudojama kuriant vartotojo sąsajas. Nuo tada, kai jis atsirado, tai pakeitė priekinę plėtros aplinką. Taigi, jei ketinate būti žiniatinklio kūrėju, tokios bibliotekos, kaip „React“ ar „Vue.js“, yra be galo svarbios šiandienos pramonėje. Tai puikus pamoka, jei tik pradedate mokytis reaguoti. https://reactjs.org/tutorial/tutorial.html.

Prisimenu, kai pradėjau mokytis „React“. Man visada buvo nerimastingas jausmas, kad niekada negaliu išmokti visko, ko man reikėjo, nuolat kinta „JavaScript“ kalba. padaryti tai? Po pažodžiui šimtų internetinių vadovėlių, „Youtube“ paieškų ir nebaigtų (ir greičiausiai neplautų) kavos puodelių pagaliau turėjau tvirtą supratimą apie tai, ką „React“ bando įtraukti į „JavaScript“ lentelę.

Tačiau aš visada stengiausi rasti vadovėlį, kuriame visos išplėstinės „React“ sąvokos būtų sujungtos į vieną kompaktišką vadovėlį.

Be to, atsimenu, kad sunku buvo suprasti šias sąvokas, kai jos buvo naudojamos dideliame šaltinio kode. Tai spraga, kurią bandoma užpildyti šiame straipsnyje. Išplėstiniai įrankiai ir sąvokos yra įterpti į paprastą programą. Tai skirta tik mokymo tikslams ir neturėtumėte naudoti šių sąvokų, jei jūsų programoje jų nereikia.

Pakanka su chit-chat. Kalbėkime kodą. Atsisiųskite gatavą kodą iš šio repo ir vykdykite README, kad galėtumėte pamatyti ir pajusti, ką mes čia sukursime. https://github.com/jelorivera08/react-starter-pack.

Programos nukreipimo puslapis

Aukščiau galite pamatyti rodomą skaičiavimo būseną ir keturis mygtukus, kurie suaktyvina atitinkamus veiksmus. Jų veiksmai yra savaime suprantami.

selektoriai

Eikite į failą selectors.js, esantį „Counter“ talpykloje. Pirmoji pažangioji koncepcija, kurios čia ieškome, yra „createSelector“. Pažvelgus į kodą, pirmiausia, const count kintamasis atkuria skaičiavimo būseną redux būsenos medyje, naudodamas state.get ('count').

Tada mes sukuriame selektorių, naudodami minėtą metodą. Tai padeda mums suformatuoti būseną / duomenis, kuriuos gauname iš redux būsenos medžio, ir tokiu būdu mes sutaupome daug laiko, kad užkoduotume naujas funkcijas, kurios tvarko valstybės pertvarkymą, arba formatuojame tikslinę būseną kiekvieną kartą, kai mums to reikia, kad kažkas atsidurtų priekyje. -galas. Šiame pavyzdyje nepakeičiau gautos būsenos. Aš ką tik grąžinau paprastą būseną demonstraciniais tikslais.

Tada gauta funkcija bus naudojama „mapStateToProps“ viduje, o naudojant „mapStateToProps“, savaime suprantama, kitas konfigūruojamas dalykas yra „mapDispatchToProps“.

kurti veiksmus

Išsiųsdami reduktoriaus veiksmus, mes visada turime deklaruoti jo tipą ir atitinkamą jungiklio dėklą reduktoriui, kurį jis įves vėliau, kad pakeistų programos būseną. Naudodami „reduxsauce“ paketą „createActions“, vienu akmeniu galime smogti dviem paukščiams. Taip pat turėtume suformatuoti reduktorių su reduxsauce, kad galėtume visapusiškai naudotis šia pakuote.

reduktorius

Aukščiau yra mūsų programos reduktorius. Pradinė būsena yra uždaryta fromJS API nuo nekintamų ir, kai taikomas paketo pavadinimas, ji apsaugo pradinę būseną nuo mutavimo. Reaguokite į šią sąvoką labai griežtai, todėl visada atsiminkite tai. „editReducer“ API iš reduxsauce turi du argumentus.

Pirma, pradinė būsena. Antra, objektas, kuriame yra veiksmų tipų klavišai ir reikšmės, kaip funkcija, kurią reduktorius suaktyvins, kai tipas sutampa su išsiuntimo skambučiu. Sujungus, atitinkamai keičiasi redux būsenos medis. Nėra tikro gyvenimo programos, kuri nežinotų, kaip teisingai valdyti asinchroninius API skambučius? Teisingai.

redux saga

Čia yra mūsų programos saga. Viskas yra tas pats, išskyrus tai, kaip mes vadiname savo veiksmus. Mes naudojame anksčiau sukurtą tipo veiksmą ir juos naudojame stebėtojų sagoje, kad galėtume išsiųsti asinchroninius skambučius, kurie vėliau paveiks mūsų redukso būsenos medį.

Vėluojama tam, kad pavyktų paslėpti tinklo delsą, kad programa būtų daug geresnė, nes jaustis asinchroniškai. O galiausiai, įsitikinkime, kad nepamirškime apie našumą.

kodo padalijimas

Kodo padalijimas yra puikus būdas pagerinti interneto programų našumą. „JavaScript“ kodas labiausiai uždirba vartotojo duomenis. Atminkite, kad dalijant kodą jis galutiniam vartotojui leidžia atsisiųsti tik tą kodo dalį, kurios reikia duomenų vartojimo efektyvumui.

Apibendrinant,

Yra daugybė paketų ir įrankių, kurie mums, programinės įrangos inžinieriams, padeda sukurti švaresnį ir daug efektyvesnį kodą. ateina su kaštais, su pagrindinės sistemos supratimu ir mąstymu „Reaktyvoje“.

Norint mokytis reaguoti, reikia pakeisti savo kodavimo paradigmą į daug kitokią, palyginti su ankstesniais kodavimo principais. Įrankiai ir paketai, kuriuos aptariau šiame straipsnyje, pateikia tuos principus, kurių reikia norint gražiai ir efektyviai koduoti „React“, ir tai daro išskirtinį kūrėją.

Tai visada yra smulkmenos.

Tikiuosi, kad padėjau jums geriau suprasti, kaip reaguojate su šiuo mažu straipsniu. Džiaugsmas!