Могу ли я хранить ссылку в магазине Redux, или это считается плохой практикой?

Question

Контекст:

Краткое объяснение, почему я даже спрашиваю об этом. У меня есть приложение React с Redux. У меня есть компонент, который показывает список чатов. У меня также есть Appbar из Material UI с позицией липкой. Кроме того, список chatRooms является липким, поэтому он придерживается левой стороны, не прокручивая список чатов в середине. Это не будет работать c, потому что список chatRooms будет прятаться за AppBar или, точнее, перекрываться с ним. Поэтому мне нужно установить значение top для chatRooms в соответствии с высотой панели приложения.

Вопрос:

Моя идея состояла в том, чтобы добавить useDimensions крючок и измерить высоту панели инструментов. Мне нужно передать ссылку на панель приложений. А затем установите top значение chatRooms равным этой высоте. Но я не могу передать это непосредственно компоненту. Итак, мой вопрос:

Могу ли я сохранить ссылку в хранилище резервов или это считается плохой практикой? Если да, то как решить эту проблему?

Answer 1

Не храните ссылку в вашем магазине редуксов, есть лучшие способы решить эту проблему. У меня есть макет, похожий на ваш, и он работает только с css. Вам следует избегать липкости из-за этой проблемы перекрытия и использовать вместо нее сетку css.

Вот мой css, поскольку вы можете видеть, что нет липкой сетки, а есть только сетка на всю страницу:

/* Main grid container (2 columns, 2 rows) */
#root {
  height: 100%;
  display: grid; 
  grid-template-columns: 220px 1fr; 
  grid-template-rows: 56px 1fr;
}
/* Top App bar, height=56px */
header { 
  grid-column: span 2; 
}
/* List of chatRooms, width=220px */
aside { 
  overflow-x: hidden;
  overflow-y: auto; 
}
/* List of chats */
main { 
   overflow-y: auto; 
}

Если вы хотите, чтобы эта сетка занимала всю страницу, вам нужно добавить:

html { height: 100% }
body { height: 100% }