權當暫記
日后再行補充完善，若有閱讀者，請翻到下文黃色標題‘從這里開始’起閱讀。本文以一個最簡單的demo進行注釋性理解，全部拷貝下去，就能運行的一個demo。
Rudex在我看來最本質做的事情就是將所有的State屬性統一存儲（一個屬性就是一個注冊到store的Reducer），然后用戶觸發事件，通過Redux修改State的狀態（這里一定記住State只有一個，唯一唯一唯一），通過State狀態影響Props狀態，Props是與視圖（JSX）直接掛鈎的，從而達到刷新渲染視圖的目的。
然后其中的關鍵就是修改State的狀態，Redux構建出了Action,Reducer,connect(mapStateToProps,mapDispatchToProps)(component)，container等這些玩意兒搞了一套規則進行“規矩化”的修改狀態，其實也就是分工了下，分成了幾個層級。暫且理解到這，新手學習，拙見若有誤，前端娛樂圈的朋友請不要憐惜我，評論處見。一切為了學習進步。
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
// React component 視圖組件（component）的實現，定義了props（包括簡單的數值，字符串還有函數對象）
class Counter extends Component {
render() {
const { value, onIncreaseClick } = this.props
return (
<div>
<span>{value}</span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
//對props進行限定，如類型限定
Counter.propTypes = {
value: PropTypes.number.isRequired,
onIncreaseClick: PropTypes.func.isRequired
}
// Action 可以看作reducer中業務邏輯的路由，在mvc里不也是你要定義幾個接口，就寫幾個action嘛，這個完全可以看作把action的名稱單獨拿出來作為一個路由的存在了，以至於這里沒有單獨的如mvc里的路由模塊。
const increaseAction = {
type: 'increase'
}
1.2、 a、Reducer 定義了（初始化了）state，初始化了state（一個Reducer就是一個state里的一個屬性，屬性類型也是這里定義的，這個demo如果console.log(state);則結果為state:{counter:{count:0}}
//所有注冊在store中的Reducer名稱組合起來就是全局的state對象）才可以在下面的connect中的mapStateToProps、mapDispatchToProps中使用state
// b、Reducer 定義了一個或多個action的處理邏輯，而這多個action的處理邏輯怎么區分的呢，是靠傳進來的參數action的一個屬性字段type進行唯一性區分（可以將換這個type看作action之於Reducer的路由）
// c、
//這么看，其實Reducer就相當於一個controller，里面有多個action處理邏輯。
//好的，再回頭看provider， Provider在根組件（App）外面包了一層，這樣一來，App的所有子組件就默認都可以拿到state了。
//一結束，看二。
function counter(state = {
count: 0
}, action) {
const count = state.count
switch (action.type) {
case 'increase':
return {
count: count + 1
}
default:
return state
}
}
1.1、 Store 頂級，全局唯一，根據reducer生成的store“實例”，暫且只看作一個與reducer進行匹配的一種模式，不深究其作為狀態樹什么的地位。
//所以主要是看reducer（這里的ruducer實例：counter）里有什么。
const store = createStore(counter)
2.2、 Map Redux state to component props prop對象用state的值進行操作后賦上值，這里的state對象里面有什么，哪兒定義的呢？就是最上面講store的時候，store里的reducer里定義的。想起來了吧。
function mapStateToProps(state) {
return { value: state.count }
}
2.3、Map Redux actions to component props事件綁定，但是呢，不直接寫邏輯，而是用dispatch與事先定義的action進行關聯。action相當於節點路由了，根據路由（action.type）在reducer（相當於controller）找到對應處理邏輯。
// 這樣一來，事先定義的action-->reducer-->store就跟我們最頂層的dom關聯起來了。說白了就是定義了套規則，在我粗鄙的看來，也是個mvc。
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}
2.1Connected Component 、看了這行代碼，先不管其中的參數啥意義，我們首先了解這行代碼意義是什么，就是前面說的關聯。
// Counter是上面定義的視圖組件，你就直接看成這個是dom，dom里面需要顯示東西（props）跟觸發事件（函數類型props），顯示跟觸發這些東西就是定義在其中兩個參數中。
// 第一個參數mapStateToProps作用:顯示東西。簡答說就是通過state作為輸入參數，進行一堆操作或者不操作，給props賦值（因為我們顯示東西總是跟props關聯的）
// 第二個參數mapDispatchToProps作用：事件綁定。
const App = connect(mapStateToProps, mapDispatchToProps)(Counter)
這里開始看起
//一、Provider是react-redux提供的，先不深究。 store實例作為根節點元素與我們的組件進行‘綁定’，往上看啥是strore
//二、上面說的主要是定義了一堆規則進行狀態state，action及其處理邏輯，現在要跟我們的組件結合起來，即上面最終的處理邏輯如何關聯我們某個dom的事件觸發（如onClick），這是我們最關心的。
// 所以看我們的App組件
class RudexDemo extends Component {
render() {
return (
<Provider store={store}>
<App />
</Provider>
);
}
}
export default RudexDemo;
總結注意點：
1、State的初始化在哪兒呢？答案：所有的Reducer（注意是要注冊要Store上的）構成了這個State，Reducer名稱為State屬性的名稱，Reducer中第一個參數State里定義的參數類型就是State屬性的類型。這個很重要！
2、State是一個全局的狀態對象，這個對象是唯一的唯一的唯一的，跟component，Reducer什么的沒有直接關聯。記住就一個State，我們所有的操作都是為了改變這個State里面的部分屬性值，從而達到刷新渲染頁面的目的。
3、所有在component中需要與reducer掛鈎的事情，都通過props讓containers里去進行調用。這樣分離合乎規矩。
原文：http://www.cnblogs.com/joeymary/p/7820047.html
個人公眾號：
