Testování reducerů a async akcí v Reduxu bez integračního prostředí

Při testování async akcí se vyhněte skutečným HTTP voláním. Místo toho použijte mock funkce, které vrací předem definovaná data. Tím zajistíte, že testy nejsou závislé na síti nebo stavu serveru. Dbejte na to, aby mocknuté odpovědi měly stejný tvar jako reálná data, jinak testy projdou, ale v produkci selžou při mapování odpovědi. Také testujte chybové stavy: jak se reducer chová, když API vrátí chybu, a zda async akce dispatchuje správnou akci pro chybu (např. fetchFailure).

Template literály a destrukce: praktické použití Template literály (zpětné uvozovky) vám umožní vkládat proměnné do řetězců pomocí ${}. Už žádné spojování plusy nebo používání escape sekvencí pro nové řádky. Například: `Uživatel $jmeno je starý $vek let.` Toto funguje i pro vícenásobné řádky, což oceníte při generování HTML nebo textů. Pozor ale na vnořené template literály – pokud máte více úrovní, může se kód stát nepřehledným. V takovém případě zvažte rozdělení do menších funkcí.

Když jako vývojář dostanete návrh od designéra, často řešíte, jak ho co nejvěrněji převést do kódu. Málokdy ale přemýšlíte o tom, proč je rozložení takové, jaké je, a jaké principy za ním stojí. Přitom stačí pochopit pár základních pravidel UI a UX, abyste mohli designerům klást chytřejší otázky, rychleji odhalit chyby v návrhu a výsledný produkt posunout o úroveň výš. Tento článek vám ukáže, na co se zaměřit, když přebíráte design do vývoje, a jak se vyhnout nejčastějším nástrahám.

Dalším častým problémem je ignorování mezer a odstupů. Návrháři používají systém mezer (často v násobcích základní jednotky, třeba 4px), aby vytvořili rytmus a oddělili logické celky. Když mezery nahradíte univerzálním paddingem nebo marginem podle toho, co zrovna vypadá dobře, rozbijete celou vizuální rovnováhu. Naučte se číst designové specifikace – v nich najdete přesné hodnoty odsazení, velikostí a barev. Pokud taková specifikace chybí, zeptejte se designéra, jaký systém používá. Je to rychlejší, než hádat a poté předělávat polovinu komponent.

Začněte s Gridem pro hlavní layout. Definujte si mřížku pomocí grid-template-columns a grid-template-areas. Například pro klasickou stránku s hlavičkou, obsahem, sidebar a patičkou nastavíte tři sloupce – 1fr 2fr 1fr – a na mobilu je pomocí media query přepnete na jeden sloupec. Nezapomeňte, že Grid umí i implicitní řádky, takže nemusíte psát grid-template-rows, pokud nepotřebujete přesně řídit výšky. Tím ušetříte spoustu řádků CSS.

Dalším praktickým krokem je zapojit do odhadu analytika i vývojáře zároveň. Analytik by měl prezentovat, co už ví, a vývojář by měl upozornit na technické nejasnosti, které je třeba vyřešit před začátkem kódování. Pokud takové nejasnosti existují, přidejte si k analytické části čas na technický prototyp nebo krátký výzkum. Tento čas je investicí, která se vrátí tím, že se předejde přepisování kódu.

Pozor také na ignorování konvence týmu. Pokud máte nastavený formát pro commit zprávy (např. prefixy jako feat, fix, refactor), dodržujte ho. Konvence nejsou byrokracie, ale nástroj pro rychlé filtrování v logu. A pokud začínáte nový projekt, nastavte si jednoduché pravidlo hned na začátku – snáz se to udržuje než později.

Nakonec si osvojte asynchronní funkce async/await. Tento zápis dělá práci s promisemi mnohem čitelnější – místo řetězení .then() píšete kód synchronně. Důležité je ale vždy obalit volání do try/catch, protože chyby se jinak tiše „spolknou". A pamatujte: async funkce vždy vrací Promise, takže pokud chcete počkat na výsledek, musíte použít await i při volání takové funkce. Tyto nástroje z ES6+ nejsou jen moderní – jsou praktické a zásadně zlepšují kvalitu vašeho kódu, pokud je používáte správně.

Co se týče chyb: lidé často zapomínají na min-width: 0 u flex dětí. Bez něj se obsah může přetékat, obzvlášť když máte dlouhé texty nebo obrázky. Stejně tak u Gridu může překvapit, že 1fr neznamená minimální šířku. Chcete-li, aby se sloupec zmenšil, použijte minmax(0, 1fr). Další pastí je grid-auto-flow – pokud necháte výchozí hodnotu row, prvky se řadí do řádků. Pro dynamické přidávání položek (např. galerie) zvažte grid-auto-flow: dense, které zaplní mezery.

Závěrem: psaní commit zpráv berte jako součást práce, ne nutné zlo. Když si na to zvyknete, zabere vám to pár sekund navíc, ale ušetří to hodiny při hledání příčiny problému nebo při code review. Až budete příště psát „oprava", zastavte se a zeptejte se, co přesně a proč – a napište to.

Základem je popsat, co a proč jste změnili, ne jak. Místo „oprava bugu" napište „oprava pádu při načítání prázdného seznamu". Místo „úprava stylů" zkuste „sjednocení rozestupů v hlavičce pro mobilní zobrazení". Důležité je, aby příjemce zprávy pochopil kontext, aniž by musel otevírat samotný diff. K tomu pomáhá i uvedení čísla ticketu nebo úkolu, pokud jej používáte – ale vždy doplňte i slovní popis, ne jen číslo.