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使用
记录以防忘记
