Should Reacts / Flux repositories be snapshots of the entire state of the GUI?

Question

Short question: it seems that the state of the application can be completely serialized from the React / Flux repository. I saw this with input values ​​and other things, but what about animation or freezing? Should I use the classic CSS selector :hoverfor hover effects, or should I use mouseenter and -leave events and save the hover states in my store?

Answer 1

If your hover effects are small, like a cursor pointer, etc., I would use mostly CSS. If you want to do more DOM manipulations, I would use React. You should not use the repository to determine the state of a component; it should distribute data only to the components after the action has occurred. This means that it is the component that needs to know what state it is in now, and then determine what should happen. Here is a small example with a "dumb" component that does not have any data updates other than 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 data and perform other data manipulations inside this component to make it a smarter component.