RTK Query, Thunk, createAsyncThunk | Продвинутый полный курс | Часть 2

• Второй урок курса по редакции.  

• Основное внимание уделено работе с API-запросами.  

• Курс полезен для новичков и опытных разработчиков.  

• Рассматриваются различные аспекты работы с редактором.  

• Обсуждаются экстра аргумент в санках, инверсия зависимости и интеграция с роутером.  

• Важные темы: работа с RTK Query, использование Redux и React Query.  

• Основные темы: сайт эффекты в редакторе, работа с RTK Query.  

• Обсуждение типизации и актуальности RTK Query.  

• Важность экстра аргумента в санках и RTK Query.  

• Примеры использования RTK Query для мутаций и инвалидаций.  

• Применение RTK Query в компонентах.  

• Совмещение RTK Query и Sanity для сложных мутаций.  

• Подписывайтесь на канал и телеграм.  

• Платный курс по архитектуре редактора.  

• Переход к обсуждению синхронной логики и сайт эффектов.  

• RTK Query позволяет делать запросы вне хранилища.  

• Использование RTK Query для записи событий в редакторе.  

• Создание сервера для тестирования.  

• Установка зависимостей: JSON Server, Caron Lee и Zod.  

• Использование Caron Lee для параллельного запуска процессов.  

• Создание базы данных и добавление пользователей.  

• Установка и настройка пакета для генерации тестовых данных.  

• Запуск сервера и получение массива пользователей.  

• Создание файла для хранения запросов к API.  

• Использование Zod для строгой типизации данных.  

• Создание схемы массива и проверка данных на соответствие схеме.  

• Проверка работы API и корректного возврата данных.  

• Добавление информации о процессе запроса в Redux.  

• Использование флагов и состояний для отслеживания запросов.  

• Создание экшенов и редюсеров для обработки информации.  

• Проблема с частыми вызовами из эффекта.  

• Использование селекторов для корректного отображения данных.  

• Применение epStore для решения проблемы с состоянием.  

• Redux позволяет хранить состояние вне жизненного цикла компонентов.  

• Использование Redux для кэширования запросов и дедупликации данных.  

• Переход к более продвинутым инструментам для решения этих задач.  

• Редактор создан для независимости состояния от интерфейса.  

• Текущий подход зависит от жизненного цикла компонентов.  

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

• Создание модуля для бизнес-логики и запросов.  

• Экспорт функции fetchUser из модуля.  

• Импорт необходимых зависимостей.  

• Импорт контекста store из модуля.  

• Использование dispatchGetState для получения состояния.  

• Реализация параллельного фетчинга.  

• Необходимость передавать store через хуки.  

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

• Введение саг для решения этих проблем.  

• Мидл вар позволяет удобно работать с логикой вне редактора.  

• Мидл вар интегрируется в редактор для плотной логики.  

• Мидл вар обрабатывает экшены и передает управление дальше.  

• Мидл вар состоит из конструктора, диспетчера и диспетчера.  

• Мидл вар возвращает новый диспетчер с доступом к store.  

• Мидл вар позволяет работать с состоянием и экшенами.  

• Мидл вар вызывает следующий мидл вар.  

• Мидл вар может обрабатывать экшены и передавать управление дальше.  

• Мидл вар позволяет работать с состоянием и экшенами.  

• Саги решают простую проблему вызова функций.  

• Саги позволяют передавать функции через диспетчер.  

• Саги упрощают работу с функциями и состоянием.  

• Саги решают задачу передачи параметров в функцию.  

• Саги могут передавать доступ к другим сервисам, таким как роутер.  

• Саги помогают работать с роутером и другими внешними сервисами.  

• Sanic - это простая и эффективная структура для асинхронного веб-приложения.  

• Sanic позволяет импортировать функции из asyncio.  

• Sanic использует функцию async def для обработки запросов.  

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

• Sanic позволяет работать вне иерархии компонентов и использовать экстра аргументы.  

• Sanic часто используется в проектах, где нет Redux.  

• Sanic можно типизировать с помощью экстра аргументов.  

• Экстра аргументы можно передавать через router.get_extra_args.  

• Sanic позволяет передавать типы данных, такие как API и состояния.  

• Sanic принимает четыре параметра: возвращаемое значение, состояние, экстра аргументы и экшн.  

• Sanic можно использовать как функцию, возвращающую Sanic.  

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

• Sanic можно интегрировать с React Router для обработки маршрутов.  

• Установка React Router и добавление роутеров в приложение.  

• Создание роутов для получения списка пользователей, счетчиков и одного пользователя.  

• Создание роутов и отображение ссылок в хедере.  

• Использование React Router для создания страниц и отображения данных.  

• Интеграция с React Router для маршрутизации и обработки данных.  

• Использование React Router для навигации по страницам.  

• Добавление селектора пользователя.  

• Проблемы с навигацией и их решение.  

