Границы состояния пользовательского интерфейса и состояния приложения

Question

У меня возникают проблемы с поиском или нахождением границ так называемого "UI State" .

Представьте себе пример системы отслеживания проблем:

У нас естьсписок «карточек выдачи», каждая из которых содержит:

1. Простой значок, отображающий ход выполнения (т. е. открытый, закрытый)
2. Текст описания проблемы (простой <p/> element)
3. A single Кнопка действия, которая изменяет d = в зависимости от состояния проблемы: «Назначить себе» или «Пометить как выполненное».
4. Aкнопка, которая открывает контекстное меню (меню, вызываемое правой кнопкой мыши АКА).В этом меню есть список различных кнопок действий.В зависимости от состояния некоторые действия отображаются серым цветом и не могут быть нажаты / или просто не показаны.Как и «Закрыть дело», если дело уже закрыто.

Если бы вы могли классифицировать каждый из этих элементов по состоянию пользовательского интерфейса или состоянию приложения, это помогло бы мне понять границы.

Более практично : Как бы вы поделили это маленькое примерное приложение на контейнеры и компоненты представления ?

Моя интерпретация :1. и 2. являются просто презентационными, 3. и 4. с сохранением состояния.Это правильно?Как бы я структурировал это как контейнеры и компоненты?

Большое спасибо!

Answer 1

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

Состояние пользовательского интерфейса обычно относится кЛокальное состояние компонента пользовательского интерфейса, которое определяется действиями пользователя, например, положением окна, активной вкладкой, неподтвержденными значениями формы и т. Д. В зависимости от случая, состояние пользовательского интерфейса может быть поднято и где-то сохранено (постоянное хранилище или URL) или отброшено.

Answer 2

если я хочу реализовать этот проект, я бы действовал так:

1. компонент для управления всеми дочерними компонентами
2. хранилище для управления моделью, данными и полями
3. компонент для отображения значка и текста описания и кнопки
4. компонент для контекстного меню

, пожалуйста, учтите, что если вы используете шаблон MVVM, убедитесь, что все обязанности действийвыполняются хранилищем, а для изменения некоторых свойств используются поля observable, а если не используется состояние в компоненте менеджера, и проходят через proprs у дочерних элементов.