import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import App from './components/app'
import {createStore} from 'redux'
import {counter} from './redux/reducers'
const store = createStore(counter);
console.log(store,store.getState());
function render(){
ReactDOM.render(<App store={store}/>,document.getElementById('root'));
}
render();
store.subscribe(render);
import {INCREMENT,DECREMENT} from './action-type'
export function counter(state = 0,action){
console.log('counter()',state,action)
switch(action.type){
case 'INCREMENT' :
return state + action.data;
case DECREMENT:
return state - action.data;
default:
return state;
}
}
export function xxx(){
}```
```javascript
import React, {Component} from 'react'
import {INCREMENT,DECREMENT} from '../redux/action-type'
export default class App extends Component{
state = {
count: 0
}
increment = () =>{
const number = this.select.value*1;
this.props.store.dispatch({type: 'INCREMENT',data:number});
}
decrement = () =>{
const number = this.select.value*1;
this.props.store.dispatch({type: DECREMENT,data:number});
}
incrementIfOdd = () =>{
const number = this.select.value*1;
const count = this.props.store.getState();
if(count %2 ===1){
this.props.store.dispatch({type: 'INCREMENT',data:number});
}
}
incrementIfAsync = () =>{
const number = this.select.value*1;
setTimeout(()=>{
this.props.store.dispatch({type: 'INCREMENT',data:number});
},1000)
}
render(){
const count = this.props.store.getState();
return (
<div>
<p>click {count} times</p>
<div>
<select ref={select => this.select = select}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<button onClick={this.incrementIfOdd}>increment if odd</button>
<button onClick={this.incrementIfAsync}>increment if async</button>
</div>
</div>
)
}
} ```