#24: 🍕 React Pizza v2 — TypeScript + Redux Toolkit

• Типизация логики, связанной с Redux.  

• Конвертация файлов в TypeScript.  

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

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

• Создание интерфейса для типизации state.  

• Типизация свойств объекта.  

• Создание нового типа для массива объектов.  

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

• Различие между типом и интерфейсом.  

• Интерфейс типизирует только объекты.  

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

• Типизация с помощью интерфейса и типа.  

• Типизация state с помощью интерфейса.  

• Исправление ошибок типизации.  

• Использование библиотеки @redux/toolkit для предотвращения мутаций.  

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

• Исправление ошибок типизации в селекторах.  

• Типизация глобального state.  

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

• Объяснение важности типизации для логики и конфигурирования.  

• Фокус на изучении только самого важного.  

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

• Объяснение необходимости типизации для понимания структуры.  

• Пример создания типа для state.  

• Объяснение функции getState и её типа.  

• Использование typeOf для получения типа функции.  

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

• Преобразование функции в тип с помощью typeOf.  

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

• Объяснение, как тип функции помогает в типизации.  

• Преимущества автоматического типизирования с помощью TypeScript.  

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

• Пример типизации state, filter, cart и pizza.  

• Пример типизации state, filter, cart и pizza с помощью TypeScript.  

• Преимущества автоматического импорта типов.  

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

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

• Переход к фильтрации с использованием скрипта.  

• Создание фильтра слайс для типизации.  

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

• Добавление свойства sort property для хранения объекта.  

• Типизация по рейтингу, тайтлу и прайсу.  

• Ограничение типов для sort property.  

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

• Добавление минусов к свойствам.  

• Типизация интерфейса слайса.  

• Преобразование типов из бэкенда в фронтэнд.  

• Создание типа для слайса.  

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

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

• Ограничение типов для предотвращения ошибок.  

• Добавление опциональных свойств для экшенов.  

• Типизация переменных для корректной работы.  

• Следование правилам типов для предотвращения ошибок.  

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

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

• Пример с функцией sort, которая ожидает определенный тип.  

• Типизация всех свойств сайта.  

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

• Корректная передача состояния через action.  

• Типизация параметров, которые хранятся в объекте.  

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

• Использование объекта с ключами и значениями.  

• Типизация возвращаемого значения функции.  

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

• Объяснение, что такое дата и как её использовать.  

• Типизация параметров и возвращаемых значений асинхронных действий.  

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

• Пример типизации функции, возвращающей promise.  

• Типизация в Axios для получения данных.  

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

• Пример типизации функции, возвращающей массив карт.  

• Типизация ответа от Axios.  

• Объяснение, как Axios автоматически типизирует данные.  

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

• Проверка корректности типизации аргументов и возвращаемых типов.  

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

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

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

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

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

• Проблемы с типизацией массивов и карт.  

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

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

• Преимущества использования объектов и ключей.  

• Пример создания объекта с ключами и значениями.  

• Использование ключей для типизации и предотвращения ошибок.  

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

• Пример создания объекта с ключами и значениями.  

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

• Пример создания объекта с ключами и значениями.  

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

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

• Заключение о преимуществах использования объектов и ключей.  

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

• Переход к исправлению ошибок в коде.  

• Возникла проблема с типизацией в React.  

• Dispatch не понимает асинхронные экшены.  

• Необходимо создать специальный тип для Dispatch.  

• Dispatch должен получать только объекты.  

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

• Хук будет называться useDispatch.  

• Dispatch должен знать, какие экшены у нас есть.  

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

• Создаем отдельный тип для Dispatch.  

• Импортируем хук из библиотеки React.  

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

• Dispatch теперь корректно типизирован.  

• Проверяем корректность использования useDispatch.  

• Dispatch разрешает передавать любые экшены.  

• Это странно, так как должно быть ограничение на типы экшенов.  

• Гуглим проблему и находим, что в документации нет четкого указания.  

• Dispatch разрешает передавать асинхронные экшены.  

• Решаем использовать dispatch с типизацией.  

• Dispatch теперь корректно типизирован.  

• Можно передавать асинхронные экшены.  

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

• Используем useDispatch для корректной работы с асинхронными экшенами.  

• Функция ожидает получить фильтр.  

• Планируем провести рефакторинг для улучшения кода.  

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

• Попытка преобразовать params в фильтр слайс не работает.  

• Решение: создать отдельный тип для параметров сортировки.  

• Экспортируем тип sortParams, содержащий ключи для сортировки.  

• Переопределяем функцию search для работы с новым типом.  

• Согласовываем типы между бэкендом и фронтендом.  

• Определяем, что функция search будет получать только sortProperty.  

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

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

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

• Согласовываем значения сортировки и выродок в массиве.  

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

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

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

• Убеждаемся, что все данные передаются корректно и без ошибок.  

• Обсуждение необходимости указания всех свойств объекта.  

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

• Проблемы с передачей объектов и строк в backend.  

• Обсуждение необходимости передачи объекта в backend.  

• Создание отдельного объекта для передачи данных.  

• Типизация параметров для корректной работы с Redux.  

• Парсинг параметров и их конвертация в строки.  

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

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

• Проблемы с передачей данных в компонент карты.  

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

• Решение проблем с типами и их проверка.  

• Проверка работы компонента и исправление ошибок.  

• Финальные настройки для корректного отображения данных.  

• Подготовка проекта к запуску в продакшн.  

• Обсуждение планов по рефакторингу и улучшению проекта.  

• Планы по устранению проблем с перерисовкой категорий и сортировки.  

• Подготовка к следующему уроку по избавлению от лишних rerenders.