Retrospektiva, která konečně posune tým kupředu
Typické chyby, které vás stojí čas i výkon Největší výkonnostní pastí je zbytečné kopírování objektů při každé akci. Redux vyžaduje neměnnost, ale to neznamená, že musíte deep-clone celý stav. Pokud měníte pouze jednu vlastnost, použijte spread operátor na úrovni, kterou měníte. Vyhněte se také ukládání celých polí objektů do stavu, pokud je potřebujete jen přečíst. Místo toho si je nechte v paměti a do Reduxu ukládejte pouze identifikátory. Při mapování stavu do props vybírejte jen to, co komponenta potřebuje, a používejte selektory, které se zapojí do memoizace.
Ladění asynchronního kódu a práce s proměnnými Asynchronní JavaScript (callbacks, Promise, async/await) je častým zdrojem chyb, protože kód se nevykonává lineárně. V panelu Sources využijte tlačítko „Step into next function call" – umožní vám vstoupit i do asynchronních operací. Vždy si ověřte, zda máte v nástrojích zapnutou volbu „Pause on caught exceptions" (Pozastavit u zachycených výjimek). Tato funkce vás upozorní na chyby, které by jinak byly tiše polknuty blokem try…catch. Mnoho vývojářů tuto volbu přehlédne a poté marně hledá příčinu, proč se kód chová jinak, než očekávají.
Když se kód zastaví na breakpointu, můžete v konzoli přímo psát výrazy a zjišťovat tak aktuální hodnoty – stačí do konzole napsat název proměnné nebo zavolat funkci. Tímto způsobem můžete měnit obsah proměnných za běhu, což je užitečné pro testování okrajových případů. Například pokud funkce selhává na prázdném poli, vložte do konzole seznam = [] a pokračujte v krokování. Tento postup je rychlejší než opakované načítání stránky a zadávání nových vstupů.
Při ladění se vyvarujte časté chyby – spoléhání na console.log v produkčním kódu. Nejenže to zahlcuje konzoli, ale může to také ovlivnit výkon aplikace. Místo toho používejte breakpointy a pokud potřebujete dočasné výpisy, vždy je po opravě odstraňte. Dále si zvykněte na to, že prohlížeče často rozdělují chyby do dvou kategorií: syntaktické (např. chybějící závorka) a běhové (např. volání nedefinované funkce). Syntaktické chyby se zobrazí hned při načtení skriptu, běhové až při spuštění dané části kódu. Vždy čtěte celý text chyby – obsahuje název souboru a číslo řádku, což je první stopa k nalezení problému.
Nezapomínejte na devtools. Redux DevTools je nezbytný nástroj pro ladění. Umožňuje vám cestovat v čase a vidět, jak se stav mění s každou akcí. Ale pozor, v produkci byste měli devtools úplně vypnout, jinak přidáváte aplikaci zbytečnou režii. V produkci můžete také použít middleware pro logování, ale ujistěte se, že nezpomalují aplikaci. Místo toho je lepší mít nástroje, které se zapnou pouze v development módu.
Další častou chybou je zapomínat na limit počtu požadavků. Mnoho API má omezení, jak často je můžete volat; pokud je překročíte, dostanete dočasně zablokovaný přístup. Naučte se zpracovávat chybové stavy v kódu – měli byste vždy počítat s tím, že server nemusí odpovědět tak, jak čekáte. Napište si malý skript, který odešle jeden požadavek a vypíše stavový kód a tělo odpovědi. Tím získáte jistotu, že umíte data nejen poslat, ale i přijmout.
Prvním krokem k efektivnímu použití je správné členění store. Rozdělte si Redux store na menší slice, každý s vlastními reducery a akcemí. Například oddělte data uživatele, obsah košíku a stav notifikací. Tím zajistíte lepší čitelnost a snazší testování. Vyhněte se obřím reducertům, které řeší všechno. Místo toho použijte funkci combineReducers a každý slice nechte žít samostatně. Tím se vyhnete častému problému, kdy jedna chyba v jednom místě rozbije celou aplikaci.
Přispívání do open source projektů není jen o psaní kódu. Začít může kdokoli – s dokumentací, testováním, designem nebo i překlady. Důležité je vědět, kde a jak začít, a hlavně se vyhnout typickým chybám, které odradí nejen vás, ale i správce projektu. Následující kroky vám pomohou zapojit se bez zbytečného stresu.
Častým omylem je také synchronizace všech akcí s API. Redux není určen k tomu, aby každý požadavek na server generoval akce a reducery. Pro asynchronní logiku je vhodnější použít middleware jako thunk nebo saga. Thunk je jednodušší, saga dává více kontroly. U thunku si dejte pozor na to, aby akce neobsahovaly příliš mnoho logiky. Rozdělte je na menší kroky: začátek požadavku, úspěch, selhání. Tím získáte přehled o tom, co se děje, a můžete snadno přidat loading stavy.
Když aplikace v Reactu začne mít desítky komponent a stav se předává přes mnoho úrovní, přichází čas zvážit centrální správu stavu. Redux není jediným řešením, ale stále patří mezi nejrozšířenější nástroje. Klíčové je pochopit, že Redux není o tom, abyste do něj uložili všechno. Měl by sloužit pro data, která skutečně potřebuje více komponent nebo která mění více akcemi. Lokální stav pro formuláře nebo UI prvky si klidně nechte v useState.