Duomenų apsikeitimas tarp Redux programėlės ir serverio

Ši skiltis bus patyrusiems mokiniams, kurie nesustojo ties pasiektu Redux ir nusprendė nueiti iki šios mokymo programos pabaigos. Kituose dviejuose skyriuose paliesime Redux programėlės darbą su asinchronine logika, sujungsime mūsų programėlę su serverine puse ir išmoksime ją apsikeisti duomenimis.

Iš ankstesnių skyrių žinome, kad Redux programėlės darbo pagrindas yra sinchroninis mechanizmas. Pagrindiniai darbo etapai yra veiksmų (action) siuntimas kai programėlėje iškyla koks nors įvykis, tada būsenos (store) atnaujinimas store reducer funkcija, programėlės komponentų pranešimas apie būsenos pakeitimą ir atitinkamai naujos būsenos vertės atvaizdavimas komponentuose.

Realiame gyvenime dažnai būna taip, kad programėlei reikia ir asinchroninės logikos, pavyzdžiui, kai dirbama su HTTP API užklausomis ir gaunami duomenys iš kažkokio išorinio serverio. Todėl tam, kad mūsų 'sinchroninis' Redux store galėtų dirbti su tokia asinchronine logika, naudojama taip vadinama middlware - programinė įranga, kuri yra tarpininkas arba jungtis tarp mūsų programėlės store ir, pavyzdžiui, serverio, su kuriuo mes pradėsime darbą šiame mokymo programos skyriuje.

Redux sukurta daug tokių middleware, tačiau plačiausiai paplitęs tarp jų ir oficialiai rekomenduojamas dirbant Redux programėlėms su asinchronine logika kol kas dar lieka Redux Thunk. Ši programinė įranga padeda mums naudoti įprastas funkcijas (arba thunks), kurios gali turėti joje asinchroninę logiką, tokią kaip setTimeout, Promises, async/await, sąveikai su mūsų store. Kalbant apie patį terminą, thunk - tai kodas, kuris atlieka kažkokį atidėtą darbą.

Dabar, kai mes šiek tiek susipažinome su tuo, kaip mums dirbti Redux su asinchronine logika, galime pradėti įgyvendinti šį etapą mūsų programėlėje. Mums reikia padaryti taip, kad mūsų programėlė galėtų sąveikauti su kokiu nors išoriniu serveriu, priimdama iš jo ir perduodama jam duomenis. Kitaip tariant, prieš mus laukia įtraukianti ir labai svarbi tema. Pradėkime.