7. diel - Hooky v React - useContext() a useReducer()

V predchádzajúcej lekcii, Hooky v React - useCallback() a useMemo() , sme si predstavili hooky useCallback() a useMemo() a ukázali sme si ich využitie v praxi spoločne s funkciou memo().

V nasledujúcom tutoriále pokročilého Reactu si predstavíme hooky useContext() a useReducer(). Zameriame sa na ich spoločné použitie. Toto spojenie je výhodné, pretože poskytuje efektívny a udržateľný spôsob správy globálneho stavu a logiky aplikácie bez nutnosti prop drillingu alebo zložitého stavového manažmentu.

Prop drilling je termín používaný na opis procesu, kedy sa dáta odovzdávajú ako props cez niekoľko úrovní vnorených komponentov, aby dosiahli tie, ktoré ich skutočne potrebujú. Tento proces je často neefektívny a spôsobuje zbytočnú zložitosť aplikácie, najmä keď sa dáta musia odovzdať cez mnoho úrovní komponentov.

Hook useContext()

Hook useContext() umožňuje komponentu pristupovať k hodnotám kontextu, ktoré sú poskytnuté vyššie v komponentovom strome. V praxi to znamená, že nemusíme hodnoty alebo funkcie používané na mnohých miestach aplikácie posúvať cez niekoľko komponentov pomocou props, aby nedošlo k prop drillingu. Namiesto toho ich zdieľame cez kontext.

Najskôr musíme kontext vytvoriť a uložiť do premennej:

Keby sme do zátvorky funkcie createContext() uviedli nejakú hodnotu, bude braná za východiskovú iba v prípade, že v kontexte vyššie v strome komponentov nie je zodpovedajúca hodnota poskytnutá.

Potom obalíme komponent, v ktorom chceme kontext využiť, takzvaným providerom:

...koniec náhľadu článku...
Pokračuj ďalej