Apollo vs Redux - flutningur með gögnum

Apollo og Redux eru 2 vinsæl bókasöfn sem notuð eru með React. Þeir eru með af ýmsum ástæðum, en aðallega af:
1. Umsjón með verslun
2. Aðstoð við meðhöndlun gagna
3. Kveikja á öllum endurtekningum með uppfærðum leikmunum

En hvaða aðferðir nota þeir undir hettuna til að gera þetta, og hvernig eru þeir ólíkir þegar kemur að meðhöndlun leikja og flutninga?

Ég ákvað að kanna og hér að neðan er afurðin af því.

TLDR;

Apollo notar áheyranlegt og neyðir handvirkt endurútgáfu og les núverandi Gagnsæjanlegt fyrir gögn á framvindustað.

Redux notar athuganlegan líka, en uppfærir staðbundið ástand fyrir áskrifendur sína með tilkynningum áheyrnarfulltrúa.

Athugasemdir

Eitthvað mikilvægt að snerta fyrst eru Observables. Þau eru ný ósamræmd frumstæð með suma öfluga eiginleika. Grunndæmi er hér að neðan.

  1. Búðu til þinn Observable frá áskriftaraðgerð
const áskriftFunction = (áheyrnarfulltrúi) => {
   // gera eitthvað efni, gæti verið ósamstilltur.
   observer.next ("Hringdu með nokkur gögn");
   observver.complete ();
   return () => console.log ("Afskrá áskrift")
}
const ourObservable = nýtt Athuganlegt (áskriftarsamningur);

2. Gerast áskrifandi að til athugunar þinnar. Þetta mun kalla áskriftinaFunction.

const subscriber = ourObservable.subscribe ({
   næsta (x) {console.log (x)}, // "Hringdu með nokkur gögn"
   error (err) {console.log ("Móttekin uppsagnarvillu
   röð. ")},
   complete () {console.log ("Straumi lokið.")}
});
áskrifandi.afskrá sig (); // "Afskrá"

Í grundvallaratriðum getum við skilgreint 1 til margra samband milli hluta. Þegar ríkið breytist fyrir foreldrið sem hægt er að sjá er tilkynnt og uppfærð á framfæri þess (eftirlitsmennirnir).

Þeir hafa nokkra öfluga eiginleika þar á meðal að vera latur, hætta við og geta keyrt margoft í röð.

Athugaðu zen-sjáanlegt til að nýta þau á sérstakan hátt í dag.

Byrjum á Apollo

Apollo nýtir sér sótt í áskriftaraðgerð á Observables (finndu allar upplýsingar um innri hluti Apollo í nýlegu erindi sem ég flutti hér). The Observable þjónar einnig sem verslun fyrir normaliseruð gögn.

Þegar svarið hefur borist frá HTTP beiðni er verslunin uppfærð og síðan er „forceRender ()“ hrundið af stað (Reacts aðferð til að kveikja handvirkt á endurútgáfu innan tiltekins íhlutar).

Að síðustu með því að nota „render prop mynstur“, eru börnum veitt gögn úr núverandi sýnilegu. Þess má geta að React ástand hefur alls ekki verið notað hér.

Sjá hér að neðan fyrir sundurliðun atburða á síðuálagi með grunn fyrirspurnareiningum.

Full líffærafræði síðuálags með Apollo

Nú til Redux

Með Redux munum við líta framhjá raunverulegum HTTP-sóknartækjum (ef gert er ráð fyrir að annaðhvort dunur eða saga séu notuð í þessu) og einbeitum okkur að versluninni uppfærslum og endurteknum íhlutum.

Þegar íhlutur „tengist ()“ er hann settur á lista yfir áskrifendur fyrir Store Observable (meira um Redux Store Observable hér).
Þegar lækkandi breytir stöðu í versluninni, eru allir áskrifendur látnir vita og keyra „setState ()“.

Niðurstaðan er tengdur hluti og börn hans eru endursýnd með uppfærðum leikmunum.

Einfölduð útgáfa af tengingu Redux er hér að neðan:

class Connect nær út íhlut {
     trySubscribe () {
        this.unsubscribe =
          this.store.subscribe (this.handleChange.bind (þetta))
        this.handleChange ()
     }
     componentDidMount () {
       this.trySubscribe ()
     }
     handleChange () {
       const storeState = this.store.getState ()
       const prevStoreState = this.state.storeState
       // rökfræði með því að geyma og bregðast við ástandi
       // ef Store ástand hefur breyst, uppfærðu Reacts state
       this.setState ({storeState})
     }
}

Yfirlit

Mér finnst heillandi að bæði bókasöfnin nota Observables jafnvel þó þau noti það með mismunandi leiðum.

Ég held að ef ekkert annað sýni það hvers konar hlutverk Observables muni hafa í framtíðinni Javascript. Þeir eru á 1. stigi opinberu tillögunnar eins og er (ítarlegar upplýsingar á tc39 hér), svo að vonandi lenda fljótlega. Með hliðsjón af því hvers konar krafti þeir koma með til borðs (leysa vandamál sem loforð eru straumar geta stundum ekki), það virðist vera fjöldinn allur af atburðarásum sem henta þeim vel.

Að lesa vinnandi dæmi um þau úti í náttúrunni, eins og í Redux og Apollo, er frábær leið til að læra meira um þau.

Næst langar mig til að skoða kosti og galla þessara aðferða og reyna að rökstyðja hvers vegna þessi bókasöfn völdu þá nálgun sem þau gerðu.

Ef þér líkar vel við þetta skaltu hlífa klappi. Láttu mig einnig vita ef þú hefur einhverjar hugsanir eða athugasemdir. Takk :)