SWR Tutorial - Полный курс для начинающих

• Видео начинается с введения в библиотеку React SMR, которая упрощает выборку данных на стороне клиента, обработку кэширования, обработку ошибок и многое другое.  

• Библиотека основана на концепции недвижимости и направлена на решение проблем, связанных с кэшированием, повторной проверкой и повышением производительности.  

• Для демонстрации работы библиотеки, автор создает пример, который получает данные с сервера старым способом, без использования библиотеки React SMR.  

• Для этого он запускает поддельный сервер на порту 8080 своего терминала и создает простой компонент, который загружает данные с сервера.  

• Старый способ получения данных с сервера имеет ряд проблем, таких как обработка ошибок, тайм-аутов, повторных попыток и других аспектов, связанных с запросами.  

• Автор объясняет, что этот способ трудно поддерживать и обрабатывать в рабочем состоянии.  

• Автор переходит к использованию библиотеки React SMR для решения этих проблем.  

• Он объясняет, как использовать директиву use client в верхней части компонента для обработки данных ответа и как установить столбцы с данными.  

• В целом, автор демонстрирует, как библиотека React SMR упрощает выборку данных на стороне клиента и обработку ошибок, кэширования и других аспектов.  

• Создание компонента "post" с использованием библиотеки СР.  

• Импорт сообщений по умолчанию и создание функции выборки для получения данных с сервера.  

• Использование хука useSWR для получения данных с сервера.  

• Создание файла "providers.tsx" для настройки запросов и мутаций.  

• Настройка параметров, таких как интервал обновления и повторная проверка.  

• Использование хука useSWR для получения данных с сервера.  

• Создание простого интерфейса "корзина" с полем "стоимость доставки" и продуктами.  

• Использование хука "use client" для доступа к данным из серверной части.  

• Создание запроса "use user" для аутентификации пользователя.  

• Использование "use user" в "use card" для зависимости запросов.  

• Создание запроса "use product" для получения списка продуктов.  

• Использование "use product" в компоненте "products" для отображения продуктов.  

• В видео обсуждается использование библиотеки swr для обработки нескольких мутаций и предварительных проверок.  

• Создается простая форма для ввода названия продукта и кнопка "Создать".  

• При изменении значения ввода вызывается функция обновления входного значения.  

• Создается файл мутаций в папке служб для обработки мутаций.  

• Создается хук useCreateProduct для обработки мутаций.  

• В файле api.ts определяются функции для изменения состояния сервера.  

• В компоненте используется хук useCreateProduct для создания продукта.  

• При успешной мутации вызывается функция mutate из запроса на создание продукта.  

• В видео объясняется, как использовать оптимистичные данные для улучшения пользовательского опыта в приложении.  

• Оптимистичные данные позволяют получить данные о продуктах сразу после создания нового продукта, без задержек.  

• В видео демонстрируется создание простой функции ведения журнала с использованием библиотеки establish.  

• Функция logger принимает аргумент и возвращает ключ, выборку и конфигурацию.  

• Функция logger может быть использована для отслеживания запросов в приложении.  

• Создание компонента post и использование его в компоненте boss.  

• Создание хука для post и использование его в компоненте boss.  

• Использование разбиения на страницы в компоненте boss.  

• Создание компонента tsx для бесконечной прокрутки.  

• Определение константы get key и использование ее в бесконечном хуке.  

• Определение интерфейса для выполнения задачи и его использование в запросах.  

• Определение ключевой функции для бесконечной прокрутки.  

• В видео объясняется, как использовать хук для бесконечной прокрутки с разбивкой на страницы и загрузкой данных с сервера.  

• Хук принимает два параметра: данные предыдущей страницы и индекс страницы.  

• Если данные предыдущей страницы равны null, возвращается null.  

• В противном случае, возвращается ключ запроса, соответствующий индексу страницы.  

• Хук используется в компоненте для отображения данных и выполнения действий.  

• На каждой итерации отображается список дел, которые нужно выполнить.  

• Если данных нет, возвращается загрузка.  

• Если данные есть, они отображаются в div с ключом, который используется для выполнения действия.  

• При использовании бесконечного хука, внутренний индекс подкачки начинается с единицы, а не с нуля.  

• Это приводит к проблемам с отображением данных на странице.  

• Для решения проблемы, автор добавляет плюс один к ключу getkey в компоненте.