功能：计数器组件，每点击按钮，显示数字加1
组件：
****1. UI组件：又称"纯组件"，由参数决定它的值。****
只负责 UI 的呈现，不带有任何业务逻辑。
没有状态（即不使用this.state这个变量）。
所有数据都由参数（this.props）提供。
不使用任何 Redux 的 API。
****2.容器组件：负责管理数据和逻辑****
负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API
主要函数：
connect: 将这两种组件连起来。以下是两种组件。
(1) 输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数
(2) 输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。
provide组件: 可以让容器组件拿到state对象（外部的数据），才能生成 UI 组件的参数。这样provider包含的所有子组件就默认都可以拿到state了。

import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

// React component
class Counter extends Component {
  render() {
    //定义里面的两个函数value，onIncreaseClick
    const { value, onIncreaseClick } = this.props
    return (
    <div>
      //UI组件
      <span>{value}</span>
      //容器组件
      <button onClick={onIncreaseClick}>Increase</button>
    </div>
    )
  }
}
//counter中函数内的属性设置
Counter.propTypes = {
  value: PropTypes.number.isRequired,
  onIncreaseClick: PropTypes.func.isRequired
}

// Action
const increaseAction = { type: 'increase' }

// Reducer
function counter(state = { count: 0 }, action) {
  const count = state.count
  switch (action.type) {
    case 'increase':
      return { count: count + 1 }
    default:
      return state
   }
}

// Store
const store = createStore(counter)

// Map Redux state to component props
//value到state的映射 
function mapStateToProps(state) {
  return {
    value: state.count
  }
}
// Map Redux actions to component props
//onIncreaseClick到dispatch的映射
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

// Connected Component
//将这输入逻辑与输出逻辑组件连接起来
const App = connect(
   mapStateToProps,
   mapDispatchToProps
)(Counter)

ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
)