Animating programmatically with Redux and React

Post by tracker1 » Mon, Jul 11, 2016, 5:42 PM UTC

    window.addEventListener(
      'resize', 
      ()=>store.dispatch({
        type: 'WINDOW_RESIZE'
      })
    );
    window.addEventListener(
      'scroll', 
      ()=>store.dispatch({
        type: 'WINDOW_SCROLL'
      })
    );

Post by tracker1 » Mon, Jul 11, 2016, 9:35 PM UTC

dominic_cocch wrote: post #3

tracker1 wrote: post #2

I've taken a different approach for similar needs in the past... I have the current window size and scroll position in my state, and have windows events for resize/onscroll update said values... from there, I can have pure rendering that uses the values... Also, but centralizing the size/position values, I can have multiple components that handle their rendering as appropriate internally. window.addEventListener( 're…

Very cool. We do something very similar on Instacart's site. Our main Redux store and header component track window size and scroll position so that all components on the site have that info and can react to if they need. Works wonderfully!