Jak zkrotit responzivní layout: Grid a Flexbox v praxi > 자유게시판

• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

Async operace řešte přes createAsyncThunk, ne přes ručně psané thunky. Tento nástroj automaticky generuje akce pro pending, fulfilled a rejected stavy, což eliminuje duplicitní kód a zjednodušuje handling chyb. Nezapomeňte na to, že akce by měly být serializovatelné – do stavu neukládejte Promise, funkce ani instance tříd. To je častý zdroj chyb při kombinaci Reduxu s TypeScriptem.

Dobrá zpráva: obě technologie mají vynikající podporu, takže se nemusíte bát je použít. Ale nepropadejte ani opačnému extrému – neznačkujte vše jen přes Grid, když to jde jednodušeji s Flexboxem. Pravidlo je jednoduché: struktura stránky patří Gridu, drobné komponenty Flexboxu. Pokud si osvojíte toto dělení, váš responzivní design bude čistý, rychlý a bez zbytečných media queries.

Dalším krokem je volba vizuální hierarchie. Uživatel by měl na první pohled vědět, co je nejdůležitější. Použijte velikost písma, kontrast a barvy tak, aby primární akce (např. „Uložit") byla jasně odlišena od sekundárních (např. „Zrušit"). Vyhněte se příliš mnoha zvýrazněným prvkům – když zvýrazníte všechno, nezvýrazníte nic. Praktická rada: omezte paletu na tři až čtyři barvy a hlavní akci vždy dělejte výraznou, ideálně s dostatečným kontrastem vůči pozadí. Testujte to i v šedé škále – pokud rozhraní funguje bez barev, bude fungovat i s nimi.

Začněte tím, že si připravíte testovací soubor ve stejném adresáři jako produkční kód, případně v oddělené složce podle konvence vašeho projektu. Jako první napište test pro nejjednodušší případ: funkci, která sčítá dvě čísla nebo vrací délku řetězce. Použijte standardní testovací framework vašeho jazyka – nemusíte si vymýšlet vlastní infrastrukturu. Většina jazyků má vestavěné nástroje, které stačí importovat.

Základním pravidlem je oddělit popis „co" od „proč". Co jste změnili, poznáte i z diffu, ale důvod změny v něm nikde nenajdete. Proto v prvním řádku shrňte akci (např. „Oprava výpočtu DPH") a do dalších řádků napište, proč jste to udělali. Můžete zmínit souvislost s požadavkem, chybou nebo rozhodnutím, které padlo na poradě. Vyhnete se tak situaci, kdy kolega musí hádat, jestli jste něco odstranili omylem nebo záměrně.

Jak pojmenovat testy a co ověřovat Název testu by měl popisovat chování, ne implementaci. Například místo „test_funkce1" použijte „test_scitani_kladnych_cisel". Uvnitř testu nejprve připravte data, pak zavolejte testovanou funkci a nakonec porovnejte výsledek s očekávanou hodnotou. Nikdy netestujte více než jednu věc v jednom testu. Pokud potřebujete ověřit víc aspektů, rozdělte je do samostatných testů – usnadní to hledání chyby, když test selže.

Při psaní testů se nevyhnete situaci, kdy potřebujete otestovat chyby – tedy že funkce vyhodí výjimku. K tomu slouží pytest.raises. Například with pytest.raises(ValueError): deleni(1, 0). Důležité je, aby test byl úzce zaměřený – netestujte více věcí najednou, ale jeden aspekt. Pokud máte funkci, která vrací více hodnot, rozdělte test na více menších, abyste rychle zjistili, co se pokazilo. Když test selže, pytest ukáže přesný řádek s assertem, takže snadno najdete příčinu.

Když aplikace v Reactu roste, předávání stavu přes props přestává stačit. Redux nabízí centralizované úložiště, ale jeho špatné použití vede k opačnému problému – zbytečné komplexitě a nepřehlednému kódu. Základem je pochopit, že Redux není na každou akci. Pro lokální stav formuláře nebo UI prvku použijte useState nebo useReducer. Redux nasazujte tam, kde data potřebuje více nesouvisejících komponent, nebo kde chcete mít audit změn stavu.

Pozor na typické chyby: zapomínání na min-width: 0 u Grid položek, které obsahují text – bez něj může obsah přetékat. U Flexboxu zase snadno vytvoříte „nekonečný řádek", když zapomenete flex-wrap. Vždy také testujte na skutečných zařízeních, nejen v devtools. Prohlížeče mají drobné odlišnosti v implementaci, zejména u starších verzí, a to se projeví až při reálném použití.

Dalším úskalím je používání print pro ladění uvnitř testů – pytest to sice zobrazí, ale pokud test selže, může to zahlcovat výstup. Místo toho se vyplatí používat přímo assert s popisem chyby, třeba assert vystup == ocekavano, "Výstup nesouhlasí". Také se vyhněte testování vnitřních implementací – testujte veřejné chování. Pokud testujete třídu, nezkoumejte její privátní atributy, ale spíše výsledky jejích metod. Tím zajistíte, že testy nebudou křehké při změnách vnitřní struktury.

Poslední rada: testujte reducery a selectory odděleně od komponent. Redux je čistá funkce, takže testy jsou jednoduché a rychlé. Pokud narazíte na situaci, kdy musíte ve více komponentách opakovaně psát stejný useEffect s dispatch, zvažte vytvoření vlastního hooku, který zapouzdří logiku. Tím se vyhnete opakování a usnadníte údržbu. Pamatujte, že Redux je nástroj, ne dogma – pokud úložné prostory v malém bytěám způsobuje víc práce než užitku, není pro daný případ vhodný.

If you enjoyed this information and you would such as to get additional info relating to stránka kindly browse through our web site.