CODEWITHSUNDEEP
reactjsredux
GeraltDieSocke
GeraltDieSocke

Reputation: 1618

Can I store a ref in Redux store, or is it considered bad practice?

The context:

Short explanation why I'm even asking this. I have a React App with Redux. I have a component that shows a List of Chat Rooms. I also have a Appbar from Material UI with a position of sticky. Also the list of chatRooms is sticky so it sticks to the left side, without scrolling with the list of chats in the middle. This won't work ofc because the list of chatRooms will hide behind the AppBar or better said, overlap with it. So I need to set the top value for chatRooms according to the AppBar's height.

The question:

My idea was to add useDimensions hook and measure the height of the AppBar. I need to pass a ref to the appbar. And then set the top value of chatRooms equal to this height. But I can't pass this directly to the component. So my question is:

Can I store the ref in redux store, or is it considered bad practice? If so how to solve this problem?

Upvotes: 2

Views: 147

Answers (1)

HermitCrab
HermitCrab

Reputation: 3274

Don't store a ref in your redux store, there are better ways to fix this problem. I have a layout similar than yours and it works with css only. You should avoid sticky because of this overlap problem and use a css grid instead.

Here is my css, as you can see there are no sticky, but just a full page grid:

/* 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; 
}

If you want this grid to fill the whole page, then you need to add:

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

Upvotes: 3

Related Questions