Manipulace s vedlejšími účinky pomocí Redux-Saga

Proč byste měli používat Sagas ve své aplikaci ReduxÂ

Nedávno jsem se připojil ke skvělému softwarovému startupu, kde budujeme software pro správu zařízení. Součástí aplikace je stránka nazvaná MapTrac, což je jednostránkový, automaticky se načítající mapový pohled na zařízení, které klient spravuje. Data, která tato stránka používá, se neustále aktualizují na pozadí, takže je pro koncové uživatele obtížné zajistit rychlé a bezproblémové používání. Je také složité pokračovat v načítání nových dat, aniž by se zastavil běh zbytku aplikace.

K vyřešení těchto problémů používáme skvělou open-source knihovnu s názvem Redux-Saga. Je zřejmé, že tato knihovna spoléhá na to, že funguje Redux (je to middleware Redux). Jak jsem řekl, jsem ve společnosti poměrně nový, takže sám knihovně úplně nerozumím, a proto píšu tento příspěvek. Doufám, že to ke konci pochopím lépe!

Redux?

Za prvé, co je Redux? Z toho, co jsem pochopil, je Redux nástroj, který pomáhá udržovat vaši aplikaci, konkrétně data, která používá, spolehlivou. Filozofií Reduxu je, že vaše aplikace má jediný zdroj „pravdy“ – tedy stav vaší aplikace. Tento stav (neboli úložiště v jazyce Redux) je pouze pro čtení, což znamená, že jej lze aktualizovat pouze voláním akce. Akce jsou v podstatě objekty, které vaší aplikaci sdělují, že se něco stalo:uživatel klikl na tlačítko, byla přijata data nebo cokoli jiného, ​​co by mohlo ovlivnit stav vaší aplikace.

Akce zase volá redukci, což je čistá funkce. Pokud si nejste jisti, co je to čistá funkce, můžete přejít sem a dozvědět se více. V zásadě se jedná o funkci, která neaktualizuje nic mimo její rozsah. Pro reduktor to znamená, že vytváří nový stav na základě toho, co mu akce říká, spíše než aktualizuje starý. Poté vrátí nový stav, který nahradí starý stav. Může se to zdát zdlouhavé, ale pomáhá to vaší aplikaci chovat se konzistentně a udržovat kontrolu nad vaším stavem. Redux vás nutí projít tímto procesem, abyste vždy snadno věděli, proč se váš stav změnil. Existují další důvody, proč používat Redux, ale to je ten hlavní:pokud se obáváte velkého, komplikovaného a často aktualizovaného úložiště dat, pak vám Redux může pomoci se správou.

Jaký problém řeší Sagas?

V zemi Redux nejsou jen duhy a jednorožci. Zatímco Redux jde dlouhou cestou při snižování vedlejších účinků, které mohou ovlivnit váš stav, asynchronní úlohy, jako je získávání dat z vašeho serveru, mohou být s obyčejným Reduxem stále problémem. Sagas je middleware Redux, díky kterému je manipulace s těmito případy jednodušší a čistější. K tomu, jak to dělá, se dostaneme za chvíli, ale nejprve si projdeme základní koncepty asynchronního programování.

O co jde? asynchronní?

Mluvit o rozdílu mezi synchronními a asynchronními funkcemi může být velmi matoucí, protože se zdá být obrácené k tomu, co byste očekávali. V každodenním jazyce synchronní znamená, že dvě věci existují současně (tj. jsou „synchronizovány“), zatímco asynchronní znamená, že dvě věci neexistují ve stejnou dobu. Toto je převráceno v počítačové řeči. Pokud je proces nebo úloha v Javascriptu synchronní, znamená to, že je nějakým způsobem závislá na jiném procesu. Často to znamená, že proces nelze spustit, dokud není dokončen jiný. Asynchronní úlohy na druhé straně nezávisí na žádné jiné úloze, a proto mohou být spouštěny nezávisle.

Často je toto téma zaměňováno s myšlenkou vláken, a přestože jsou vzájemně propojeny, nejsou totéž. Synchronní i asynchronní procesy mohou být spuštěny v jednom nebo více vláknech. Vizuální příklad naleznete v této vynikající odpovědi StackOverflow. Další odpověď na otázku StackOverflow poskytuje užitečnou metaforu k zapamatování rozdílu mezi asynchronními a synchronními úkoly:

