Обсуждение на работата на Redux приложение

На предишните уроци ние реализирахме всички компоненти, необходими за работата на Redux приложение. Нека да направим обобщение и накратко да преминем през основните етапи на работа на нашето приложение с продукти.

При първото стартиране нашето приложение извлича от store списък с два продукта с помощта на useSelector и ги показва на екрана. На екрана също се показва формуляр, в който можем да въведем данните за нов продукт. Когато потребителят натисне бутона за запазване, обработвачът на бутона изпраща екшън productAdded, съдържащ данните за новия продукт, които потребителят е въвел във формуляра. Функцията-редюсер, която написахме за слайса с продукти, получава този action и добавя в масива с продукти обект с новия продукт. Store казва на компонентите, че съхраняваните state данни са били променени. Нашият компонент ProductsList чете променения масив, извиква рендериране, в резултат на което виждаме в списъка с продукти добавения продукт.

Сега нека отворим Redux DevTools в браузъра и да добавим в приложението още един продукт, след което да погледнем раздела Log monitor, тук можем да видим какъв е бил нашият state при стартиране на приложението, и как след това, след натискане на бутона за запазване, се е появил action. Можем да видим неговото свойство payload и промените в глобалния state.

В следващата глава ще работим по-основателно с данните в нашето Redux приложение.