javascript 代码
import React, {Component} from 'react';
import {createStore, bindActionCreators} from 'redux';
function reducer(state, action) {
if (typeof state === 'undefined') return {name: '', num: 0};
switch(action.type) {
case 'changeName':
return Object.assign({}, state, action.payload);
case 'access':
return Object.assign({}, state, {num: ++state.num});
default:
return state;
}
}
const store = createStore(reducer, {name: '', num: 0});
let actions = {
changeName(name) {
return {
type: 'changeName',
payload: {name}
};
},
assess() {
return {
type: 'access'
};
}
}
/*将UI事件和派发action巧妙的结合了起来*/
actions = bindActionCreators(actions, store.dispatch);
class Test extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
num: 0
};
}
componentDidMount() {
store.subscribe(() => {
console.log(store.getState());
/*this.setState(store.getState(), function() {
console.log(this.state.num);
});*/
this.setState(function() {
return store.getState();
}, function() {
/*state更新完毕后执行回调*/
console.log(this.state.num);
});
});
}
render() {
return (
<div>
<p>{this.state.name}</p>
<p>{this.state.num}</p>
<input type="text" onChange={(event) => actions.changeName(event.target.value)} />
<button onClick={event => actions.assess()}>access</button>
</div>
);
}
}
export default Test;