Redux rakenduse töö arutelu

Eelmistel tundidel rakendasime kõik Reduxi rakenduse tööks vajalikud komponendid. Võtame kokku ja vaatame lühidalt oma rakenduse peamisi tööetappe toodetega.

Käivitamisel toob meie rakendus poest (store) kahest tootest koosneva nimekirja välja, kasutades useSelector, ja kuvab need ekraanil. Ekraanil kuvatakse ka vorm, kuhu saame sisestada uue toote andmed. Kui kasutaja vajutab salvestusnuppu, saadab nupu käitleja (handler) aktsiooni productAdded, mis sisaldab uue toote andmeid, mille kasutaja vormi sisestas. Meie tooteslaidile (slice) kirjutatud redutserfunktsioon saab selle tegevuse (action) ja lisab toodete massiivi uue toote objekti. Store teatab komponentidele, et salvestatud oleku (state) andmeid on muudetud. Meie komponent ProductsList loeb muudetud massiivi, kutsub esile renderduse, mille tulemusena näeme toodete nimekirjas lisatud toodet.

Nüüd avame brauseris Redux DevTools ja lisame rakendusse veel ühe toote, seejärel vaatame vahelehte Log monitor. Siin näeme, milline meie olek (state) oli rakenduse käivitamisel ja kuidas see siis, pärast salvestusnupu vajutamist, aktsioon ilmus. Näeme selle omadust payload ja muutusi globaalses olekus (state).

Järgmises peatükis töötame põhjalikumalt andmetega meie Reduxi rakenduses.