Redux-sovelluksen toiminnan keskustelu

Edellisillä oppitunneilla toteutimme kaikki Redux-sovelluksen toiminnan edellyttämät osat. Tehdään yhteenveto ja käydään lyhyesti läpi sovelluksemme päävaiheet tuotteiden käsittelyssä.

Ensimmäisen käynnistyksen yhteydessä sovelluksemme hakee storesta kahden tuotteen listan käyttämällä useSelector ja näyttää ne ruudulla. Ruudulla näkyy myös lomake, johon voimme syöttää uuden tuotteen tiedot. Kun käyttäjä painaa tallenna-painiketta, painikkeen käsittelijä lähettää productAdded -actionin, joka sisältää uuden tuotteen tiedot, jotka käyttäjä on syöttänyt lomakkeeseen. Tuotteiden sliceen kirjoittamamme reducer-funktio vastaanottaa tämän actionin ja lisää tuotteiden taulukkoon uuden tuotteen objektin. Store ilmoittaa komponenteille, että tallennetut state-tiedot on muutettu. ProductsList -komponenttimme lukee muutetun taulukon, käynnistää renderöinnin, minkä seurauksena näemme lisätyn tuotteen tuotelistassa.

Avataan nyt Redux DevTools selaimessa ja lisätään sovellukseen toinen tuote, tarkastellaan sitten Log monitor -välilehteä, täältä voimme nähdä mikä state oli sovelluksen käynnistyessä, ja kuinka sitten, tallenna-painikkeen painamisen jälkeen, action ilmestyi. Voimme nähdä sen payload -ominaisuuden ja muutokset globaalissa tilassa.

Seuraavassa luvussa työskentelemme perusteellisemmin tietojen kanssa Redux-sovelluksessamme.