Tiedonvaihto Redux-sovelluksen ja palvelimen välillä

Tämä osio on kokeneille oppilaille, joille Reduxin oppiminen ei riittänyt ja jotka päättivät jatkaa tämän oppaan loppuun. Seuraavissa kahdessa osiossa käsittelemme Redux-sovelluksen toimintaa asynkronisen logiikan kanssa, yhdistämme sovelluksemme palvelimeen ja opimme vaihtamaan tietoja sen kanssa.

Edellisistä osioista tiedämme, että Redux-sovelluksen toiminta perustuu synkroniseen mekanismiin. Päävaiheet koostuvat toimintojen (action) lähettämisestä jonkin tapahtuman sattuessa sovelluksessa, sitten tilan (state) päivittämisestä storeen reducer-funktiolla, sovelluksen komponenttien ilmoittamisesta tilan muutoksesta ja vastaavasti uuden tilan arvon näyttämisestä komponenteissa.

Todellisessa elämässä on usein niin, että sovellus tarvitsee myös asynkronista logiikkaa, esimerkiksi HTTP-API -pyyntöjen käsittelyssä ja datan saamisessa joltakin ulkoiselta palvelimelta. Jotta meidän 'synkroninen' Redux store pystyisi toimimaan tällaisen asynkronisen logiikan kanssa, käytetään niin kutsuttua middlewarea - ohjelmistoa, joka on välikappaleena tai linkkinä sovelluksemme storen ja esimerkiksi palvelimen välillä, jonka kanssa aloitamme työskentelyn tässä oppaan luvussa.

Reduxille on luotu monia tällaisia middlewareja, mutta laajimmin levinnyt niistä ja edelleen virallisesti suositeltu, kun Redux- sovellukset työskentelevät asynkronisen logiikan kanssa, on Redux Thunk. Tämä ohjelmisto auttaa meitä käyttämään tavallisia funktioita (tai thunkeja), jotka voivat sisältää asynkronista logiikkaa, kuten setTimeout, Promises, async/await, vuorovaikutukseen storemme kanssa. Mitä tulee itse termiin, thunk on koodia, joka tekee jotain viivästettyä työtä.

Nyt kun olemme hieman tutustuneet siihen, kuinka työskennellä Reduxissa asynkronisen logiikan kanssa, voimme aloittaa tämän vaiheen toteuttamisen sovelluksessamme. Meidän on tehtävä niin, että sovelluksemme pystyy vuorovaikuttamaan jonkin ulkoisen palvelimen kanssa, vastaanottaen siltä ja lähettäen sille dataa. Toisin sanoen, edessämme odottaa jännittävä ja erittäin tärkeä aihe. Aloitetaan.