Näpunäited, kuidas töötada React, Redux, Reselect ja Redux Saga abil

See artikkel on mõeldud neile, kes alles hakkasid kasutusele võtma ReactJS, Redux, Reselect ja Redux Sagas, et parandada nende raamatukogude igapäevase töö käsitlemise viise.

Pärast nende kõigi 4 õppimist vaevab enamik arendajaid, mida nende raamatukogudega teha, kust alustada, kui pean komponendi koostama.

Olen selle probleemiga mitu korda vaeva näinud, enne kui mustritest aru saan (ma pole tark). Siin on see, mida ma kuu aega teinud olen:

Hüppab asjade vahel ringi nagu hull

Esmalt analüüsin nõuet ja kujundamist ning otsustasin luua reageerimiskomponendi, seejärel hüppan selle juurde otse.

Kirjutasin komponendi, siis mõistan, et pean selle ühendama mingite rekvisiitidega (omadustega), et ma pole täiesti teadlik sellest, mis need hetkel on.

Ma lõin rekvisiidid ja mõistsin, et kui ma seda teen, on see konteineri komponent (komponent, mis vastutab rekvisiitide kauplusega ühendamise eest).

Nii et ma pean looma veel ühe esitluskomponendi (renderdamise ui komponent).

Siis tuleb konteineri komponendist saata mõned toimingud, siis hakkan looma mõnda toimingut, kuid toimingutel peab olema eelnevalt määratletud konstant (ma ei taha selgitada, miks siin konstanti määratleda).

Enne hüppelist olekut saab palju ringi hüpata. Selle hetkega olen unustanud mõned toimingud ja oleku, mis tuleks määratleda, siis hüppan uuesti tagasi. See on valus protsess, nii et aitan mõnel uustulnukal hea alguse saada.

Hüppe kuningas :)

Näpunäide, et vältida konna moodustamist ja liikuda ühtlaselt.

Esiteks peate eristama konteineri komponenti ja esitluskomponenti

# Konteineri komponent

Hooldab poe ja tema lapse vahelist andmesidet.

Sellel pole oma esitlust, see sisaldab ainult teiste esitluse komponenti

Goodpoint: andmeloogika eraldamine ja laske esitluskomponendil olla suurem võimalus seda uuesti kasutada.

# Esitluskomponent

Renderdab ainult talle edastatud andmed -. saab hõlpsasti mujal kasutada.

Teiseks, käsitledes neid kõiki

# Konteineri komponendi käsitlemine

  1. Mõtle alates nõudest läbi kõik komponendi jaoks vajalikud toimingud ja teave.
  2. Määratlege konteineri komponendi sisendandmed.
  3. Määrake toimingute nimi konstantseks.
  4. Looge toiming objektide andmete seostamisega (kuidas toimingu andmeid kujundada, on arutelust väljas).
  5. Kui on vaja kutsuda API, peame looma saga. Vastasel juhul jätke Saga loomine vahele.
  6. Loo saaga: looge jälgija (vallandage päästiku toimingu tingimusi) ja töötaja API-kõnede haldamiseks. Looge andmemuteerijad, et muuta vastuse andmed meie soovi kujuks.
  7. Kui API kutsumist pole (kõrvaltoimed), siis võime Reduceritega edasi minna.
  8. Reduktor: kujundage reduktori algseisund, määrake loogika andmete töötlemiseks enne nende peapoodi rakendamist.
  9. Määrake valijad komponentide jaoks vajaliku andmekogu või töödeldud andmete valimiseks. See aitab vahemällu salvestada komponendi andmed, kui me seda vajame.
  10. Andke kogu vajalik teave konteineri komponendi rekvisiitidele redux-i ühendamismeetodi kaudu, ühendage, „bindActionCreators” ...
  11. Vajaduse korral renderdage esitluskomponent konteineri komponendi sees.

# Toimetamine esitluskomponendiga

  1. Põhinedes nõudele, määrake selle komponendi renderdamiseks vajalikud andmed.
  2. Võtke rekvisiidid vastu põhikomponendist või konteinerikomponendist.

Ma ei luba, et see kustutab teie valu täielikult, kuid vähemalt aitab see vähendada ringi hüppamise aega.

Täname, et lugesite