Než začneme, navštivte tuto ukázkovou aplikaci. To vám dá přibližnou představu o tom, o čem budeme v tomto článku diskutovat.
Reagovat App
Pokud jste jedním z vývojářů, kteří používají redux ke správě stavu vaší aplikace, musíte být velmi zvědaví, abyste se dozvěděli více o tom, jak mohu použít nové kontextové API aplikace Reag ke správě stavu mé aplikace.
Možná máte stejnou sadu otázek jako já,
- Co je React Context API?
- Slouží ke stejnému účelu jako redux?
- Nahradí redux? a znamená to, že se mohu zbavit složitosti reduxu? 😜
- Je to budoucnost řízení státu?
No... mohl bych vám pomoci najít odpovědi na tyto otázky. Napsal jsem jednoduchou aplikaci, která demonstruje, jak můžeme použít kontextové API React pro správu stavu. Níže je odkaz na repo,
RishikeshVedpathak/react-context-example
Co je React Context API? A kdy ji použít?
Když začneme psát aplikaci pro reakci, musíme mezi komponentami předávat nějaká data. Obvykle ještě před použitím redux předáváme data shora dolů (rodič dítěti) prostřednictvím rekvizit. Což v počátečních fázích funguje dobře, ale jak se vaše aplikace zvětšuje, stává se pro nás těžkopádné předávat data tímto způsobem. Kontextové API poskytuje alternativní způsob, jak sdílet hodnoty, jako jsou tyto, mezi komponenty, aniž byste museli explicitně procházet každou úrovní stromu.
V React v16.3.0 kontextové api bylo představeno. Předtím jsme k řešení této situace používali redux.
Proč kontextové API a ne rekvizity?
Je pravda, že vše zvládnete s rekvizitami, které můžete s Context API, ale proč tedy používat Context API?
Zvažte strukturu vaší aplikace, kde máte definováno více komponent. A tyto složky mohou mít vztah rodič-dítě nebo to mohou být sourozenci. V obou případech by pro vás nebylo těžkopádné předávat data do stromu. Co když existuje způsob, jak můžete spravovat data na jediném místě (úložišti) a tato data pak používají všechny komponenty. To zní hezky, že jo!!
Toho můžeme dosáhnout pomocí kontextového API. Pro lepší pochopení se podívejte na níže uvedený obrázek.
Pojďme to vidět v akci
Podívejte se na příklad zde
Reagovat App
Tato aplikace se skládá z komponent
- Záhlaví
- Domů
- Košík
Tyto tři složky sdílejí stejná data. Jakákoli událost převzatá z těchto komponent aktualizuje stejná data.
-
Vytvořte kontext (úložiště) pro vaši aplikaci.
https://medium.com/media/85688c7960d37d35afe87117a5abad4e/href -
Řekněte své aplikaci, aby používala tento kontext.
https://medium.com/media/2fcb454dc036bb26e56eed9906f9a4d7/href
- Čtení dat z kontextu
To je velmi jednoduché. Použijte jen potřeba použít nový háček reakce nazvaný useContext
const cartContext =useContext(AppContext)
CartContext nyní bude obsahovat data pro vaši komponentu.
- Aktualizujte data v kontextu
https://medium.com/media/cfd768cddf71173d52aee2ef1fc52660/href
Funkce handleCartUpdate aktualizuje data v kontextu. To se projeví v záhlaví i v komponentě košíku.
Závěr
Úspěšně jsme vytvořili jednoduchou aplikaci pro reakce, která demonstruje případ použití kontextového API. Konečný kód najdete v repozitáři GitHubu
RishikeshVedpathak/react-context-example
Doufám, že vám to pomůže porozumět a povzbudit vás k volnému používání React Context API ve vaší aplikaci. Neváhejte a poskytněte zpětnou vazbu a návrhy!