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

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

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

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

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