• Проблема с отображением компонента на неправильной странице.  

• Использование React Router для навигации.  

• Относительные и абсолютные пути в навигации.  

• Проблемы с загрузкой данных при перезагрузке страницы.  

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

• Добавление запроса данных пользователя.  

• Добавление запросов данных пользователя.  

• Использование состояния гонки и статуса пользователя.  

• Усложнение структуры хранения данных.  

• Использование юз эффектов для обработки запросов.  

• Проверка статуса пользователя при переходе на другую страницу.  

• Передача идентификатора пользователя в запрос.  

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

• Проверка наличия значений в данных.  

• Добавление фильтра для обязательных значений.  

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

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

• Устранение ошибок в типе скрипте.  

• Добавление состояния "пользователь удален" и "фейлит".  

• Фильтрация состояния и добавление селекта.  

• Реализация асинхронной функции для удаления пользователя.  

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

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

• Интеграция с роутером для управления состоянием.  

• Добавление роутера в экстра аргументы.  

• Использование навигатора для управления состоянием.  

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

• Удаление пользователя и перезапрос списка.  

• Логика удаления и навигации.  

• Перезагрузка базы данных для завершения процесса.  

• Удаление ненужных эффектов.  

• Использование лодера для очистки состояния.  

• Реализация без использования эффектов.  

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

• Аналогичная концепция может быть применена к функции пара-рамс фетч юзер.  

• Использование на штор для прокидывания контекста вызывает циклическую зависимость.  

• Роутер и редак зависят друг от друга, что создает циклическую зависимость.  

• Для устранения зависимости используется функция лот стор, возвращающая нулевой тайм-аут.  

• Это позволяет обойти циклическую зависимость и корректно работать с редакс.  

• Обновление страницы вызывает ошибку из-за циклической зависимости.  

• Для решения проблемы используется функция лот стор.  

• Это позволяет избежать использования мидл варов и работать с редакс напрямую.  

• Бойлерплейт — проблема, связанная с большим количеством повторяющегося кода.  

• Для уменьшения бойлерплейта используется к-лайсинг.  

• Рефакторинг включает перенос инициализационной логики в отдельный файл.  

• Перенос инициализационной логики в отдельный файл упрощает структуру кода.  

• Разделение кода помогает избежать циклических зависимостей.  

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

• Крейтасинг санк позволяет избежать многократного создания и запуска экшенов.  

• Экстры редюсерс позволяют обращаться к экшенам, созданным вне слайса.  

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

• Добавление экспорта константы для кре эс атинг санк.  

• Типизация стейта, диспача и экстра аргументов.  

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

• Экспорт констант в users и API.  

• Передача префикса users и features для создания уникальных экшенов.  

• Передача синхронной функции для запроса API.  

• Типизация параметров для доступа к API.  

• Использование экстра для вызова API.  

• Устранение ненужных знаков вопроса.  

• Устранение ненужных переменных.  

• Использование underscore для переменных.  

• Уменьшение количества кода до одной строки.  

• Использование экстра для создания экшенов.  

• Логика экшенов в одном файле.  

• Удобство хранения логики в одном файле.  

• Поддержка структуры хранения editis.  

• Уменьшение количества кода благодаря использованию API.  

• Отсутствие необходимости типизации экшенов.  

• Проверка запросов в инспекторе.  

• Дедукпликация запросов.  

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

• Проверка наличия данных в БД.  

• Работа с данными и селекторами.  

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

• Определение слайсов и санков внутри слайса.  

• Использование асинхронных редюсеров внутри слайса.  

• Импорт санков из шарика для уменьшения бандла.  

• Использование API и санков внутри слайса.  

• Передача параметров и настроек санков.  

• Уменьшение количества кода и улучшение структуры.  

• Использование React.js и Redux.  

• Уменьшение кода и улучшение структуры.  

• Переход к современному подходу работы с React.js.  

• Сохранение работы с React.js и Redux.  

• Переход к актуальному современному подходу.  

• Завершение работы с полумаргинальными способами и переход к React.js.  

• Использование инструментов для уменьшения бойлерплейта, таких как критический слайс и Redux.  

• Несмотря на современные технологии, бойлерплейт все равно остается значительным.  

• Редакция работает с любыми типами состояний, включая бизнес-данные и инфраструктурные элементы.  

• Кэширование данных достигает 90% в приложениях.  

• Кэширование — это копия данных для ускорения доступа.  

• Кэширование часто используется для синхронного хранения данных, таких как пользователи.  

• Кэширование требует стандартной логики управления состоянием выборки и временем жизни.  

• Существуют инструменты для управления кэшами, такие как Recoil.  

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

• В базовой парадигме работы с данными в React данные путаются с бизнес-данными и инфраструктурными элементами.  

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

• Решение проблемы — использование Recoil для управления кэшами.  

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

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

• Recoil решает проблемы с непредсказуемостью данных и улучшает производительность.  

