javascript - Is there a better way to handle window properties & child components in React/Redux? -

so have <layout> component. based on page, loads in different child components. in those, might have tabs , might not.

this changes way want scrolling work, , therefore markup of scrolling.

i ended making sure each child component had element <div id="scroll-container">

then within <layout> component did this:

componentdidmount() {    this._updateheight();   window.addeventlistener('resize', this._updateheight, false); },  componentdidupdate() {   this._updateheight(); },  _updateheight() {   var container = document.getelementbyid('scroll-container');    if (container ) {     let height = window.innerheight - container.getboundingclientrect().top;     container.style.height = height + 'px';   } }, 

i know there helpers things getboundintclientrec, going use later. right wondering general flow.

i thinking can make component scroll-container wraps wherever need that, i'd need

<scrollcontainer {...this.props}>   <childihadthereanyway> </scrollcontainer> 

meanwhile component "supposed" know window? <layout> top level think it's fine there, unsure children , such.

basically unsure best connecting global window size aspect of components position.

this method not perfect works fine me.

my code has root component application, if you're using react-router have 1 too, otherwise it's easy add it.

i have reducer , actions managing window properties screen resolution or orientation. lets call them windowreducer , windowactions.

in root component i've register event handlers like:

componentdidmount() {   window.addeventlistener('resize', this.onwindowresolutionchange, false); }  onwindowresolutionchange() {   windowactions.onresolutionchange({     width: window.innerwidth,     height: window.innerheight   }); } 

as other redux actions onresolutionchange dispatches action windowreducer sets new window width , height.

so, them in component can pass them container's state other props.

the worst in approach fact state changes witch leads re-rendering of components. you're using functions debounce avoid it. if 1 of you're component needs immediate changes , other debounced, end (as do) 2 different actions setting different values state (width , debouncedwidth).