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> & nbsp;
< 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>
)
}
} `` `