Výměna dat mezi Redux aplikací a serverem

Tato sekce bude pro zkušené studenty, kteří se nezastavili na dosaženém v Reduxu a rozhodli se dojít až na konec tohoto tutoriálu. V následujících dvou sekcích se dotkneme práce Redux aplikace s asynchronní logikou, propojíme naši aplikaci se serverovou částí a naučíme ji vyměňovat si s ní data.

Z předchozích sekcí víme, že základem práce Redux aplikace je synchronní mechanismus. Hlavní fáze práce spočívají v odesílání akcí při výskytu nějaké události v aplikaci, následné aktualizaci stavu v store funkcí-reducerem, upozornění komponent aplikace na změnu stavu a odpovídajícím zobrazení nové hodnoty stavu v komponentách.

V reálném životě často nastává situace, že aplikace potřebuje i asynchronní logiku, například při práci s HTTP API požadavky a získáváním dat z nějakého externího serveru. Proto aby náš 'synchronní' Redux store mohl pracovat s takovou asynchronní logikou, používá se tak zvané middlware - software, který je zprostředkovatelem nebo spojkou mezi store naší aplikace a, například, serverem, se kterým začneme pracovat v této kapitole tutoriálu.

Pro Redux bylo vytvořeno mnoho takových middleware, avšak nejrozšířenějším mezi nimi a oficiálně doporučovaným při práci Redux aplikací s asynchronní logikou zatím stále zůstává Redux Thunk. Tento software nám pomáhá používat obyčejné funkce (neboli thunky), které mohou obsahovat v sobě asynchronní logiku, jako je setTimeout, Promises, async/await, pro interakci s naším store. Co se týká samotného termínu, thunk - je to kód, který dělá nějakou odloženou práci.

Nyní, když jsme se trochu seznámili s tím, jak pracovat v Reduxu s asynchronní logikou, můžeme přistoupit k implementaci této fáze v naší aplikaci. Potřebujeme zařídit, aby naše aplikace mohla interagovat s nějakým externím serverem, přijímat od něj a předávat mu data. Jinými slovy, před námi čeká dobrodružné a velmi důležité téma. Začneme.