Výmena dát medzi Redux aplikáciou a serverom

Táto časť bude pre skúsených študentov, ktorí sa nezastavili na dosiahnutom v Reduxe a rozhodli sa dôjsť až na koniec tohto tutoriálu. V nasledujúcich dvoch častiach sa dotkneme práce aplikácie Redux s asynchrónnou logikou, prepojíme našu aplikáciu so serverovou časťou a naučíme ju vymieňať si s ňou dáta.

Z predchádzajúcich častí vieme, že základy práce Redux aplikácie je synchrónny mechanizmus. Hlavné etapy práce spočívajú v odosielaní akcií pri vzniku nejakej udalosti v aplikácii, následnej aktualizácii stavu v store funkciou-reduktorom, upozornení komponentov aplikácie na zmenu stavu a zodpovedajúcom zobrazení novej hodnoty stavu v komponentoch.

V reálnom živote sa často stáva, že aplikácia potrebuje aj asynchrónnu logiku, napríklad pri práci s HTTP API požiadavkami a získavaní dát z nejakého externého servera. Preto aby mohol náš 'synchrónny' Redux store pracovať s takouto asynchrónnou logikou, používa sa tak zvané middlware - softvér, ktorý je prostredníkom alebo spojkou medzi store našej aplikácie a, napríklad, serverom, s ktorým začneme pracovať v tejto kapitole tutoriálu.

Pre Redux bolo vytvorených množstvo takýchto middleware, avšak najrozšírenejším medzi nimi a oficiálne odporúčaným pri práci Redux aplikácií s asynchrónnou logikou zatiaľ ešte zostáva Redux Thunk. Tento softvér nám pomáha používať obyčajné funkcie (alebo thunks), ktoré môžu obsahovať v sebe asynchrónnu logiku, ako sú setTimeout, Promises, async/await, pre interakciu s našim store. Čo sa týka samotného termínu, thunk - je to kód, ktorý vykonáva nejakú odloženú prácu.

Teraz, keď sme sa trochu zoznámili s tým, ako pracovať v Reduxe s asynchrónnou logikou, môžeme pristúpiť k implementácii tejto etapy v našej aplikácii. Potrebujeme spraviť to, aby naša aplikácia mohla interagovať s nejakým externým serverom, prijímať od neho a odovzdávať mu dáta. Inými slovami, pred nami čaká vzrušujúca a veľmi dôležitá téma. Poďme na to.