来源：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
import store=>onclick=>dispatch事件=>执行reducer=>store.subscribe
React-Redux组件：UI 组件（负责 UI 的呈现）和容器组件（负责管理数据和逻辑）。
React-Redux源码之connect：
var connect = createConnect()=>
function createConnect() {
connectHOC=connectAdvanced
return function connect(mapStateToProps, mapDispatchToProps, mergeProps) {
return connectHOC()=>return connectAdvanced()=>function connectAdvanced(selectorFactory) {
return function wrapWithConnect(WrappedComponent) {
return hoistNonReactStatics(Connect, WrappedComponent)=>var hoistNonReactStatics = createCommonjsModule(function (module, exports) {
})
})
}
}
}
一、UI 组件
1、UI 组件有以下几个特征。
（1）只负责 UI 的呈现，不带有任何业务逻辑
（2）没有状态（即不使用this.state这个变量）
（3）所有数据都由参数（this.props）提供
（4）不使用任何 Redux 的 API
（6）下面就是一个 UI 组件的例子。
const Title = value => <h1>{value}</h1>;
2、因为不含有状态，UI 组件又称为"纯组件"，即它跟纯函数一样，纯粹由参数决定它的值。
二、容器组件
1、容器组件有以下几个特征。
（1）负责管理数据和业务逻辑，不负责 UI 的呈现
（2）带有内部状态
（3）使用 Redux 的 API
三、UI 组件和容器组件的结合
1、如果一个组件既有 UI 又有业务逻辑，那么将它拆分成两层结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。
2、React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。
四、connect()
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。
import { connect } from 'react-redux'
const myContainerComponent = connect(
mapStateToProps,
mapDispatchToProps
)(myUIComponent)
上面代码中，myUIComponent是 UI 组件，myContainerComponent就是由 React-Redux 通过connect方法自动生成的容器组件。connect方法接受两个参数：mapStateToProps和mapDispatchToProps,它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将外部数据state映射成 UI 组件的属性（props）;后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action对象，从 UI 组件传出去。
五、mapStateToProps()
1、mapStateToProps是一个函数。它的作用是建立一个从外部state对象到 UI 组件的props对象的映射关系，执行后返回一个对象{prop1:state.state1,prop2:state.state2}。
2、connect 让 mapStateToProps 订阅Store，即把前者放进后者的属性数组里，监听器发现state更新的时候，就执行“发布函数”，进而遍历数组并执行；重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。注：订阅即“绑定”，connect执行引发subscribe执行。
3、mapStateToProps的第一个参数总是state对象，还可以使用第二个参数ownProps，代表容器组件的props对象。使用后，如果容器组件的参数发生变化，也会引发 UI 组件重新渲染。
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.showFilter
//active: state.active，这种情况不需要第2个参数ownProps
}
}
4、如果connect方法省略mapStateToProps参数，那么UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。
六、mapDispatchToProps()
1、mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了用户的哪些操作应该当作 Action传给 Store。即把用户对组件的操作映射成action。它可以是一个函数，也可以是一个对象。
2、如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。从下面代码可以看到，mapDispatchToProps作为函数，应该返回一个对象，该对象的“每个”键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。
const mapDispatchToProps = (dispatch,ownProps) => {
return {
//触发UI组件的事件比如onClick，执行函数myClick，在纯函数里，根据action.type给state（filter）赋值，页面刷新。
myClick: () => {
dispatch({
type: 'myFilter',
filter: ownProps.filter//从属性对象中获取
});
}
};
}
3、如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。
const mapDispatchToProps = {
myClick: (filter) => {//把属性作为参数传入
type: 'myFilter',
filter: filter
};
}
七、<Provider> 组件
connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。一种解决方法是将state对象作为参数，传入容器组件。但是容器组件可能在很深的层级，一级级将state传下去就很麻烦。React-Redux 提供Provider组件，可以让容器组件拿到state。在下面的代码中，在根组件外面包了一层Provider，App的所有子组件都可以拿到state了。
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import myApp from './reducers'
import App from './components/App'
let store = createStore(myApp);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('rootElement')
)
它的原理是React组件的context属性，store放在了上下文对象context上面。源码如下：
class Provider extends Component {
getChildContext() {
return {
store: this.props.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: React.PropTypes.object
}
React-Redux自动生成的容器组件的代码，就类似下面这样，然后子组件就可以从context拿到store，代码大致如下。
class myContainerComponent extends Component {
componentDidMount() {
const { store } = this.context;
this.unsubscribe = store.subscribe(() =>
this.forceUpdate()
);
}
render() {
const props = this.props;
const { store } = this.context;
const state = store.getState();
// ...
}
}
myContainerComponent.contextTypes = {
store: React.PropTypes.object
}
七、实例：计数器
1、下面是一个计数器组件实例，是一个纯 UI 组件。这个 UI 组件有两个参数：value和onIncreaseClick。前者需要从state计算得到，后者需要向外发出 Action。
class Counter extends Component {
render() {
const { value, onIncreaseClick } = this.props
return (
<div>
<span>{value}</span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
2、下面定义value到state的映射，以及onIncreaseClick到dispatch的映射。
function mapStateToProps(state) {
return {
value: state.count/*此处可以是函数的执行结果*/
}
}
function mapDispatchToProps(dispatch) {
return {
//触发UI组件的事件比如onclick，执行函数onIncreaseClick，在纯函数里，根据action.type的不同给相关state赋值，页面刷新
onIncreaseClick: () = > dispatch(action)/*参数可以是一个对象{ type: 'increase' }*/
}
}
3、行为生成器（Action Creator）
const action = { type: 'increase' }
4、使用connect方法生成容器组件。
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
5、定义组件的 Reducer（纯函数）。
function counter(state = { count: 0 }, action) {
const count = state.count
switch (action.type) {
case 'increase':
return { count: count + 1 }
default:
return state
}
}
6、生成store对象，在根组件外面包一层Provider。
import { loadState, saveState } from './localStorage';
const persistedState = loadState();
const store = createStore(
myApp,
persistedState
);
store.subscribe(throttle(() => {
saveState({
todos: store.getState().todos,
})
}, 1000))
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('rootElement')
);
九、React-Router 路由库。使用React-Router的项目，也是用Provider在Router外面包一层，毕竟Provider的唯一功能就是传入store对象。
const Root = ({ store }) => (
<Provider store={store}>
<Router>
<Route path="/" component={App} />
</Router>
</Provider>
);
十、REACT事件与HTML事件的区别
REACT事件与HTML事件不同，REACT事件on之后第一个字母是大写的！比如REACT的点击事件是<button onClick={myClick}>点击</button>，而HTML的点击事件是<button onclick="myClick()">点击</button>。
注：订阅-发布模式：
1、给DOM对象增加一个自定义事件属性：obj.selfEvent=[];
2、定义一个订阅（绑定）函数、多个自定义函数、一个发布函数
3、多次执行订阅（绑定）函数，把多个自定义函数放进（1）中的数组里
4、执行发布函数，找到自定义事件属性，遍历执行数组里的自定义函数
总之，在各个适当的位置，执行“订阅（绑定）函数”，把(自定义)函数放进DOM对象的属性数组，等待合适的时机用“发布函数”遍历执行。
另：flux只是一种单向数据流思想，它不是一个具体的框架。