Redux programos veikimo aptarimas

Ankstesnėse pamokose mes įgyvendinome visus komponentus, reikalingus Redux programai veikti. Apibendrinkime ir trumpai pereikime pagrindinius mūsų produkto programos veikimo etapus.

Pirmą kartą paleidus, mūsų programa išsaugojimo vietos (store) ištraukia dviejų produktų sąrašą naudodama useSelector ir atvaizduoja juos ekrane. Ekrane taip pat rodoma forma, kurioje galime pateikti naujo produkto duomenis. Kai vartotojas paspaudžia išsaugojimo mygtuką, mygtuko apdorotojas išsiunčia veiksmą (action) productAdded, kuriame yra naujo produkto duomenys, kuriuos vartotojas įvedė į formą. Funkcija-reduktorius, kurią mes parašėme produktų daliai (slice), gauna šį veiksmą ir prideda prie produktų masyvo objektą su nauju produktu. Saugojimo vieta (store) praneša komponentams, kad saugomi state duomenys buvo pakeisti. Mūsų komponentas ProductsList nuskaito pakeistą masyvą, inicijuoja pervaizdavimą, dėl to mes matome pridėtą produktą produktų sąraše.

Dabar atidarykime Redux DevTools naršyklėje ir pridėkime į programą dar vieną produktą, tada pažiūrėkime į skirtuką Log monitor, čia mes galime pamatyti koks buvo mūsų state paleidus programą, ir kaip tada, paspaudus išsaugojimo mygtuką, atsirado veiksmas (action). Mes galime matyti jo savybę payload ir pakitimus globalioje būsenoje (state).

Kitame skyriuje mes nuodugniau dirbsime su duomenimis mūsų Redux programoje.