Продвинутый Redux. Redux Toolkit, RTK query, TypeScript.

• Обзор современного Redux Toolkit и его связки с TypeScript.  

• Введение в RTK Query и его использование.  

• Важность ознакомления с предыдущими роликами по Redux.  

• Подключение Redux Toolkit к проекту через npm.  

• Установка React Redux и типов для него.  

• Запуск приложения и проверка его работы.  

• Создание корневой Reducer и функции для конфигурации хранилища.  

• Использование функции createStore и configStore.  

• Указание корневого Reducer и типов для взаимодействия с хранилищем.  

• Создание хуков useDispatch и useSelector с типизацией.  

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

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

• Объяснение работы Reducer и слайсов в Redux Toolkit.  

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

• Инициализация дефолтного состояния и создание слайса.  

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

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

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

• Добавление состояния и инициализация счетчика.  

• Использование мутабельного подхода в Redux Toolkit.  

• Пример изменения поля вложенного объекта.  

• Получение экшн-крейтеров и редюсеров из слайса.  

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

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

• Обернули приложение в провайдер для хранения данных.  

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

• Передали стор как props в провайдер.  

• Пример использования: увеличение счетчика на 10 при нажатии кнопки.  

• Получение данных от сервера требует асинхронного экшн-крейтера.  

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

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

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

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

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

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

• Используем хук useSelector для получения данных из состояния.  

• Реализуем получение данных с помощью хука useEffect.  

• Отображаем данные и обрабатываем индикацию загрузки и ошибки.  

• Упрощаем обработку состояний с помощью функции createAsyncThunk.  

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

• Используем экстра-редюсеры для автоматического перемещения данных в состояние.  

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

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

• Описываем энд-пойнты для получения и изменения данных.  

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

• Переименовали сервис в "пост-сервис" для предотвращения конфликтов.  

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

• Добавили мидл в конфигурацию стора для получения дефолтного мидл вр.  

• Создали компонент пост-контейнер для вывода списка постов.  

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

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

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

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

• Веб-шторм автоматически типизирует данные, что упрощает работу.  

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

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

• Добавили кнопку для удаления поста и проверку на наличие постов.  

• Автоматически обрабатываются ошибки и индикация загрузки.  

• Проверили работу при изменении URL и дублировании компонента.  

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

• Изменили лимит данных через юз-эффект и проверили обновление данных.  

• РТК кэри обновляет данные только в одном компоненте, чтобы избежать лишних запросов.  

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

• Реализовали лонг-пулинг для получения обновленных данных.  

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

• Подняли сервер с помощью джесон сервера для работы с данными.  

• Указываем кэри для запроса и тип объекта.  

• Используем пост-запрос с телом объекта.  

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

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

• Возвращает массив кортеж с функцией и объектом.  

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

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

• Обновляем страницу для отображения нового элемента.  

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

• Указываем энд-пойнт для работы с тэгом пост.  

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

• Синхронизация данных работает корректно.  

• Создаем энд-пойнты для обновления и удаления.  

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

• Вешаем слушатели событий на кнопки для вызова функций.  

• Тестируем удаление и обновление поста.  

• Проверяем корректность работы функций.  

• Подводим итоги: базовые операции с данными, обработка ошибок и кэширование.