redux与redux-react使用示例

redux使用

    <script type="text/babel">
     var Counter=React.createClass({

             incrementIfOdd:function(){
                 if (this.props.value % 2 !== 0) {
                   this.props.onIncrement();
                 }
               },
               incrementAsync:function() {
                 setTimeout(this.props.onIncrement, 1000);
               },
               render:function() {
                 const { value, onIncrement, onDecrement } = this.props;

                 return (
                   <p>
                     Clicked: {value} times
                     {' '}
                     <button onClick={onIncrement}>
                       +
                     </button>
                     {' '}
                     <button onClick={onDecrement}>
                       -
                     </button>
                     {' '}
                     <button onClick={this.incrementIfOdd}>
                       Increment if odd
                     </button>
                     {' '}
                     <button onClick={this.incrementAsync}>
                       Increment async
                     </button>
                   </p>
                 )
               }
             });
 function counter(state, action) {
         if (typeof state === 'undefined') {
           return 0
         }

         switch (action.type) {
           case 'INCREMENT':
             return state + 1
           case 'DECREMENT':
             return state - 1
           default:
             return state
         }
       }

       var store = Redux.createStore(counter)
     function render(){
         ReactDOM.render(
             <div><Counter value={store.getState()} onIncrement={function(){store.dispatch({ type: 'INCREMENT' })}} onDecrement={function(){store.dispatch({ type: 'DECREMENT' })}}/></div>,
               document.body
         );
     }

     $(document).ready(function(){
         render();
         store.subscribe(render);
     });
     </script>

redux使用

redux-react使用

 <script type="text/babel">
     var Counter=React.createClass({

             incrementIfOdd:function(){
                 if (this.props.value % 2 !== 0) {
                   this.props.onIncrement();
                 }
               },
               incrementAsync:function() {
                 setTimeout(this.props.onIncrement, 1000);
               },
               render:function() {
                 const { value, onIncrement, onDecrement } = this.props;

                 return (
                   <p>
                     Clicked: {value} times
                     {' '}
                     <button onClick={onIncrement}>
                       +
                     </button>
                     {' '}
                     <button onClick={onDecrement}>
                       -
                     </button>
                     {' '}
                     <button onClick={this.incrementIfOdd}>
                       Increment if odd
                     </button>
                     {' '}
                     <button onClick={this.incrementAsync}>
                       Increment async
                     </button>
                   </p>
                 )
               }
             });

     function counter(state, action) {
         if (typeof state === 'undefined') {
           return 0
         }

         switch (action.type) {
           case 'INCREMENT':

             return state + 1
           case 'DECREMENT':
             return state - 1
           default:
             return state
         }
       }

       var store = Redux.createStore(counter)
     function render(){
             var TESTCounter=ReactRedux.connect(function(state, ownProps){
                 return {value:state}
             },function(dispatch, ownProps){
                 return Redux.bindActionCreators({
                     onIncrement:function(){return { type: 'INCREMENT' }}
                     ,
                     onDecrement:function(){
                         return { type: 'DECREMENT' };
                     }
                 },dispatch)
             })(Counter);

         ReactDOM.render(

             <div><ReactRedux.Provider store={store}>
                 <TESTCounter />
             </ReactRedux.Provider></div>,
               document.body
         );
     }

     $(document).ready(function(){
         render();

     });
     </script>

redux-react使用

记录以防忘记