Учимся работать с Redux Toolkit (RTK) на примере управления

https://youtu.be/R53-n499cGU

В этом обучающем видео мы шаг за шагом создадим страницу интернет-магазина на React с использованием Redux Toolkit (RTK)! Вы узнаете, как настроить управление состоянием для списка продуктов и корзины, реализовать загрузку данных с API, добавление товаров в корзину и их удаление. Всё это на основе реального проекта с чистым и современным кодом.

Что вы узнаете: - Как настроить Redux Toolkit в проекте React для управления состоянием. - Создание slice для продуктов и корзины с использованием createSlice. - Асинхронная загрузка данных с API (https://dummyjson.com) с помощью createAsyncThunk. - Реализация функционала добавления, удаления и очистки корзины. - Интеграция с Ant Design для создания красивого UI. - Лучшие практики типизации с TypeScript и работы с Redux.

Репа готового проекта из видео: https://github.com/Salimov-dev/redux-toolkit

Мой ТГ: https://t.me/Rogooo Мой канал на rutube: https://rutube.ru/channel/28468267/ Мой канал на youtube: https://www.youtube.com/@salimov-dev

00:00 Вступление 01:20 Инициализация проекта "Счетчик" 03:12 Знакомимся с RTK 11:15 Установка и настройка первого store 16:56 Применяем CounterStore 23:41 Создание отдельных селекторов в store 28:54 Рефакторинг перед вторым проектом 30:20 Создание ProductsPage 31:20 Устанавливем Redux devtools 32:56 Инициализация проекта "Продукты с корзиной" 50:01 Создание ProductsStore 58:10 Создание createAsyncThunk 01:02:50 Применяем ProductsStore в ProductsPage 01:02:50 Используем паттерн "Устаревшие данные" 01:09:30 Создание корзины товаров 01:17:22 Создание CartStore 01:21:52 Применяем CartStore 01:26:40 Создание метода "Очистка корзины" 01:29:05 Создание метода "Удаление товара из корзины" 01:33:31 Создание метода "Добавление товара в корзину" 01:37:08 Конец

Учимся работать с Redux Toolkit (RTK) на примере управления | Сетка — новая социальная сеть от hh.ru
repost

43

input message

напишите коммент

еще контент автора

еще контент автора

войдите, чтобы увидеть

и подписаться на интересных профи

в приложении больше возможностей

пока в веб-версии есть не всё — мы вовсю работаем над ней

сетка — cоциальная сеть для нетворкинга от hh.ru

пересекайтесь с теми, кто повлияет на ваш профессиональный путь