Wymiana danych między aplikacją Redux a serwerem

Ten rozdział będzie dla wymagających uczniów, którzy nie zatrzymali się na osiągniętym w Redux i postanowili dojść do końca tego tutoriala. W kolejnych dwóch rozdziałach poruszymy pracę aplikacji Redux z logiką asynchroniczną, połączymy naszą aplikację z backendem i nauczymy ją wymieniać z nim dane.

Z poprzednich rozdziałów wiemy, że u podstaw działania aplikacji Redux leży mechanizm synchroniczny. Główne etapy pracy polegają na wysyłaniu akcji przy wystąpieniu jakiegoś zdarzenia w aplikacji, następnie aktualizacji stanu w store przez funkcję-reduktor, powiadomieniu komponentów aplikacji o zmianie stanu i odpowiednio wyświetleniu nowej wartości stanu w komponentach.

W prawdziwym życiu często zdarza się, że aplikacji potrzebna jest również logika asynchroniczna, na przykład przy pracy z żądaniami HTTP API i pobieraniu danych z jakiegoś zewnętrznego serwera. Dlatego aby nasz 'synchroniczny' Redux store mógł pracować z taką logiką asynchroniczną, używa się tak zwanych middlware - oprogramowania, które jest pośrednikiem lub łącznikiem między store naszej aplikacji a, na przykład, serwerem, z którym zaczniemy pracę w tym rozdziale tutoriala.

Dla Redux stworzono wiele takich middleware, jednak najbardziej rozpowszechnionym spośród nich i oficjalnie rekomendowanym przy pracy aplikacji Redux z logiką asynchroniczną wciąż pozostaje Redux Thunk. To oprogramowanie pomaga nam używać zwykłych funkcji (lub thunków), które mogą zawierać w sobie logikę asynchroniczną, taką jak setTimeout, Promises, async/await, do interakcji z naszym store. Jeśli chodzi o sam termin, thunk - to kod, który wykonuje jakąś odroczoną pracę.

Teraz, gdy nieco zapoznaliśmy się z tym, jak pracować w Redux z logiką asynchroniczną, możemy przystąpić do implementacji tego etapu w naszej aplikacji. Musimy sprawić, aby nasza aplikacja mogła współdziałać z jakimś zewnętrznym serwerem, przyjmując od niego i przekazując mu dane. Innymi słowy, przed nami czeka ekscytujący i bardzo ważny temat. Zaczynamy.