Diskussion om hur ett Redux-program fungerar

På tidigare lektioner har vi implementerat alla komponenter som behövs för att ett Redux-program ska fungera. Låt oss sammanfatta och kort gå igenom huvudstegen i hur vår produktapplikation fungerar.

Vid första start hämtar vår applikation en lista med två produkter från store med hjälp av useSelector och visar dem på skärmen. På skärmen visas också ett formulär där vi kan fylla i data för en ny produkt. När användaren trycker på spara-knappen skickar knappens händelsehanterare ett action productAdded, som innehåller data för den nya produkten som användaren fyllde i i formuläret. Reducer-funktionen som vi skrev för produktslicet tar emot detta action och lägger till ett objekt med den nya produkten i arrayen med produkter. Store meddelar komponenterna att de lagrade state-data har ändrats. Vår komponent ProductsList läser den ändrade arrayen, anropar rendering, vilket resulterar i att vi ser den tillagda produkten i produktlistan.

Låt oss nu öppna Redux DevTools i webbläsaren och lägga till en produkt till i applikationen, och sedan titta på fliken Log monitor. Här kan vi se hur vår state såg ut när applikationen startade, och hur sedan, efter att ha klickat på spara-knappen, actionet dök upp. Vi kan se dess egenskap payload och förändringarna i det globala state.

I nästa kapitel kommer vi att arbeta mer ingående med data i vår Redux-applikation.