SOURCE

// redux store
const counterStore = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// 创建 store
const store = Redux.createStore(counterStore)

// 计数组件
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.incrementAsync = this.incrementAsync.bind(this)
    this.incrementIfOdd = this.incrementIfOdd.bind(this)
  }
  
  static propTypes = {
    value: PropTypes.number.required,
    onIncrement: PropTypes.func.required,
    onDecrement: PropTypes.func.required,
  }
  
  incrementAsync () {
    setTimeout(this.props.onIncrement, 1000)
  }
  
  incrementIfOdd () {
    if (this.props.value % 2 !== 0) {
      this.props.onIncrement()
    }
  }
  
  render() {
    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>)
  }
}

// 渲染组件
const render = () => ReactDOM.render(
   <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  document.getElementById('app')
)

render();

store.subscribe(render)

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>  
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.min.js"></script>

<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>
<srcipt src="https://cdn.bootcss.com/react-redux/7.1.0-rc.1/react-redux.min.js"></srcipt>

<div id="app"></div>