A Redux alkalmazás működésének megvitatása

Az előző leckéken megvalósítottuk a Redux alkalmazás működéséhez szükséges összes alkotóelemet. Összegezzük és röviden menjünk végig alkalmazásunk fő munkafázisain a termékekkel.

Az első indításkor alkalmazásunk kinyeri a store-ból a két termékből álló listát a useSelector segítségével és megjeleníti azokat a képernyőn. A képernyőn egy űrlap is látható, ahova bevihetjük az új termék adatait. Amikor a felhasználó megnyomja a mentés gombot, akkor a gomb kezelője elküldi a productAdded actiont, amely tartalmazza az új termék adatait, amit a felhasználó az űrlapba vitt be. A termékek slice-ához írt reducer függvény fogadja ezt az actiont és hozzáadja a termékek tömbjéhez az új termék objektumát. A store jelzi a komponenseknek, hogy a tárolt state adatok megváltoztak. A ProductsList komponensünk beolvassa a módosított tömböt, megrendeli a megjelenítést, aminek eredményeképpen az hozzáadott terméket látjuk a terméklistában.

Most nyissuk meg a Redux DevTools-ot a böngészőben és adjunk hozzá az alkalmazásban még egy terméket, majd nézzük meg a Log monitor fület, itt láthatjuk hogyan nézett ki a state az alkalmazás indításakor, és hogyan majd, a mentés gomb megnyomása után, megjelent az action. Láthatjuk a payload tulajdonságát és a globális state változásait.

A következő fejezetben alaposabban fogunk dolgozni az adatokkal a Redux alkalmazásunkban.