• RTK Query работает с данными напрямую из компонента, как будто это серверные данные.  

• Каждый раз при необходимости списка пользователей данные запрашиваются заново, а RTK Query оптимизирует процесс.  

• Нарушение этой концепции приводит к потере преимуществ RTK Query.  

• RTK Query улучшает предсказуемость и устойчивость приложения.  

• Пример: замена логики работы с кэшом на управление через RTK Query.  

• Уменьшение количества кода при использовании RTK Query.  

• Импорт RTK Query через React.  

• Определение базовых запросов в базовом API.  

• Использование RTK Query для управления запросами и мутациями.  

• Определение базовых запросов в базовом API.  

• Передача параметров в запросы и мутации.  

• Использование RTK Query для синхронизации данных с сервером.  

• Типизация запросов с помощью RTK Query.  

• Экспорт запросов и мутаций.  

• Установление связи между компонентом и источником данных на сервере.  

• Установление связи между компонентом и источником данных.  

• Синхронизация данных с сервером через RTK Query.  

• Работа с состоянием выборки и синхронизацией данных.  

• Урок посвящен архитектуре редакции с RTK Query.  

• Рассматриваются взаимодействия слайсов и создание больших флоу.  

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

• Настройка RTK Query для работы с данными.  

• Уменьшение бойлерплейта и увеличение устойчивости кода.  

• Регистрация мидлваров и редюсеров для работы с данными.  

• Добавление редюсера для хранения кэшей запросов.  

• Использование RTK Query для работы как внутри, так и вне компонентов.  

• Проверка работы запросов и кэшей.  

• Изменение реализации запросов для работы с RTK Query.  

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

• Оптимизация запросов для уменьшения количества запросов.  

• Применение RTK Query для получения данных из API.  

• Управление параметрами запросов и использование опциональных параметров.  

• Реализация запросов на получение и удаление данных.  

• Реализация удаления данных с помощью RTK Query.  

• Возвращение объекта вместо строки для работы с мутациями.  

• Использование мутаций для управления данными.  

• Удаление данных с помощью React Query.  

• Проблема с кэшированием данных после удаления.  

• Использование тегов для инвалидации кэша.  

• Использование тэгов для инвалидации кэша.  

• Указание тэгов в запросах и мутациях.  

• Пример использования тэгов для точечной инвалидации.  

• Пример создания тэгов на основе параметров.  

• Точечная инвалидация конкретных данных.  

• Пример инвалидации списка и конкретного юзера.  

• Добавление эвейт для ожидания удаления.  

• Использование мутаций в React Query.  

• Пример удаления юзера и редирект на страницу.  

• Валидация ответов с помощью схемы.  

• Преобразование и валидация ответов.  

• Важность соответствия типов данных.  

• Использование React Query вне компонентов.  

• Пример инициализации запроса и получения данных.  

• Важность использования диспетчера запросов.  

• RTC Query позволяет получать данные из кэша, а не через select.  

• Прифечинг не вызывает ошибок, в отличие от обращения.  

• Для прифечинга нужно использовать util.fetch и указывать параметры.  

• Первым параметром передается запрос, вторым - параметры.  

• Третий параметр обязателен: force и stale.  

• Force перезапрашивает данные, даже если они в кэше.  

• Прифечинг данных запускается раньше рендеринга компонента.  

• Это позволяет избежать ненужных запросов.  

• Запрос один благодаря дедупликации RTC Query.  

• RTC Query полезен для запросов, но Sanck лучше для мутаций.  

• Мутации часто происходят вместе с навигацией и инвалидацией.  

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

• Удаление инвалидации из API и запуск мутации из Sanck.  

• Использование track для записи данных о мутации в state.  

• Важно избегать лишних рендеров с помощью state.  

• Sanck создает новый селектор каждый раз, что может вызвать лишние рендеры.  

• Решение: использовать state и stateful.  

• Удаление лишнего кода и замена на RTC Query.  

• RTC Query имеет ограничения по сравнению с React Query.  

• Важно вызывать данные в subscript в model, чтобы избежать проблем.  

• Переписывание на RTC Query завершено, осталось разобраться в деталях.  

• RTK Query использует экшены для управления запросами.  

• Экшены вызываются в пользовательском эффекте, а не в компоненте.  

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

• RTK Query добавляет подписки на запросы в кэш.  

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

• Кэширование происходит за пределами RTK Query, что позволяет хранить данные отдельно.  

• RTK Query обновляет подписки на запросы при изменении данных.  

• RTK Query использует подписки для определения, какие запросы нужно перезапрашивать.  

• Кэширование происходит на основе подписок, а не результатов запросов.  

• RTK Query позволяет легко реализовать инфинити скрол.  

• Важно понимать работу подписок для управления кэшем.  

• В следующем уроке будет обсуждаться глобальная архитектура RTK Query.