Should Reacts/Flux' stores be a snapshot of the whole state of a GUI?

Question

Short question: It looks like the state of an app can be serialized completely from a React/Flux store. I've seen this with input values and other stuff, but what is with animations or hover effects? Should I use a classic :hover CSS selector for hover effects or should I use mouseenter and -leave events and save hover states in my store?

Answer 1

If your hover effects are small, like pointer on cursor, etc., I would use mostly CSS. If you want to do bigger DOM manipulations I would use React. You should not use the store to determine the state of a component, it should only distribute data around to the components after an action has occurred. This means that it is the component that should know which state it currently is, and then determine what should happen. Here is a small example with a "dumb" component which does not have any kind of data updates, except its own state.

var SmallTooltip = React.createClass({

 getInitialState: function () {
   return {
     showTooltip: false
   };
 },

 onMouseEnter: function () {
   this.setState({
     showTooltip: true
   });
 },

 onMouseLeave: function () {
   this.setState({
     showTooltip: false
   });
 },

 render: function () {
   var toolTipClass = !this.state.showTooltip ? 'tooltip hidden' : 'tooltip';
   return (
    <span onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className='someCoolWrapperClass'>
      <span className={toolTipClass}>
        This is shown when you hover over the span
      </span>
    </span>
   );
 }
});

You can easily send in data and do other data manipulations within this component to make it a smarter component.