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

На прошлых уроках мы реализовали все составляющие, необходимые для работы Redux приложения. Давайте подведем итог и кратко пройдемся по основным этапам работы нашего приложения с продуктами.

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

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

В следующей главе мы более основательно поработаем с данными в нашем Redux приложении.

Запустите ваше приложение со студентами. Откройте Redux DevTools в браузере. Внесите в форму на странице вашего приложения данные еще для одного студента и сохраните их. Посмотрите результаты работы на вкладке Log monitor Redux DevTools.

Добавьте еще одного студента и снова обратите внимание на изменения на вкладке Log monitor

← →
↑