Redux-sovelluksen toiminta

Nyt, kun olemme aseistetut termeillä, voimme lyhyesti tarkastella Redux-pohjaisen sovelluksen toiminnan perusvaiheita, jota aiotte luoda tulevaisuudessa.

Sovelluksen toiminta perustuu datan yksisuuntaisuuden ideaan, kuten aiemmin mainitsimme.

Alustusvaiheessa (sovelluksen ensimmäisellä käyttökerralla) juurireducerin avulla luodaan store-säilö. Säilö kutsuu tätä reduceria vain kerran ja tallentaa sen palauttaman arvon alkutilana. Ensirenderöinnissä sovelluksen komponentit käyttävät säilöön tallennettua nykyistä tilaa. Ne myös tilaavat säilön päivitykset, jotta saavat heti tietää tilan muutoksesta.

Sovelluksen jatkotöissä tapahtuu seuraavaa. Oletetaan, että käyttäjä klikkaa hiiren painiketta. Tässä tapauksessa koodin avulla muodostetaan action, joka lähetetään säilöön. Säilö käynnistää taas reducerin siinä olevan tilan ja saadun actionin kanssa. Tuloksena muutettu tila-arvo tallennetaan uutena. Myös säilö ilmoittaa muutostilauksiin komponenteille, että muutoksia on tapahtunut. Komponentit puolestaan tarkistavat, ovatko heille tärkeät osat tilasta muuttuneet. Lopuksi, jos muutoksia on tapahtunut, komponentti käynnistää renderöinnin uusien tietojen näyttämiseksi.