Привет!
Да, без проблем, опиши деталивсе на rxjs
реализуем канбан доску, с обновлением по сокетам
Есть менеджер состояний.
В упрощенном варианте все базируется на трех сущностях
funnel - воронка
stage - этап
deal - сделка
Рассмотрим 2 структуры (псевдо разметка). И в качестве примера задача: меняется значение color у сущности stage, информация об этом пришла по сокетам
1 вариант структуры
funnel$: Observable<T> = {
name: T,
...,
stages: T[] [{
name: T,
color: T,
...,
deals: T[] [{
name: T,
...
}]
}
}
в случае изменения цвета, находим stage по id, изменяем значение color, затем $
funnel.next($funnel.value)
данные на клиенте обновились.
2 вариант
funnel$: Observable<T> = {
name$: Observable<T>,
...,
stages$: Observable<T[]> [{
name$: Observable<T>,
color$: Observable<T>,
...,
deals$: Observable<T[]> [{
name$: Observable<>,
...
}]
}
}
в случае изменения цвета, находим stage по id, изменяем значение color, затем $funnel.value.stages$.value[index].value.$
color.next(color);
данные на клиенте тоже обновились
Вопросы
1) как вообще обычно делают такие штуки, может какой-то из способов вообще не приемлем?
2) на мой взгляд у каждого способа есть свои плюсы и минусы. Глобально в первой проще намного работать с данными внутри компонент, во втором намного меньше рендерятся компоненты, завязанные на данных.
3) подозреваю, что выбор зависит от бизнес-задач, как часто будут приходить сообщения об изменении данных.Попробую ответить, если правильно понял
Для начала определим возможные проблемы:
1. Сложность написания кода
2. Зависания из-за ререндеринга
3. Зависания из-за обновления громадных сущностей
3 – только в том случае, если сущность очень объемная (сотни полей). Эту проблему можно обойти тем, что часть обхемных атрибутов (например связи) выносить в отдельное место и связывать по id (как нормализация в БД) или превращать тоже в Observable (то есть не все поля, а только это)
2 – в первом случае, у вас будет одна большая подписка, в которую будет падать полный объект и если не разрулить на уровне компонентова понимание \"(не)изменилось\" будет перерисовывать вееесь элемент и все его дочерние компоненты. Тут соответственно или проверка на изменение или, если компонент небольшой, забить хрен и не париться
1 – первый вариант намного проще
Поэтому, наверное, я бы сделал так: используете первый вариант, не делаете никаких оптимизаций, смотрите на то виснет или не виснет интерфейс при частых обновлениях (например, окажется, что частота обновления настолько большая, что ререндеринг слишком чато происходит)
Далее начинаете писать сравнение на изменение в элементах
Потом превращаете какие-то отдельные атрибуты сущности в Observable (большими кусками) и делаете на них отдельную подписку💬
Вопросы от подписчиков 💬
Прекрасная задачка на тему структуры менеджера состояний на фронте
Не стесняйтесь писть и вы свои вопросы мне в ЛС (
@davidshekunts) с удовольствием отвечуПривет! Сможешь помочь консультацией по менеджеру состояний на фронте?