Apollo vs Redux - vykreslování s daty

Apollo a Redux jsou 2 populární knihovny používané s React. Jsou zahrnuty z různých důvodů, ale hlavně pro:
1. Správa obchodu
2. Pomoc při získávání dat
3. Spuštění jakéhokoli opětovného vykreslení pomocí aktualizovaných rekvizit

Jaké mechanismy však používají k tomu, aby to udělali a jak se liší, pokud jde o manipulaci s rekvizity a vykreslování?

Rozhodl jsem se to prozkoumat a níže je výsledkem toho.

TLDR;

Apollo používá pozorovatelné a ručně vynutí opakované vykreslení a přečte aktuální pozorovatelné pro data v místě vykreslení.

Redux také používá Observable, ale aktualizuje místní stav pro své předplatitele pomocí upozornění pozorovatele.

Pozorovatelné

Nejdůležitější je dotknout se nejprve pozorovatelných. Jsou to nový asynchronní primitiv s některými výkonnými vlastnostmi. Základní příklad je níže.

  1. Vytvořte si pozorovatelnou funkci předplatného
const subscriptionFunction = (pozorovatel) => {
   // dělat nějaké věci, může být asynchronní.
   observer.next ("Volat s některými daty");
   observer.complete ();
   return () => console.log ("Odhlášení")
}
const ourObservable = new Observable (subscriptionFunction);

2. Přihlaste se k odběru svého pozorovatelného. Tím se vyvolá předplatnéFunction.

const subscriber = ourObservable.subscribe ({
   next (x) {console.log (x)}, // „Volat s některými daty“
   error (err) {console.log ("Obdržená chyba ukončení
   sekvence. ")},
   complete () {console.log ("Stream byl úspěšně dokončen.")}
});
subscriber.unsubscribe (); // „Zrušení registrace“

V zásadě můžeme definovat vztah 1 k mnoha mezi objekty. Když se stav rodičů změní, pozorovatelé jsou informováni a aktualizováni jeho závislí (pozorovatelé).

Mají několik mocných vlastností, včetně toho, že jsou líní, zruční a mohou běžet několikrát za sebou.

Vyzkoušejte zen, abyste je dnes mohli využívat v souladu se specifikacemi.

Začněme s Apollem

Apollo využívá načtení uvnitř funkce předplatného Observables (úplné podrobnosti o vnitřních stránkách Apolla najdete v nedávném rozhovoru, který jsem zde udělal). Observable také slouží jako Store pro normalizovaná data.

Po přijetí odpovědi z požadavku HTTP je úložiště aktualizováno a poté je spuštěna „forceRender ()“ (metoda Reactions pro ruční spuštění opětovného vykreslení uvnitř dané komponenty).

Nakonec se pomocí „vykreslovacího podpůrného vzoru“ vykreslí děti s daty z aktuálního pozorovatelného. Stojí za povšimnutí, že zde nebyl vůbec použit stav React.

Níže naleznete rozpis událostí při načítání stránky se základní komponentou Query.

Plná anatomie načtení stránky pomocí Apolla

Nyní na Redux

S Reduxem budeme ignorovat skutečný mechanismus stahování HTTP (za předpokladu, že se k tomu použijí thunky nebo ságy) a zaměříme se na aktualizace úložiště a re-renderování komponent.

Když se komponenta „připojí ()“, přidá se do seznamu předplatitelů pro pozorovatelný obchod (více o pozorovatelném obchodě Redux zde).
Když reduktor změní stav v obchodě, všichni účastníci jsou upozorněni a spuštěni „setState ()“.

Výsledkem je připojená komponenta a její děti jsou znovu vykresleny s aktualizovanými rekvizitami.

Zjednodušená verze připojení společnosti Redux je níže:

třída Connect rozšiřuje komponentu {
     trySubscribe () {
        this.unsubscribe =
          this.store.subscribe (this.handleChange.bind (this))
        this.handleChange ()
     }
     componentDidMount () {
       this.trySubscribe ()
     }
     handleChange () {
       const storeState = this.store.getState ()
       const prevStoreState = this.state.storeState
       // logika pomocí stavu úložiště a reakce
       // Pokud se stav obchodu změnil, aktualizujte stav Reacts
       this.setState ({storeState})
     }
}

souhrn

Považuji za fascinující, že obě knihovny využívají Observables, i když je používají s různými mechanismy.

Myslím, že pokud nic jiného, ​​neukáže to, jakou roli budou mít Observables v budoucnosti Javascriptu. V současné době se nacházejí v 1. etapě oficiálního návrhu (úplné podrobnosti zde na tc39), takže snad brzy přistanou. S ohledem na druh síly, kterou přinášejí ke stolu (řešení problémů, které Promises are Streams někdy nemohou), se zdá, že existuje řada scénářů, které se jim budou dobře hodit.

Čtení pracovních příkladů z nich ve volné přírodě, jako například v Reduxu a Apollu, je skvělý způsob, jak se o nich dozvědět více.

Dále bych chtěl prozkoumat výhody a nevýhody těchto přístupů a pokusit se zdůvodnit, proč si tyto knihovny zvolily přístup, který udělali.

Pokud se vám to líbilo, ušetřte tleskání. Případně nám dejte vědět, pokud máte nějaké myšlenky nebo zpětnou vazbu. Dík :)