Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
JS: Redux (React)

UI State

UI State отличается от остальных видов состояния тем, что относится только к UI и не влияет на остальные части приложения. Например, всплывающая подсказка при наведении мышкой на элемент. В таких ситуациях бывает полезно хранить состояние не в Redux, а внутри компонентов, отвечающих за соответствующий вывод на экран. Преимущества следующие: не надо создавать действия, не надо задействовать весь механизм диспетчеризации. К тому же перерисовка коснётся только небольшой части виртуального DOM (скорее всего).

Практика показывает, что довольно часто нельзя провести чёткую грань между app state и ui state. Начнём с того, что отображение на экране зависит вообще от всего. Например, в приложениях списка задач, выполненная задача, как правило, отображается зачёркнутой. В данном случае "зачёркнутость" определяется тем, какое значение в свойстве state у соответствующей задачи. Текущий выбранный элемент может быть исключительно элементом UI, а может влиять на поведение программы, например, определённых кнопок, позволяющих выполнять действий в стиле "удалить все выбранное". Вот лишь некоторые примеры, которые можно отнести либо к одной, либо к другой части состояния:

  • Подсвеченный текущий элемент.
  • Элемент в режиме редактирования.
  • Отфильтрованный список.
  • Отображение в три колонки.

Так где хранить UI State?

А вот что говорят по этому поводу разработчики React:

The rule of thumb is: do whatever is less awkward.

Другими словами, делайте так, как наименее тяжело и затратно. По умолчанию исходите из предположения, что всё хранится в Redux. В своей практике я припомню лишь несколько случаев, когда использовалось локальное состояние. В основном такое бывает у сторонних компонентов или в самописных виджетах. Не забывайте, что локальное состояние не участвует в процессе диспетчеризации, а значит его не так легко отлаживать, потому что оно не отображается в DevTools Redux.

Но чего не стоит делать однозначно, так это примешивать app state и ui state в domain data.

const state = {
  tasks: {
    byIds: { 1: { ui: 'opened' } },
  },
};

Обычно данные приходят с сервера в чистом виде. UI состояние появляется позже, во время взаимодействия с пользователем. Соединяя UI-состояние с самими данными, мы получаем сразу несколько проблем:

  1. Все новые данные придётся обрабатывать, добавляя в них UI-состояние.
  2. Всё, что отправляется на сервер, придётся чистить от UI-состояния.

Ниже приводится пример правильного разделения:

const state = {
  tasks: {
    byIds: { 1: { /* ... */ } },
  },
  tasksUIState: {
    1: { state: 'editing' },
  }
};

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

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

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».