Over kamilnowak17

Uitgebreide omschrijving

Jak redux react řeší globální stav bez zbytečných prop drillingů
Když v aplikaci narazíte na stav, který potřebuje mnoho komponent napříč stromem, začnete si všímat, že předávání hodnot přes props připomíná spíše překážkovou dráhu. Tento jev, známý jako prop drilling, vede k tomu, že každá mezivrstva komponent musí znát detailně, co se má předávat dál, i když to sama nevyužívá. Redux react tento problém řeší tím, že vytváří centralizovaný store, který žije mimo hierarchii komponent. Místo abyste předávali data přes pět úrovní, připojíte se přímo k store z kterékoliv komponenty pomocí selektorů a akcí. Prakticky to znamená, že si nadefinujete stav v reduktoru, zaregistrujete ho do globálního objektu a komponenta, která data potřebuje, si je jednoduše vybere pomocí hooku useSelector. Tím odpadá nutnost sledovat, kudy přesně data tečou, a vy se soustředíte pouze na to, co má která část UI skutečně zobrazit.

Druhý klíčový mechanismus, který vám ušetří prop drilling, spočívá v explicitním propojení akcí s komponentami. Místo abyste předávali callback funkce jako props z rodiče do dítěte, dispatchnete akci přímo tam, kde událost vzniká. Například tlačítko pro přidání položky do košíku volá dispatch s příslušnou akcí, a nemusí čekat, až mu rodič předá handler. Vy tak získáte čistší komponenty, které nemusí vědět, kdo jejich akce zpracuje, a stav se mění jednotně v jednom místě. Důležité je, abyste selektory drželi úzce zaměřené na konkrétní část stavu a nepřetahovali celý store do každé komponenty. To vám zajistí, že se komponenta překreslí jen tehdy, když se změní relevantní více zde , a ne pokaždé, když se cokoliv v globálním stavu pohne. Redux react tak nenutí ke kompromisům mezi čistotou kódu a výkonem, pokud dodržíte zásadu malých a přesných výběrů.


Třetí oblast, kde se vyhnete prop drillingu, je řešení sdíleného stavu mezi sourozenci nebo komponentami, které se nenacházejí ve stejném větvení stromu. Bez globálního store byste museli vynést stav do společného předka, což často vede k tomu, že rodičovská komponenta se přeplní logikou, která ji vůbec nezajímá. S redux react můžete nechat každou komponentu, aby si spravovala lokální UI stav pomocí useState, a globální stav rezervovat pouze pro data, která skutečně sdílí více nesouvisejících částí aplikace. Klíčovou radou je nezaplnit store vším, ale pečlivě zvážit, co do něj patří. Pokud data používá jen jedna větev, nechte si je v lokálním stavu a redux react použijte až ve chvíli, kdy cítíte, že se komunikace mezi komponentami komplikuje. Tím zůstane kód přehledný, vy se vyhnete zbytečnému předávání a vaše komponenty zůstanou nezávislé a snadno testovatelné.