-
Notifications
You must be signed in to change notification settings - Fork 12
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Модуль 8 «Оптимизация производительности» #8
Commits on Dec 1, 2023
-
8.1. Добавит новый хук useUserAnswers.
Ранее мы избавились от состояния в компоненте `ArtistQuestionScreen`. Сделаем тоже самое в компоненте `GenreQuestionScreen`. Решить эту задачу можно несколькими способами. Например, с помощью HOC (High Order Component). Можно создать компонент высшего порядка, а затем обернуть им `GenreQuestionScreen`. Такой подход в действии уже рассматривали. Есть и другой вариант решения. Вместо создания HOC сделать отдельный хук. Попробуем этот способ на практике. В директории `hooks` создадим новый хук `useUserAnswers` и перенесём в него управление состоянием.
Configuration menu - View commit details
-
Copy full SHA for c6738b9 - Browse repository at this point
Copy the full SHA c6738b9View commit details -
8.2. Рефакторит компонент GenreQuestionScreen.
Воспользуемся хуком, созданным в прошлом шаге. Подключим его в компонент `GenreQuestionScreen`. Затем удалим стейт из компонента `GenreQuestionScreen`. Дальше просмотрим весь код компонента и заменим функцию, которую использовали для обновления стейта. Вместо нее воспользуемся функцией, которую вернул нам хук.
Configuration menu - View commit details
-
Copy full SHA for 7a5dec5 - Browse repository at this point
Copy the full SHA 7a5dec5View commit details -
8.3. Декомпозирует компонент GenreQuestionScreen.
Упростим компонент `GenreQuestionScreen`. Сделаем ещё один компонент и перенесём в него из `GenreQuestionScreen` часть JSX, который отвечает за формирование варианта ответа. Новый компонент назовём `GenreQuestionItem`. Все необходимые данные компонент принимает через пропсы.
Configuration menu - View commit details
-
Copy full SHA for 79a1619 - Browse repository at this point
Copy the full SHA 79a1619View commit details -
8.4. Рефакторит компонент GenreQuestionScreen.
Отрефакторим компонент `GenreQuestionScreen`. Удалим JSX, который отвечает за вывод вариантов ответов с плеером и подключим компонент `GenreQuestionItem`.
Configuration menu - View commit details
-
Copy full SHA for d17e1cc - Browse repository at this point
Copy the full SHA d17e1ccView commit details -
8.5. Оптимизируем компонент GenreQuestionScreen.
Компонент `GenreQuestionScreen` перерисовывается при выборе любого варианта ответа. Попробуем его оптимизировать. Самый простой способ заключается в применении декомпозиции. Выделим из `GenreQuestionScreen` в отдельный компонент часть, которая отвечает за отрисовку формы с ответами. Новый компонент назовём `GenreQuestionList`. В него перенесём все необходимые пропсы и использование хука `useUserAnswers`. Запустите и протестируйте проект. Выбор ответа больше не приводит к перерисовке компонента `GenreQuestionScreen`.
Configuration menu - View commit details
-
Copy full SHA for 340197a - Browse repository at this point
Copy the full SHA 340197aView commit details -
8.6. Добавляем первый слайс userProcess. WIP
Наш редьюсер стал большим. В нём обрабатываются абсолютно все действия. Для оптимизации мы можем разбить редьюсер на отдельные части. Для этого воспользуемся функцией `createSlice` из пакета `RTK`. Вынесем в отдельный слайс всё, что необходимо для поддержки доменной области `user`. После создания слайса, нет необходимости держать `action creator` для определённого действия. Его можно получить через слайс. WIP: добавили слайс, но пока не подключили. Проект не запускается. WIP: Линтер выдает ошибку.
Configuration menu - View commit details
-
Copy full SHA for 91ed396 - Browse repository at this point
Copy the full SHA 91ed396View commit details -
8.7. Создаём новые слайсы. Продолжаем разбивать редьюсер. WIP
Проделаем аналогичную процедуру для остальной части редьюсера. Создадим отдельные слайсы: `GameData` и `GameProcess`. Исходный файл `reducer.ts` удалим. Больше он нам не потребуется. В файле `action.ts` оставим только действие `redirectToRouter`. WIP: Проект по-прежнему не запускается. Слайсы созданы, но не подключены. WIP: Линтер выдает ошибку.
Configuration menu - View commit details
-
Copy full SHA for f722d5b - Browse repository at this point
Copy the full SHA f722d5bView commit details -
8.8. Объединит слайсы в один редьюсер. WIP
Объединим слайсы в общий редьюсер. Для этого создадим файл `root-reducer.ts`. Затем подключим его при инициализации хранилища. Сделаем ещё один небольшой рефакторинг. Вместо прямого обращения к полям хранилища воспользуемся селекторами. Селектор — обычная функция, которая возвращает значение нужного поля хранилища. WIP: Проект по-прежнему не работает. Мы подготовили всё необходимое, но не обновили компоненты. WIP: Линтер выдает ошибку.
Configuration menu - View commit details
-
Copy full SHA for 2d47a21 - Browse repository at this point
Copy the full SHA 2d47a21View commit details -
До окончательного перехода на слайсы остаётся обновить компоненты: изменить путь к действиям и имя при извлечении данных из хранилища.
Configuration menu - View commit details
-
Copy full SHA for e6bb8e0 - Browse repository at this point
Copy the full SHA e6bb8e0View commit details -
8.10. Добавит обработку ошибок при загрузке вопросов.
Добавим `GameData` флаг `hasError` и создадим для него селектор. В редьюсере добавим обработку `fetchQuestionAction.rejected`. Если произошла ошибка, выставим флаг `hasError`, а в `isQuestionsDataLoading` запишем `false`. При начале загрузки вопросов флаг `hasError` будем сбрасывать.
Configuration menu - View commit details
-
Copy full SHA for ec3ee8e - Browse repository at this point
Copy the full SHA ec3ee8eView commit details -
8.11. Добавит компонент ErrorScreen.
Создадим новый компонент «Ошибка запроса» с кнопкой, кликнув на которую, пользователь сможет отправить повторный запрос на сервер.
Configuration menu - View commit details
-
Copy full SHA for e448320 - Browse repository at this point
Copy the full SHA e448320View commit details -
8.12. Подключит ErrorScreen в app.tsx.
Добавим в `app.tsx` проверку флага `hasError`. Если во время загрузки вопросов произошла ошибка, отобразим компонент `ErrorScreen`.
Configuration menu - View commit details
-
Copy full SHA for 239ccb6 - Browse repository at this point
Copy the full SHA 239ccb6View commit details