Vinkkejä Reactin, Reduxin, Reselectin ja Redux Sagan kanssa työskentelemiseen

Tämä artikkeli on tarkoitettu niille, jotka ovat juuri alkaneet ottaa käyttöön ReactJS-, Redux-, Reselect- ja Redux Sagas -sovelluksia parantaakseen tapaamme käsitellä päivittäistä työtä näiden kirjastojen kanssa.

Kun olet oppinut ne kaikki 4, suurin osa kehittäjistä kamppailee näiden kirjastojen tekemisen suhteen, mistä aloitan, kun tarvitsen säveltää komponentin.

Olen kamppaillut tämän ongelman kanssa useita kertoja ennen kuin tajuan kuviot (en ole fiksu). Tässä on mitä olen tehnyt kuukauden ajan:

Hyppääminen hullujen asioiden välillä

Ensin analysoin vaatimuksia ja suunnittelua ja päätin luoda reagoivan komponentin, sitten hyppään suoraan siihen.

Kirjoitin komponentin, sitten ymmärrän, että minun täytyy yhdistää se jonkinlaisiin rekvisiitteihin (ominaisuuksiin), joita en tiedä täysin siitä, mitä ne ovat tällä hetkellä.

Luin rekvisiitta, ja huomasin, että teen tämän, tämä on kontinkomponentti (komponentti, joka ottaa vastuun liittymisestä rekvisiittakauppaan).

Joten minun on luotava toinen esityskomponentti (renderöinti ui-komponentti).

Sitten joitain toimintoja on lähetettävä konttikomponentista, siirryn sitten luomaan joitain toimintoja, mutta toimintojen on oltava ennalta määritetty vakio (en halua selittää syytä, miksi vakio määritetään tässä).

Paljon hyppyä ennen kuin pääset melkein valmis tilaan. Tällä hetkellä olen unohtanut joitain toimia ja tila, jotka tulisi määritellä, sitten hyppään takaisin takaisin. Tämä on tuskallinen prosessi, joten autan jotakin aloittelijaa hyvässä alkuvaiheessa.

Hyppäämisen kuningas :)

Vihje välttääksesi sammakkoa ja kulkemasta tasaisesti.

Ensin sinun on erotettava säilytyskomponentti ja esityskomponentti

# Kontinkomponentti

Hoitaa tallennuksen ja lapsen välisen datayhteyden.

Ei tule olemaan omaa esitystä, sisältää vain muiden esityskomponenttien

Goodpoint: Datalogisella erotuksella, ja antaa esityskomponentin olla enemmän mahdollisuuksia käyttää sitä uudelleen.

# Esityskomponentti

Renderöi vain sille siirretyt tiedot -. voidaan helposti käyttää uudelleen muualla.

Toiseksi käsitellään kutakin heistä

# Konttikomponentin käsittely

  1. Ajattele vaatimuksesta alkaen kaikki mahdolliset komponenttiin tarvittavat toimenpiteet ja tiedot.
  2. Määritä säilökomponentin syöttötiedot.
  3. Määritä toimintojen nimi vakiona.
  4. Luo toiminto objektitietojen yhdistämiseen (miten toiminnan tiedot suunnitellaan, pohditaan).
  5. Jos on tarpeen kutsua API: ta, meidän on luotava saga. Muussa tapauksessa ohita luominen Saga.
  6. Luo saaga: Luo tarkkailija (valvo liipaisimen toimintaolosuhteita) ja työntekijä API-puhelujen käsittelemiseen. Luo datamutaattoreita morfisoidaksesi vastaustiedot haluamuotoihimme.
  7. Jos ei ole API-kutsua (sivuvaikutuksia), voimme jatkaa pelkistimien kanssa.
  8. Supistin: Suunnittele vähennysyksikön alkutila, määritä logiikka tietojen käsittelemistä varten, ennen kuin lisäät sen päävarastoon.
  9. Määritä valitsimet valitaksesi komponenteille tarvittava tietopaketti tai prosessoitu tietopaketti. Tämä auttaa välimuistiin komponentin tietoja, jos tarvitsemme sitä.
  10. Siirrä kaikki tarvittavat tiedot säilytyskomponentin rekvisiittaan redux-yhteysmenetelmällä, kytke, 'bindActionCreators',…
  11. Render-esityskomponentti konttikomponentin sisällä tarvittaessa.

# Esittelykomponentin käsittely

  1. Perustele vaatimus, määritä tarvittavat tiedot tämän komponentin renderoimiseksi.
  2. Vastaanota rekvisiitta vanhemmalta komponentilta tai konttiosalta.

En lupaa, että tämä tuhoaa kipusi kokonaan, mutta ainakin se auttaa vähentämään aikaa hyppäämiseen.

Kiitos käsittelystä.