1    <script type="text/babel"> 2     var Counter=React.createClass({ 3          4             incrementIfOdd:function(){ 5                 if (this.props.value % 2 !== 0) { 6                   this.props.onIncrement(); 7                 } 8               }, 9               incrementAsync:function() {10                 setTimeout(this.props.onIncrement, 1000);11               },12               render:function() {13                 const { value, onIncrement, onDecrement } = this.props;14 15                 return (16                   <p>17                     Clicked: {value} times18                     {‘ ‘}19                     <button onClick={onIncrement}>20                       +21                     </button>22                     {‘ ‘}23                     <button onClick={onDecrement}>24                       -25                     </button>26                     {‘ ‘}27                     <button onClick={this.incrementIfOdd}>28                       Increment if odd29                     </button>30                     {‘ ‘}31                     <button onClick={this.incrementAsync}>32                       Increment async33                     </button>34                   </p>35                 )36               }37             });38 function counter(state, action) {39         if (typeof state === ‘undefined‘) {40           return 041         }42 43         switch (action.type) {44           case ‘INCREMENT‘:45             return state + 146           case ‘DECREMENT‘:47             return state - 148           default:49             return state50         }51       }52 53       var store = Redux.createStore(counter)54     function render(){55         ReactDOM.render(56             <div><Counter value=http://www.mamicode.com/{store.getState()} onIncrement={function(){store.dispatch({ type: ‘INCREMENT‘ })}} onDecrement={function(){store.dispatch({ type: ‘DECREMENT‘ })}}/></div>,57               document.body58         );59     }60         61     $(document).ready(function(){62         render();63         store.subscribe(render);64     });65     </script>

 1 <script type="text/babel"> 2     var Counter=React.createClass({ 3          4             incrementIfOdd:function(){ 5                 if (this.props.value % 2 !== 0) { 6                   this.props.onIncrement(); 7                 } 8               }, 9               incrementAsync:function() {10                 setTimeout(this.props.onIncrement, 1000);11               },12               render:function() {13                 const { value, onIncrement, onDecrement } = this.props;14 15                 return (16                   <p>17                     Clicked: {value} times18                     {‘ ‘}19                     <button onClick={onIncrement}>20                       +21                     </button>22                     {‘ ‘}23                     <button onClick={onDecrement}>24                       -25                     </button>26                     {‘ ‘}27                     <button onClick={this.incrementIfOdd}>28                       Increment if odd29                     </button>30                     {‘ ‘}31                     <button onClick={this.incrementAsync}>32                       Increment async33                     </button>34                   </p>35                 )36               }37             });38 39     function counter(state, action) {40         if (typeof state === ‘undefined‘) {41           return 042         }43 44         switch (action.type) {45           case ‘INCREMENT‘:46 47             return state + 148           case ‘DECREMENT‘:49             return state - 150           default:51             return state52         }53       }54 55       var store = Redux.createStore(counter)56     function render(){57             var TESTCounter=ReactRedux.connect(function(state, ownProps){58                 return {value:state}59             },function(dispatch, ownProps){60                 return Redux.bindActionCreators({61                     onIncrement:function(){return { type: ‘INCREMENT‘ }}62                     ,63                     onDecrement:function(){64                         return { type: ‘DECREMENT‘ };65                     }66                 },dispatch)67             })(Counter);68 69         ReactDOM.render(70     71             <div><ReactRedux.Provider store={store}>72                 <TESTCounter />73             </ReactRedux.Provider></div>,74               document.body75         );76     }77         78     $(document).ready(function(){79         render();80         81     });82     </script>