Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Модуль 8 «Оптимизация производительности» #8

Merged
merged 12 commits into from
Dec 1, 2023
Merged

Модуль 8 «Оптимизация производительности» #8

merged 12 commits into from
Dec 1, 2023

Commits on Dec 1, 2023

  1. 8.1. Добавит новый хук useUserAnswers. 

    Ранее мы избавились от состояния в компоненте `ArtistQuestionScreen`.
Сделаем тоже самое в компоненте `GenreQuestionScreen`.

Решить эту задачу можно несколькими способами. Например, с помощью HOC
(High Order Component). Можно создать компонент высшего порядка, а затем
обернуть им `GenreQuestionScreen`. Такой подход в действии уже
рассматривали.

Есть и другой вариант решения. Вместо создания HOC сделать отдельный
хук. Попробуем этот способ на практике. В директории `hooks` создадим
новый хук `useUserAnswers` и перенесём в него управление состоянием.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    c6738b9 View commit details
    Browse the repository at this point in the history

  2. 8.2. Рефакторит компонент GenreQuestionScreen. 

    Воспользуемся хуком, созданным в прошлом шаге. Подключим его в компонент
`GenreQuestionScreen`. Затем удалим стейт из компонента
`GenreQuestionScreen`. Дальше просмотрим весь код компонента и заменим
функцию, которую использовали для обновления стейта. Вместо нее
воспользуемся функцией, которую вернул нам хук.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    7a5dec5 View commit details
    Browse the repository at this point in the history

  3. 8.3. Декомпозирует компонент GenreQuestionScreen. 

    Упростим компонент `GenreQuestionScreen`. Сделаем ещё один компонент
и перенесём в него из `GenreQuestionScreen` часть JSX, который отвечает
за формирование варианта ответа. Новый компонент назовём
`GenreQuestionItem`. Все необходимые данные компонент принимает через
пропсы.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    79a1619 View commit details
    Browse the repository at this point in the history

  4. 8.4. Рефакторит компонент GenreQuestionScreen. 

    Отрефакторим компонент `GenreQuestionScreen`. Удалим JSX, который
отвечает за вывод вариантов ответов с плеером и подключим компонент
`GenreQuestionItem`.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    d17e1cc View commit details
    Browse the repository at this point in the history

  5. 8.5. Оптимизируем компонент GenreQuestionScreen. 

    Компонент `GenreQuestionScreen` перерисовывается при выборе любого
варианта ответа. Попробуем его оптимизировать. Самый простой способ
заключается в применении декомпозиции.

Выделим из `GenreQuestionScreen` в отдельный компонент часть, которая
отвечает за отрисовку формы с ответами. Новый компонент назовём
`GenreQuestionList`. В него перенесём все необходимые пропсы и
использование хука `useUserAnswers`.

Запустите и протестируйте проект. Выбор ответа больше не приводит к
перерисовке компонента `GenreQuestionScreen`.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    340197a View commit details
    Browse the repository at this point in the history

  6. 8.6. Добавляем первый слайс userProcess. WIP 

    Наш редьюсер стал большим. В нём обрабатываются абсолютно все действия.
Для оптимизации мы можем разбить редьюсер на отдельные части. Для этого
воспользуемся функцией `createSlice` из пакета `RTK`. Вынесем в
отдельный слайс всё, что необходимо для поддержки доменной области `user`.

После создания слайса, нет необходимости держать `action creator` для
определённого действия. Его можно получить через слайс.

WIP: добавили слайс, но пока не подключили. Проект не запускается.
WIP: Линтер выдает ошибку.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    91ed396 View commit details
    Browse the repository at this point in the history

  7. 8.7. Создаём новые слайсы. Продолжаем разбивать редьюсер. WIP 

    Проделаем аналогичную процедуру для остальной части редьюсера. Создадим
отдельные слайсы: `GameData` и `GameProcess`.

Исходный файл `reducer.ts` удалим. Больше он нам не потребуется. В
файле `action.ts` оставим только действие `redirectToRouter`.

WIP: Проект по-прежнему не запускается. Слайсы созданы, но не подключены.
WIP: Линтер выдает ошибку.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    f722d5b View commit details
    Browse the repository at this point in the history

  8. 8.8. Объединит слайсы в один редьюсер. WIP 

    Объединим слайсы в общий редьюсер. Для этого создадим файл
`root-reducer.ts`. Затем подключим его при инициализации хранилища.

Сделаем ещё один небольшой рефакторинг. Вместо прямого обращения к
полям хранилища воспользуемся селекторами.

Селектор — обычная функция, которая возвращает значение нужного
поля хранилища.

WIP:  Проект по-прежнему не работает. Мы подготовили всё необходимое,
но не обновили компоненты.
WIP: Линтер выдает ошибку.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    2d47a21 View commit details
    Browse the repository at this point in the history

  9. 8.9. Обновит компоненты. 

    До окончательного перехода на слайсы остаётся обновить компоненты:
изменить путь к действиям и имя при извлечении данных из хранилища.
    @AntonovIgor
    AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    e6bb8e0 View commit details
    Browse the repository at this point in the history

  10. 8.10. Добавит обработку ошибок при загрузке вопросов. 

    Добавим `GameData` флаг `hasError` и создадим для него селектор.

В редьюсере добавим обработку `fetchQuestionAction.rejected`. Если произошла ошибка,
выставим флаг `hasError`, а в `isQuestionsDataLoading` запишем `false`.

При начале загрузки вопросов флаг `hasError` будем сбрасывать.
    @Jahonta @AntonovIgor
    Jahonta authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    ec3ee8e View commit details
    Browse the repository at this point in the history

  11. 8.11. Добавит компонент ErrorScreen. 

    Создадим новый компонент «Ошибка запроса» с кнопкой, кликнув на которую,
пользователь сможет отправить повторный запрос на сервер.
    @Jahonta @AntonovIgor
    Jahonta authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    e448320 View commit details
    Browse the repository at this point in the history

  12. 8.12. Подключит ErrorScreen в app.tsx. 

    Добавим в `app.tsx` проверку флага `hasError`. Если во время загрузки вопросов
произошла ошибка, отобразим компонент `ErrorScreen`.
    @Jahonta @AntonovIgor
    Jahonta authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    239ccb6 View commit details
    Browse the repository at this point in the history