Discuția despre funcționarea aplicației Redux

În lecțiile anterioare am implementat toate componentele necesare pentru funcționarea unei aplicații Redux. Să rezumăm și să trecem în revistă pe scurt etapele principale de funcționare a aplicației noastre cu produse.

La primul lanșare, aplicația noastră extrage din store lista cu două produse folosind useSelector și le afișează pe ecran. Pe ecran de asemenea este afișat un formular unde putem introduce datele unui produs nou. Când utilizatorul apasă butonul de salvare, handler-ul butonului trimite acțiunea productAdded, conținând datele noului produs, pe care utilizatorul le-a introdus în formular. Funcția-reducer, pe care am scris-o pentru slice-ul cu produse, primește această acțiune și adaugă în array-ul cu produse obiectul cu noul produs. Store-ul anunță componentele că datele de state stocate au fost modificate. Componenta noastră ProductsList citește array-ul modificat, apelează redarea, în urma căreia vedem în lista de produse produsul adăugat.

Acum să deschidem Redux DevTools în browser și să adăugăm în aplicație încă un produs, apoi să ne uităm la fila Log monitor, aici putem vedea care era state-ul nostru la lansarea aplicației și cum apoi, după apăsarea butonului de salvare, a apărut acțiunea. Putem vedea proprietatea sa payload și modificările în state-ul global.

În capitolul următor vom lucra mai temeinic cu datele din aplicația noastră Redux.