
Animating programmatically with Redux and React - dominic_cocch
https://tech.instacart.com/animating-with-redux-and-react/
======
tracker1
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(
          'resize', 
          ()=>store.dispatch({
            type: 'WINDOW_RESIZE'
          })
        );
        window.addEventListener(
          'scroll', 
          ()=>store.dispatch({
            type: 'WINDOW_SCROLL'
          })
        );
    

NOTE: you should double-check your scroll position, as the scroll events
continue to fire as you hit the edge of the viewport.

~~~
dominic_cocch
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!

~~~
tracker1
Agreed, I didn't show it, but only have a single reducer handle those
actions... I have state.window.{size,position} that keeps those values, that
several components can then use for rendering.

I'm still curious as to when/if we may see the likes of aphrodite really take
off.