Co to má společného se ságami?

Dobrá otázka! Jak jsem již zmínil, Sagas se používá k usnadnění správy asynchronních (nezávislých) úloh, zejména pokud jde o jejich vliv na stav vaší aplikace. I když používání asynchronních úloh přináší výhody (jako je odstranění nákladných volání blokujících I/O), může být notoricky obtížné je spravovat. Jsou méně předvídatelné než synchronní úlohy, takže se nemůžete spolehnout na to, že vrátí hodnotu v čase, aby mohly ostatní bloky kódu použít.

Ságy oddělují různé druhy kódu, což vám umožňuje těžit z asynchronních úloh a zároveň neblokovat spuštění zbytku vaší aplikace. Ve skutečnosti Sagas běží na svém vlastním vláknu, což zabraňuje vzájemnému ovlivňování dvou bloků kódu. Jako příklad zvažte aplikaci, která potřebuje získat data z databáze pokaždé, když je zavolána konkrétní akce Redux. Při použití pouze synchronního kódu by se aplikace zastavila při každém volání této akce. Pomocí Sagas je možné provádět tato databázová volání na pozadí, zatímco aplikace běží dál. Data se načítají a aktualizují stav, aniž by přerušil tok aplikace.

Toto je jen jeden příklad „vedlejšího účinku, se kterým může Sagas pomoci. Pamatujte, že vedlejší účinek nastane, když postup ovlivní něco mimo jeho rozsah. Jiné dlouhotrvající nebo „nečisté úlohy (jako jsou interakce s mezipamětí prohlížeče) lze zlepšit jejich přesunem do ságy.

Kdy byste měli používat ságy?

Sagas je mocný nástroj a stejně jako všechny nástroje byste měli pečlivě zvážit, zda je nebo není ten správný pro váš případ použití. Některé z těchto úvah zahrnují:

  • Zjednoduší to váš kód?
  • Zlepší to zážitek pro koncového uživatele?
  • Spoléhá vaše aplikace na asynchronní úlohy?
  • Stojí představení Sagas za další složitost?

I když v naší společnosti používáme Sagas, nedává to smysl v každé situaci. Ve skutečnosti jsme nedávno přehodnotili hodnotu, kterou jsme získali z používání této technologie. Přestože jsme usoudili, že v současné době má smysl se na něj i nadále spoléhat, nemusí tomu tak být vždy. Neměli byste používat technologii jen proto, že vám může poskytnout nějaký užitek. Měli byste zvážit klady a zápory a používat ságy, pokud přínosy převažují nad nevýhodami, odečtěte náklady příležitosti na čas, úsilí a peníze, které bude potřeba k implementaci. Zde je několik výhod a nevýhod, jak to vidím já:

Klady

  • Může výrazně urychlit aplikaci, zejména takovou, která se spoléhá na pravidelné načítání nových dat (například v jednostránkových aplikacích).
  • Odděluje komponenty uživatelského rozhraní od obchodní logiky, díky čemuž je váš kód přehlednější a srozumitelnější.
  • Ságy jsou skvělé pro provádění automatizovaného testování, protože používají funkce generátoru.

Nevýhody

  • Navzdory tomu, co jsem napsal výše, přináší Sagas spoustu složitosti, která může bránit porozumění.
  • Jen proto, že to děláte na pozadí, můžete svou aplikaci stále zpomalit příliš mnoha požadavky.

Závěr

Ságy mohou být velmi užitečným nástrojem, pokud víte, jak jej používat. Může vám a vaší organizaci pomoci využít nové technologie, aby byla vaše aplikace lépe organizovaná, snáze udržovaná a pro koncového uživatele plynulejší. Chcete-li se dozvědět více, níže uvádíme několik užitečných odkazů. Také se stále učím, takže pokud jsem udělal něco špatně nebo mi něco důležitého uniklo, dejte mi prosím vědět! Rád bych získal zpětnou vazbu.

Děkujeme za přečtení!

Další informace

Sagas Docs
Funkce generátoru