Архитектура состояния: разделение на категории или на действия?

Question

[wonderingpeanut]

Приветствую, товарищи.

У меня есть определенный объект, назовем его HeaderState, который должен хранить состояние двух, ээ, вещей? объектов? элементов!

Элементы следующие: мобильное меню и диалог авторизации.

Оба этих элемента имеют схожее состояние: isOpen, open (экшен открывающий элемент) и close (экшен закрывающий элемент).

Как лучше организовать структуру этого состояния?

type NoArgsNoReturn = () => void;
// разделение на категории - "что это за объект"
type HeaderStateCategory = { isOpen: boolean; open: NoArgsNoReturn; close: NoArgsNoReturn }
const headerState = {
  navMenu: HeaderStateCategory,
  authDialog: HeaderStateCategory
}

// разделение на категории - "что этот объект делает"
const headerState = {
  isOpen: { navMenu: boolean, authDialog: boolean }
  open: { navMenu: NoArgsNoReturn, authDialog: NoArgsNoReturn }
  close: { navMenu: NoArgsNoReturn, authDialog: NoArgsNoReturn }
}

Можно, конечно, полиморфизировать функции, оставив одну функцию "setOpen", которая бы, например, принимала в качестве аргумента ключ состояния и его новое значение, но это загромоздит код. Или нет?

const { open } = useHeaderState();
...
<button onClick={open.navMenu} /> // это выглядит лучше
<button onClick={() => setOpen('navMenu', true)} /> // чем это

В общем, товарищи, поделитесь вашими бест парктисами и вашим мнением, как вы думаете, какой вариант будет наилучшим.

Comments

[WbICHA]

// разделение на категории - "что этот объект делает"
const headerState = {
  isOpen: { navMenu: boolean, authDialog: boolean }
  open: { navMenu: NoArgsNoReturn, authDialog: NoArgsNoReturn }
  close: { navMenu: NoArgsNoReturn, authDialog: NoArgsNoReturn }
}

Это вообще хрень какая-то. Самая важная часть в самом конце.

[wonderingpeanut]

WbICHA, объясни, пожалуйста, почему? Что ты подразумеваешь под "самая важная часть в самом конце"? Как бы ты организовал структуру состояния?

[WbICHA]

wonderingpeanut, самое важное здесь — это к чему относятся свойства. НавМеню и аутхДиалог будут всегда порознь, это разные сущности. То, что в данный момент у них одинаковые свойства, это скорее совпадение, которое в будущем может мешать расширяться, если необходимо будет расширить один из них.
Более того, это ещё мешает нормальной деструктуризации.

const { navMenu: { isOpen, open, close } } = useHeaderState();
// vs
const { isOpen: { navMenu: isOpen }, open: { navMenu: open }, close: { navMenu: close } } = useHeaderState();

[wonderingpeanut]

WbICHA, имеет смысл, спасибо.

А что скажешь насчет

const headerState = {
  isNavMenuOpen: false,
  isAuthDialogOpen: false,
  // `set` это функция, которая принимает колбэк с параметром state, который в данном контексте
  // принимает значение headerState и обновляет указанные в возвращаемом объекте свойства
  setNavMenuOpen: (open?: boolean) => set((state) => ({ isNavMenuOpen: open ?? !state.isNavMenuOpen });
  setAuthDialogOpen: (open?: boolean) => set((state) => ({ isAuthDialogOpen: open ?? !state.isAuthDialogOpen });
}

На стэковерфлоу веду дебаты, мне говорят, что этот вариант - лучший, т.к. при использовании стейта в компонентах не надо будет мучаться с деструктуризацией всех свойств. Я думаю, что группировать как-то все же нужно, т.к. стейтом из, скажем, 3-х объектов с 5-ю свойствами будет проще управлять и проще доставать из него данные - ТС умница подскажет, что где лежит. А вот стейт из 15 отдельных свойств будет выглядеть как-то громоздко, что ли.

Ваше мнение на этот счет, мусьё?

[WbICHA]

wonderingpeanut, тут надо смотреть на картину целиком, чтобы понять что лучше. В целом, да, такой вариант лучше, правда подрихтовать не помешало бы. Опен заменить на изОпен, сделать его обязательным и убрать то, что за "??", иначе это ломает логику функций с префиксом сет.

[wonderingpeanut]

WbICHA, мне эстетически не нравится нагромождение стейта, когда все можно компактно слить в пару объектов. Чтош, полагаю нужно менять свои взгляды на эстетику))
"??" это оператор нулевого слияния. Выполняет выражение справа от ?? если выражение слева принимает значение null или undefined. Т.е. если я передал аргумент open, то isNavMenuOpen будет переданным open, в противном случае isNavMenu будет !isNavMenu.

[WbICHA]

wonderingpeanut,

"??" это оператор нулевого слияния. Выполняет выражение справа от ?? если выражение слева принимает значение null или undefined. Т.е. если я передал аргумент open, то isNavMenuOpen будет переданным open, в противном случае isNavMenu будет !isNavMenu.

Перечитай, что я написал...

[wonderingpeanut]

WbICHA, перечитывал наверное раз 10 и только сейчас, когда ты написал перечитать, я перечитал еще раз и понял, хаха. Оке, спасибо за интересную беседу. Если хочешь, оставь ответ на вопрос, я помечу его ответом на вопрос