React-redux 是一個(gè)封裝的專用庫(kù)，它給redux的提供了更多的API寄症，提升了便利性。
1. 添加 React-redux 到項(xiàng)目
react-redux并不是內(nèi)置在redux里的，因此要單獨(dú)添加：
cd到項(xiàng)目目錄，執(zhí)行
yarn add react-redux
2. React-redux 的組件拆分規(guī)范
react-redux把組件分成了兩個(gè)大類：UI組件 和 容器組件
UI組件
UI組件的特征有：
- 只負(fù)責(zé)UI渲染，不帶有業(yè)務(wù)邏輯
- 是典型的無(wú)狀態(tài)組件课幕，沒(méi)有state厦坛，所有數(shù)據(jù)由props提供
- 不使用Redux的API
容器組件
容器組件的特征有：
- 負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé)UI渲染
- 有內(nèi)部狀態(tài)
- 使用Redux的API
對(duì)于一個(gè)既有UI又有業(yè)務(wù)邏輯的組件乍惊，通常用容器組件將UI組件包住杜秸，容器組件將數(shù)據(jù)傳給
UI組件，由UI組件來(lái)渲染視圖润绎。
React-redux 的組件拆分
React-redux規(guī)定撬碟，所有的UI組件由我們來(lái)編寫(xiě)诞挨，而容器組件由React-redux自動(dòng)生成。我們可以把組件的狀態(tài)管理全都交給它來(lái)完成呢蛤。
3. 應(yīng)用 React-redux
首先引入connect到組件中惶傻，它是一個(gè)方法；
import { connect } from 'react-redux';
然后通過(guò)connect方法對(duì)UI組件進(jìn)行和容器組件進(jìn)行連接：
connect( mapStateToProps, mapDispatchToProps )( TodoList );
這個(gè)連接是什么意思呢其障？
這里假設(shè)我們寫(xiě)好了一個(gè)名為TodoList的UI組件银室，
mapStateToProps 定義了組件的輸入邏輯，即組件的公共數(shù)據(jù)state映射到UI組件中props的規(guī)則励翼。
mapStateToProps是一個(gè)函數(shù)蜈敢，通過(guò)返回對(duì)象的鍵值對(duì)來(lái)聲明這種映射關(guān)系。
const mapStateToProps = (state) => {
return {
inputValue: state.inputValue,
list: state.list
}
};
mapDispatchToProps定義了組件的輸出邏輯汽抚，即組件如何通過(guò)action對(duì)state進(jìn)行修改的規(guī)則抓狭；
mapDispatchToProps可以是一個(gè)函數(shù)，它會(huì)得到dispatch和ownProps兩個(gè)參數(shù)造烁，返回一個(gè)包含映射關(guān)系的對(duì)象：
const mapDispatchToProps = (dispatch) => {
return {
changeInputValue(e) {
const action = getInputChangeAction(e.target.value);
dispatch(action);
}
...
}
};
也可以直接定義成一個(gè)對(duì)象否过，
const mapDispatchToProps = {
onClick: (filter) => {
type: 'SET_VISIBILITY_FILTER',
filter: filter
};
}
分別定義好了mapStateToProps和mapDispatchToProps之后，通過(guò)connect方法即可根據(jù)業(yè)務(wù)邏輯生成容器組件膨蛮，并且把容器組件和UI組件連接起來(lái)叠纹。
進(jìn)行到這一步，我們發(fā)現(xiàn)容器組件還沒(méi)有取得state敞葛，也就是還未與store連接起來(lái)誉察，要利用Provider組件，在根組件的外部再包上一層即可：
import { Provider } from 'react-redux';
const App = (
<Provider store={store}> {/*連接 */}
<TodoList />
</Provider>
);
這樣之后惹谐，包含在Provider組件里面的所有子組件就都可以取得state了持偏。
4. 細(xì)枝末節(jié)（備忘錄）
前面好像沒(méi)有說(shuō)明怎么用react-redux生成的容器組件來(lái)編寫(xiě)UI組件代碼。
mapStateToProps氨肌、dispatchToProps 已經(jīng)把 state 和 ActionCreators 映射到 props上了鸿秆，
因此在UI組件中可以通過(guò) this.props直接取得它們：
const { inputValue,
list,
changeInputValue,
addListItem,
deleteListItem
} = this.props;
....
value = {inputValue}
onChange = {changeInputValue}
....
參考資料：
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
