Component State vs Redux Store

Vinna með React og Redux, ég nota einfalt mynstur til að gera íhluti minn endurnýtanlega og til að rökræða um. Undanfarin 1 og hálft ár að vinna með React hef ég gert mér grein fyrir því að allir sem eru að byrja að vinna með React og Redux standa alltaf frammi fyrir rugli að ákveða hvaða íhlut ætti að hafa samskipti við redux verslunina og hvaða íhlutir ættu bara að ráðast af þar á eigin ástandi.

Svo í þessari grein mun ég gera tilraun til að gera þennan greinarmun á því hvenær eigi að velja íhlutarástand og hvenær eigi að velja Redux verslun.

Til að byrja með skulum við einbeita okkur fyrst að því að bregðast við.

React er með tvenns konar hluti: -

  1. Snjallir íhlutir
  2. Heimskir íhlutir - Einnig kallaðir sem kynningaríhlutir

Leiðin sem ég greina á milli þeirra tveggja er: -

Ef íhlutur þarf að halda stöðu þá flokkast hann sem snjall íhluti.
Ef íhlutur þarf bara að birta gögn og getur fengið þessi gögn frá foreldrahlutanum en þeir eru flokkaðir sem kynningaríhlutir eða heimskir hlutar.

Til dæmis: - Við skulum segja að við séum með netverslunarforrit þar sem við erum með skráningu síðu sem birtir lista yfir vörur.

Í þessari atburðarás hefði beinagrind eða ber skipulag eftirfarandi efri hluti:


 
 
 

ProductsContainer íhluturinn hér myndi einbeita sér að því að fá lista yfir vörur og síðan endurtaka í gegnum hverja vöru og láta hverja vöruhlut í té.

Hér inni getum við kallað ProductsContainer sem snjalla íhluti þar sem þessi íhlutur er í því ríki sem í þessu tilfelli er listi yfir vörur.

Dæmi um vöru fyrir hluti sem er kynningarhlutinn okkar myndi líta svona út: -

Ofangreint er kynningarefni, þar sem það er aðeins ábyrgt fyrir því að birta gögn og það fær þau gögn í formi leikmunir frá foreldrahlutanum.

Svo að lokum ef íhlutur heldur ástand og notar það, þá er hann snjall hluti og ef íhlutur birtir bara gögn sem hann fær í formi leikmunir, þá verður hann flokkaður sem kynningarhluti.

Gyllt tilvitnun í Dan Abramov sem dregur fram þetta er:

Þegar þú tekur eftir því að sumir íhlutir nota ekki leikmunina sem þeir fá heldur eingöngu framsenda þá og þú verður að tengja alla þá millihluta í hvert skipti sem börnin þurfa fleiri gögn, þá er það góður tími til að kynna einhverja ílátahluta.

Þetta snerist um Component State, næsta spurning sem kemur upp í huga okkar er hvaða gögn ættu að fara inn í redux verslunina.

Hvernig ég flokka það er þegar nokkru sinni verður að deila ríki með mörgum íhlutum eða mörgum síðum og við verðum að halda áfram einhverjum gögnum um breytingar á leiðinni, öll þessi gögn ættu að fara inn í redux verslunina.

Til að halda áfram með sama dæmi, segjum við að allar þessar vörur séu með kauptakkann og við erum með körfu sem ætti að geyma alla þá hluti sem smellt hefur verið á kaupa núna.

Þessar körfuupplýsingar þurfa að vera viðvarandi á mörgum síðum og þvert á hluti eins og hausþáttinn þar sem við munum sýna fjölda körfunnar, stöðva síðu og greiðslusíðu.

Þetta er skýr vísbending um að vörurnar sem bætt er við í körfunni ættu að fara í redux verslunina frekar en íhlutarástandið.

Þetta leiðir okkur til annars aðgreiningar á íhlutum: -

  1. Sérhver íhlutur sem er tengdur við redux verslunina er flokkaður sem gámur hluti.Það getur sent aðgerðir og uppfært redux verslunina með redukerunum.
  2. Íhlutirnir sem eru ekki tengdir við redux verslunina fara inn í íhluta möppuna. Nú er hægt að flokka þessa íhluti enn frekar sem Smart og Dumb því jafnvel þó þeir séu ekki tengdir við Redx verslunina, þá geta þeir samt haldið stöðu með því að hringja í einhverja API og viðvarandi þessi gögn aðeins til líftíma þess íhlutar.

Til dæmis:-

ShoppingApp íhluturinn getur flokkað sem ílát og verið ábyrgur fyrir því að ná upphaflegri körfutalningu og innskráningarupplýsingum.

Við munum ekki fara ítarlega inn í virkni redux og mismunandi redux aðgerða eins og mapStateToProps, aðgerðasmiðir, sendendur.

Hægt er að lesa alla þessa hluti úr Redux Docs.

Mockup fyrir lokaforritið sem við munum byggja verður eitthvað svona: -

Eftir að búið er að bæta við töfum, íhlutum, ílátum, aðgerðum, er dæmi um hvernig möppuskipan mín vill vera: -

Hérna verður ShoppingApp tengdur við redux verslunina og myndi senda aðgerð til að fá fyrstu körfugögnin. Þetta gerir ShoppingApp að ílátahlutanum.

ShoppingApp myndi koma þessum gögnum yfir á hausþátt.

Þetta gerir haus að aðeins hluti og þar sem hann er ekki með sitt eigið hluti er hann frekar flokkaður í kynningarhluta.

ProductsContainer í redux skilmálum telst ekki til ílátshluta þar sem það er ekki tengt við redux verslunina en þar sem það er með sitt eigið hluti ástand sem flokkar það sem snjallt íhlut.

Heildar kóða fyrir ofangreint dæmi er að finna á eftirfarandi kóða fyrir urlbox:

Fyrir nokkra stíl hef ég bætt við react material-ui.

Svo að lokum, ef íhlutur þinn þarf að hafa samskipti við redux verslunina, meðhöndla gögn og senda aðgerðir, þá ætti hann að fara í gáma annars í íhlutum.

Frekari upplestur

  • Kynningar- og gámahluti
  • Redux skjöl
  • Ílát íhlutar