Серия «RTK Query»

Бесплатный конспект к уроку

В видео Валера, преподаватель Айти-Инкубатора, рассказал про 4 темы:

6. Работа с изображениями. Загрузка изображений, FormData, react-toastify

• Загрузка дефолтной картинки

• FormData- теория и практика

• input type="file"

• Реализация загрузки изображения

• Ограничение загрузки по типу файла

• Ограничение загрузки по размеру

• Реализация удаления изображения

• Рефакторинг / декомпозиция кода

• Внедрение React toastify для отображения ошибок
  
  7. Searching and Pagination. Query параметры, debounce
   

• Работа с query параметрами

• Реализация поиска

• Debounce - теория, реализация и пояснение кода

• Пагинация - теория, реализация и пояснение кода

• Добавление селекта для выбора размера страницы (pageSize)

• Рефакторинг / декомпозиция кода
  
  8. Cache. Методы для работы с кэшем. Получение данных на другой странице
   

• Кэширование теория

• KeepUnusedDataFor

• RefetchOnFocus

• RefetchOnReconnec

• Polling

• Получение данных на другой странице
  
  9. Infinity Queries. flat, flatMap, load more, IntersectionObserver, курсорная пагинация
  

• Infinity Queries - теория

• Курсорная пагинация - теория и реализация

• Реализация пагинации при отрисовке треков.

• Методы массивов flat и flatMap на практике

• Реализация подгрузки данных по кнопке (load more)

• Infinity scroll - теория

• Использование Intersection observer для реализации бесконечной подгрузки данных

• Декомпозиция. Вынесение логики в кастомный хук useInfiniteScroll

• Домашнее задание: Offset Pagination

Ссылка платформу с конспектом. (это бесплатно!). Кому удобнее смотреть на ютубе, велком сюда

В видео Валера, преподаватель Айти-Инкубатора, рассказал про 5 тем:

Введение в курс RTK Query:

• Что будет в курсе и зачем RTK Query разработчику  

• Краткий обзор программы

Обзор платформы и материалов курса  

• Структура обучения  

• Где найти конспекты и документацию  

• Дополнительные материалы (репозиторий, примеры кода)

Создание и базовая настройка приложения  

• Создание нового проекта (Vite + React + TypeScript)

• Установка зависимостей и подключение Redux Toolkit  

• Очистка шаблонного кода  

• Структура проекта (feature folders, pages, components)

• Настройка алиасов и импортов  

• Подключение роутинга (React Router)

• RTK Query: теория и первые запросы  

Что такое RTK Query и чем отличается от Redux Toolkit

• Query vs Mutation: базовые концепции

• Настройка API slice

• Первый запрос (fetch playlists)

• Типизация запросов и данных из бэкенда  

• Использование хуков useQuery в React

• Отображение данных в интерфейсе

Mutation и CRUD операции  

• Введение в мутации (создание, обновление, удаление)

• Настройка useMutation

• Создание плейлиста. React-hook-form + RTK query

• Сохранение токена и работа с .env

• Зачистка данных (reset), unwrap для обработки ошибок  

• Удаление плейлиста (delete mutation)

• Обновление плейлиста (update mutation)

• Финальный рефакторинг

Data Updating и система тегов

• Автоматическое обновление данных без перезагрузки

• Tags, providing tags и invalidating tags

• Пример тегов для разных сущностей (плейлисты, пользователи)

• Как работает кэширование и рефетчинг

• Преимущества тегов: единый источник истины

Code Splitting в RTK Query

• Что такое code splitting и зачем он нужен

• Создание базового API

• Вынос общей логики в отдельные файлы

• Использование injectEndpoints

• Итоги внедрения: меньше бандл, выше скорость загрузки
  

Всё, что будет в остальном курсе, узнаете из этого видео:

А я завтра выложу новый видос про изучение JS, а на следующей неделе - новое видео про изучение RTK Query