Apollo vs Redux - renderdamine andmetega

Apollo ja Redux on 2 populaarset raamatukogu, mida kasutatakse koos Reaketiga. Need on lisatud erinevatel põhjustel, kuid peamiselt järgmistel põhjustel:
1. Kaupluse haldamine
2. Abi andmete hankimisel
3. Uue renderdamise käivitamine värskendatud rekvisiitidega

Kuid milliseid mehhanisme nad selleks kasutavad kapoti alt ja kuidas need erinevad rekvisiitide käsitsemise ja renderdamise osas?

Otsustasin uurida ja allpool on selle tulemus.

TLDR;

Apollo kasutab jälgitavat ja sunnib uuesti renderdamist käsitsi, lugedes renderduspunktis andmete jaoks praegust vaadeldavat.

Redux kasutab ka jälgitavat, kuid värskendab vaatleja teatiste abil oma tellijate kohalikku olekut.

Vaatlusalused

Midagi olulist on kõigepealt puudutada Observables. Need on uus asünklik primitiiv, millel on mõned võimsad omadused. Põhinäide on allpool.

  1. Looge oma jälgitav tellimisfunktsiooni abil
const subscriptionFunction = (vaatleja) => {
   // tee mõned asjad, võiks olla asünk.
   observer.next ("Helista mingite andmetega");
   vaatleja.com täielik ();
   return () => console.log ("Tellimuse tühistamine")
}
const ourObservable = uus jälgitav (subscriptionFunction);

2. Telli oma jälgitav. See kutsub esile subscriptionFunction.

const subscriber = ourObservable.subscribe ({
   järgmine (x) {console.log (x)}, // “Helista mingite andmetega”
   tõrge (viga) {console.log ("Vastuvõetud saidi lõpetamisviga
   jada. ")},
   täielik () {console.log ("Voog on edukalt lõpule viidud.")}
});
subscriber.unsubscribe (); // "tellimusest loobumine"

Põhimõtteliselt saame määratleda objektidevahelise suhte 1: 1. Kui lapsevanema olek muutub jälgitavaks, teavitatakse teda ja tema ülalpeetavaid (vaatlejaid) ning ajakohastatakse.

Neil on mitmeid võimsaid omadusi, sealhulgas need, mis on laisad, tühistatavad ja võivad mitu korda järjest töötada.

Vaadake zen-jälgitavust, et neid tänapäeval spetsiaalsele nõuetele vastaval viisil kasutada.

Alustame Apollost

Apollo kasutab tõmbamist Observables'i tellimisfunktsiooni sees (leiate täpsemat teavet Apollo sisemiste kohta hiljutisest vestlusest, mille tegin siin). Vaadeldav toimib ka normaliseeritud andmete hoidlana.

Pärast HTTP-päringult vastuse saamist värskendatakse pood ja seejärel käivitatakse „forceRender ()” (reageerib meetodiga, et antud komponendi sees uuesti renderdamist käsitsi käivitada).

Viimaseks, kasutades “renderdamise rekordi mustrit”, pakutakse lastele andmed praegusest jälgitavast välja. Väärib märkimist, et Reaktiivset olekut pole siin üldse kasutatud.

Altpoolt leiate sündmuste jaotuse põhiküsimuskomponendiga lehelaadimisel.

Apolloga lehelaadimise täielik anatoomia

Nüüd Reduxi peale

Reduxi puhul eiratakse tegelikku HTTP-tõmbamismehhanismi (eeldusel, et selleks kasutatakse kas okkaid või sagasid) ning keskendume poe värskendustele ja komponentide uuesti renderdustele.

Kui komponent “ühendab ()”, lisatakse see Store Observable tellijate nimekirja (rohkem Redux Store Observable veebisaidil siin).
Kui redigeerija muudab poes olekut, teavitatakse kõiki abonente ja nad käivitavad „setState ()”.

Tulemuseks on ühendatud komponent ja selle lapsed taastatakse värskendatud rekvisiitidega.

Reduxi ühenduse lihtsustatud versioon on allpool:

class Connect laiendab komponenti {
     trySubscribe () {
        this.unsubscribe =
          this.store.subscribe (this.handleChange.bind (this))
        this.handleChange ()
     }
     komponentDidMount () {
       this.trySubscribe ()
     }
     handleChange () {
       const storeState = this.store.getState ()
       const prevStoreState = this.state.storeState
       // loogika salvestamise ja reageerimise oleku abil
       // kui poe olek on muutunud, värskendage olekut Reacts
       this.setState ({storeState})
     }
}

Kokkuvõte

Minu arvates on põnev, et mõlemad raamatukogud kasutavad jälgitavaid, isegi kui nad kasutavad seda erinevate mehhanismidega.

Ma arvan, et kui see pole midagi muud, näitab see seda, millist rolli jälgivad JavaScripti tulevikus omavad. Nad on praegu ametliku ettepaneku 1. etapis (täielikud üksikasjad aadressil tc39 siin), seega loodetavasti maandub varsti. Arvestades seda, kui palju jõudu nad lauale toovad (probleemide lahendamine, mida lubadused mõnikord Streams ei suuda), näib, et on olemas palju stsenaariume, mis neile hästi sobivad.

Töötavate näidete lugemine looduses, nagu näiteks Reduxis ja Apollos, on suurepärane viis nende kohta rohkem teada saada.

Järgmisena tahaksin uurida nende lähenemisviiside plusse ja miinuseid ning proovida selgitada, miks need raamatukogud valisid lähenemisviisi, mida nad tegid.

Kui teile see meeldis, siis palun plaksutage. Teise võimalusena andke mulle teada, kui teil on mingeid mõtteid või tagasisidet. Tänud :)