redux与redux-react使用示例

Posted 2020-08-09 向_日_葵

redux使用

 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} times
18                     {‘ ‘}
19                     <button onClick={onIncrement}>
20                       +
21                     </button>
22                     {‘ ‘}
23                     <button onClick={onDecrement}>
24                       -
25                     </button>
26                     {‘ ‘}
27                     <button onClick={this.incrementIfOdd}>
28                       Increment if odd
29                     </button>
30                     {‘ ‘}
31                     <button onClick={this.incrementAsync}>
32                       Increment async
33                     </button>
34                   </p>
35                 )
36               }
37             });
38 function counter(state, action) {
39         if (typeof state === ‘undefined‘) {
40           return 0
41         }
42 
43         switch (action.type) {
44           case ‘INCREMENT‘:
45             return state + 1
46           case ‘DECREMENT‘:
47             return state - 1
48           default:
49             return state
50         }
51       }
52 
53       var store = Redux.createStore(counter)
54     function render(){
55         ReactDOM.render(
56             <div><Counter value={store.getState()} onIncrement={function(){store.dispatch({ type: ‘INCREMENT‘ })}} onDecrement={function(){store.dispatch({ type: ‘DECREMENT‘ })}}/></div>,
57               document.body
58         );
59     }
60         
61     $(document).ready(function(){
62         render();
63         store.subscribe(render);
64     });
65     </script>

redux使用

redux-react使用

 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} times
18                     {‘ ‘}
19                     <button onClick={onIncrement}>
20                       +
21                     </button>
22                     {‘ ‘}
23                     <button onClick={onDecrement}>
24                       -
25                     </button>
26                     {‘ ‘}
27                     <button onClick={this.incrementIfOdd}>
28                       Increment if odd
29                     </button>
30                     {‘ ‘}
31                     <button onClick={this.incrementAsync}>
32                       Increment async
33                     </button>
34                   </p>
35                 )
36               }
37             });
38 
39     function counter(state, action) {
40         if (typeof state === ‘undefined‘) {
41           return 0
42         }
43 
44         switch (action.type) {
45           case ‘INCREMENT‘:
46 
47             return state + 1
48           case ‘DECREMENT‘:
49             return state - 1
50           default:
51             return state
52         }
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.body
75         );
76     }
77         
78     $(document).ready(function(){
79         render();
80         
81     });
82     </script>

redux-react使用

记录以防忘记